webrtc 二------从视频中获取图片

从视频中获取图片用到canvas。
将video当作源截取一帧数据显示，实现拍照功能。

//html
<video autoplay playsinline  id="player"></video>
<button id="snapshot">拍照</button>
<canvas id="picture"></canvas>

//js
    'use strict'
    var videoplay = document.getElementById('player');
    //获取button 和canvas
    var snapshot = document.getElementById('snapshot');
    var picture = document.getElementById('picture');
    //音视频数据
    function gotMediaStream(stream) {
      videoplay.srcObject = stream;//将获取到的流赋给video标签
    }
    function handleError(err) {
      console.log(err.name + " : " + err.message);
    }
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
      console.log("你的浏览器不支持getUserMedia")
    } else {
      var constraints = {
        video: true,
        audio: true
      }
      navigator.mediaDevices.getUserMedia(constraints)
        .then(gotMediaStream)
        .catch(handleError);
    }

    picture.width = 320
    picture.heigth = 320
    snapshot.onclick = function () {
      picture.getContext('2d').drawImage(videoplay, 0, 0, picture.heigth, picture.heigth);//将videoplay当作源使用drawImage截取一帧数据就实现拍照功能。
    }