这是我参与11月更文挑战的第6天，活动详情查看：[2021最后一次更文挑战](https://juejin.cn/post/7023643374569816095) 前面我们已经能够利用WebRTC的功能，[通过浏览器打开摄像头](https://an.rustfisher.com/webrtc/web-samples/getUserMedia-open-camera/)，并把预览的图像显示在video元素中。接下来我们尝试从视频中截取某一帧，显示在界面上。 ## html 先准备一下界面，摆上控件。下面是关键部分的代码。 ```html

``` - **video** 用来预览视频 - 3个**button**，分别拿来打开摄像头，截取图片和清除记录 - **canvas** 用来显示截取的图片 - 下面的**div**是拿来存放多个截取图片记录的。给它指定了grid，显示多个图片时候比较好看一些照例，需要引入`adapter-latest.js` ```html ``` ## js 准备实现功能。 ### 打开摄像头并预览和之前的打开摄像头类似，还是要用到`getUserMedia`方法。拿到视频流后交给**video**去播放。 ```js 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，先预定一个尺寸（不预定也行）。 ```js 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，把它们像相册一样展示出来。 ```js 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`）里的子项。用一个循环获取并移除子项。 ```js var child = list.lastElementChild; while (child) { list.removeChild(child); child = list.lastElementChild; } ``` ## 小结打开摄像头，显示视频。把视频绘制到canvas上。创建多个canvas，做成历史记录的效果。主要利用的还是canvas的绘制方法。绘制的时候注意传入的参数，能够指定绘制的边界。也就是说只绘制视频大小中的一部分也是可行的。示例中用到的关键方法 - `getUserMedia` - `getContext` - `drawImage` - `createElement` 简易的[预览链接](https://an.rustfisher.com/webrtc/web-samples/canvas1/)