WebRTC 筆記 --- 3 screenshot by canvas.

WebRTC 功能使用的筆記紀錄 3.

個人的撰寫程式環境：

OS： Ubuntu 18.04 LTS

Angular : 6.1.0

Angular-cli : 6.1.2

Typescript : 2.9.2

以下的程式碼必須建立在會使用Angular、Promise與Typescript的基礎知識喔！

建議在筆電(webcam在筆電是基本配備)或是在桌機上面安裝一台簡單的Webcam才能有效運行WebRTC的功能喔！

這次我們會使用Canvas的drawImage的method來擷取畫面中的圖片。
首先我們先在HTML新增button作為擷取圖片使用的按鈕。

html file:

<p><buttonid="screenshot-button"(click)="screenshotBtn()"type="button">
    Take screenshot
</button></p>


<canvas class="screenshotIMG" id="canvasArea"></canvas>
<img [src]="imgUrl" class="none">

這段程式碼就是當使用者按下Capture video這個按鈕的時候Angular會去執行captureVideoBtn()這個function。
至於下方的 canvas dom tag是讓canvas來產生我們要的圖片相關的屬性，最後將產生的圖片轉成一串url再透過下方的img dom tag在頁面上顯示圖片的內容。

接下來是captureVideoBtn()邏輯部份～
首先我們在這個component新增一個 private的HTMLCanvasElement物件：

export class YourComponent implements OnInit {
....

...
  private canvasArea: HTMLCanvasElement;

接著再ngOnInitit() 內指定DOM元件：

ngOnInit() {
......
    this.canvasArea = <HTMLCanvasElement>this.el.nativeElement
                        .querySelector('#canvasArea');

最後是關於按鍵本身的邏輯處理。

screenshotBtn() {
    if (this.videoElement.srcObject) {
      this.canvasArea.width = this.videoElement.videoWidth;
      this.canvasArea.height = this.videoElement.videoHeight;
      this.canvasArea.getContext('2d').drawImage(this.videoElement, 0, 0);
      this.imgUrl = this.canvasArea.toDataURL('image/jpeg', 1);
      const img = <HTMLImageElement>this.el.nativeElement.querySelector('img');
      img.classList.remove('none');
      // download screen shot automatically.
      const link = this.render.createElement('a');
      this.render.appendChild(document.body, link);
      link.href = this.imgUrl;
      link.download = 'file.jpeg';
      link.click();
    }
  }

這邊一開始我們先判斷videoElement物件內srcObject是否有東西～簡單的說就是WebRTC的stream存不存在，有畫面我們才處理。
接著把Canvas要產生的圖片大小參照videoElement的寬高一致。
然後使用canvas的getContext()來取得一個2D的渲染環境。接著使用drawImage()來畫出內容。
drawImage的第一個參數是用來告知canvas要話的來源元素～這邊就是我們的stream畫面。
第二個參數畫的內容起始的x座標，第三個參數為畫的內容起始的y座標。要注意的是html的起始座標是以瀏覽器左上角為起始點(0,0)喔！

然後我們使用Canvas的toDataURL()方法將Canvas的內容轉成jpeg。這個方法的第二個參數為轉檔的品質！參數範圍是 0~1 。這個方法將會回傳一個Url因此我們就可以將這個Url塞到下方的img dom tag來顯示產生的圖片。

最後部份link相關的程式碼是我們在頁面上產生一個下載圖片的連結，然後透過指定下載的url位置、檔案名稱與click的event來作到產生圖片後自動下載圖片到使用的local端。
這邊用到Angular的 Render2 的API，所以要先import 與插入。

import { Component, OnInit, ElementRef, Renderer2 } from '@angular/core';

constructor(
    private element: ElementRef,
    private render: Renderer2
  ) {
    this.el = this.element;
  }

最後是 css的程式碼：

.none {
  display: none;
}

以上就是產生screen shot的按鈕程式碼。下次應該會開始紀錄有關RTCPeerConnection的API與觀念了吧！-------- 待續。

REF:

CloverHsc的Blog

搜尋此網誌