webrtc之实现拍照功能

基本概念

很多人都应该玩过，在空白的纸上画同一个物体，并让物体之前稍微有些变化，然后连续快速地翻动这几张纸，就形成了一个小动画。

音视频播放器就是利用这样的原理来播放音视频文件的。当要播放某个音视频文件时，播放器就会按照一定的时间间隔来连续的播放从音视频文件中解码后的视频帧，这样视频就动起来了。同理，播放摄像头获取的视频帧也是如此，只是从摄像头获取的是非编码视频帧，所以不需要解码。

播放的视频帧之间的时间间隔是非常小的。如按每秒20帧的帧率，每帧之间的间隔是50ms
播放器播放的是非编码帧（解码后的帧），这些非编码帧就是一个个独立的图像
从摄像头里采集的帧或通过编码器解码后的帧都是非编码帧。非编码帧的格式一般是 YUV 或 RGB。
通过编码器（如H264/H265, VP8/VP9）压缩后的帧为编码帧。以H264为例，经过H264编码的帧包括以下三种类型：
- I 帧：关键帧。压缩率低，可以单独解码成一幅完整的图像。
- P 帧：参考帧。压缩率较高，解码时依赖于前面已解码的数据。
- B 帧：前后参考帧。压缩率最高，解码时不光依赖前面已经解码的帧，而且还依赖它后面的 P 帧。换句话说就是，B 帧后面的 P 帧要优先于它进行解码，然后才能将 B 帧解码。

实现拍照

可参考这个代码，还可给图片添加滤镜效果并保存下来

拍照其实也就是从播放器里的视频帧中选一个，然后保存下来。

第一步，获取摄像头的视频流并通过video标签播放出来

javascript 复制代码

//获取HTML页面中的video标签  
const videoDom = document.querySelector('video#player');

//播放视频流
function gotMediaStream(stream){
  videoDom.srcObject = stream;
}

function handleError(err){
  console.log('getUserMedia error:', err);
}

//对采集的数据做一些限制
const constraints = {
    video : {
      width: 1280,
      height: 720,
      frameRate:15,
    },
    audio : false
}

//采集音视频数据流
navigator.mediaDevices.getUserMedia(constraints)
                        .then(gotMediaStream)
                        .catch(handleError);

利用Canvas来绘制图片并保存

ini 复制代码

const picture = document.querySelector('canvas#picture');
picture.width = 640;
picture.height = 480;

picture.getContext('2d').drawImage(videoplay, 0, 0, picture.width, picture.height);

...

function downLoad(url){
    const oA = document.createElement("a");
    oA.download = 'photo';// 设置下载的文件名，默认是'下载'
    oA.href = url;
    document.body.appendChild(oA);
    oA.click();
    oA.remove(); // 下载之后把创建的元素删除
}

document.querySelector("button#save").onclick = function (){
    downLoad(canvas.toDataURL("image/jpeg"));
}