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><button id="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:

  1. drawImage
  2. getContext 取得渲染環境。
  3. HTMLCanvasElement.toDataURL
  4. Angular Render2 API


留言