网页上获取摄像头，并截取图像

1.页面html

<div class="layui-inline">
                <video width="200px" height="150px"></video>
                <canvas width="200px" height="150px"></canvas>
                <p>
                    <button id="start" class="layui-btn">打开摄像头</button>
                    <button id="snap" class="layui-btn layui-btn-normal">截取图像</button>
                    <button id="close" class="layui-btn layui-btn-danger">关闭摄像头</button>
                </p>
            </div>

2.js

window.onload = function () {
        var canvas = document.getElementsByTagName('canvas')[0],
            context = canvas.getContext('2d'),
            video = document.getElementsByTagName("video")[0],
            snap = document.getElementById("snap"),
            close = document.getElementById("close"),
            start = document.getElementById("start"),
            MediaStreamTrack;
        start.addEventListener('click', function () {
            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia({
                    video: true,
                    audio: true
                }).then(function (stream) {
                    MediaStreamTrack=typeof stream.stop==='function'?stream:stream.getTracks()[1];
                    // video.src=(window.URL).createObjectURL(stream);
                    try{
                        video.srcObject = stream;
                    }catch (e) {
                        video.src=(window.URL).createObjectURL(stream);
                    }
                    video.play();
                }).catch(function(err){
                    console.log(err);
                });
            }else if(navigator.getMedia){
                navigator.getMedia({
                    video: true
                }).then(function (stream) {
                    MediaStreamTrack=stream.getTracks()[1];
                    // video.src=(window.webkitURL).createObjectURL(stream);
                    try{
                        video.srcObject = stream;
                    }catch (e) {
                        video.src=(window.URL).createObjectURL(stream);
                    }
                    video.play();
                }).catch(function(err){
                    console.log(err);
                });
            }
        });
        snap.addEventListener('click', function () {
            context.drawImage(video, 0, 0,200,150);
        });
        close.addEventListener('click', function () {
            MediaStreamTrack && MediaStreamTrack.stop();
        });
    }

重点：

                 try{
                        video.srcObject = stream;
                    }catch (e) {
                        video.src=(window.URL).createObjectURL(stream);
                    }

部分浏览器可能不兼容上述方法，这种写法可以避免。