WebRTC從攝像頭獲取圖片傳入canvas

AnRFDev發表於2021-11-25
WebCanvas

WebRTC從攝像頭獲取圖片傳入canvas

前面我們已經能夠利用WebRTC的功能，通過瀏覽器開啟攝像頭，並把預覽的影像顯示在video元素中。
接下來我們嘗試從視訊中擷取某一幀，顯示在介面上。

html

先準備一下介面，擺上控制元件。下面是關鍵部分的程式碼。

<video playsinline autoplay></video>
<button id="showVideo">開啟攝像頭</button>
<button id="takeSnapshot">擷取</button>
<button id="clearList">清除記錄</button>
<canvas id="mainCanvas"></canvas>
<div id="list" style="display: grid; grid-template-columns: repeat(auto-fill, 100px);
    column-gap: 20px; row-gap: 20px;"></div>
  • video 用來預覽視訊
  • 3個button，分別拿來開啟攝像頭，擷取圖片和清除記錄
  • canvas 用來顯示擷取的圖片
  • 下面的div是拿來存放多個擷取圖片記錄的。給它指定了grid，顯示多個圖片時候比較好看一些

照例，需要引入adapter-latest.js

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

js

準備實現功能。

開啟攝像頭並預覽

和之前的開啟攝像頭類似，還是要用到getUserMedia方法。拿到視訊流後交給video去播放。

const video = document.querySelector('video');
const constraints = {
  audio: false,
  video: true
};
// ....

function openCamera(e) {
  navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(onError);
}

function gotStream(stream) {
  window.stream = stream;
  video.srcObject = stream;
}

function onError(error) {
  console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
}

擷取圖片

拿到介面中的canvas，先預定一個尺寸（不預定也行）。

const mCanvas = window.canvas = document.querySelector('#mainCanvas');
mCanvas.width = 480;
mCanvas.height = 360;

// 開始擷取
  mCanvas.width = video.videoWidth;
  mCanvas.height = video.videoHeight;
  mCanvas.getContext('2d').drawImage(video, 0, 0, mCanvas.width, mCanvas.height);

發起擷取後，使用getContext獲取到CanvasRenderingContext2D物件。然後呼叫它的drawImage方法。
把video中的視訊幀繪製進去。

除了繪製這一個canvas，我們可以在每次發起（點選按鈕）的時候建立新的canvas，把它們像相簿一樣展示出來。

const list = document.querySelector('#list'); // 拿來存放多個元素

  // 新增1張
  var divItem = document.createElement("div");
  divItem.style.display = "block";
  divItem.width = 100;
  divItem.height = divItem.width * video.videoHeight / video.videoWidth; // 計算一下比例
  divItem.style.width = divItem.width + "px";
  divItem.style.height = divItem.height + "px";
  console.log("div item size: ", divItem.width, divItem.height);

  var c1 = document.createElement("canvas");
  c1.width = divItem.width;
  c1.height = divItem.height;
  c1.getContext('2d').drawImage(video, 0, 0, mCanvas.width, mCanvas.height, 0, 0, c1.width, c1.height);

  divItem.appendChild(c1);
  list.appendChild(divItem);

子項的存放方式是div包裹canvas。先用document.createElement("div")建立divItem。
按照視訊的寬高，計算調整divItem的大小，並設定style。

document.createElement("canvas")建立c1，它的寬高設定為前面divItem的寬高。然後把圖片繪製進去。
drawImage時，前面傳入的是視訊（源）的範圍，後面的4個引數是自己的繪製範圍。
這樣一個子項就生成完畢了。新增到我們準備好的列表（div）中。

清除記錄

清除div（list）裡的子項。用一個迴圈獲取並移除子項。

var child = list.lastElementChild;
while (child) {
    list.removeChild(child);
    child = list.lastElementChild;
}

小結

開啟攝像頭，顯示視訊。把視訊繪製到canvas上。建立多個canvas，做成歷史記錄的效果。
主要利用的還是canvas的繪製方法。繪製的時候注意傳入的引數，能夠指定繪製的邊界。
也就是說只繪製視訊大小中的一部分也是可行的。

示例中用到的關鍵方法

  • getUserMedia
  • getContext
  • drawImage
  • createElement

預覽

簡易的預覽連結

相關文章