如何通过js调用本地摄像头呢？获取后如何对视频进行截图呢？在这里跟大家做一个简易的Demo来实现以上几个功能。

涉及到的知识点

实现的功能点

html简单布局

以下先通过HTML我们来实现一个简单的布局，包括样式和按钮。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>H5 canvas 调用摄像头进行绘制</title>    <style>        html,body{            width:100%;            height:100%;            padding: 0px;            margin: 0px;            overflow: hidden;        }        #canvas{            width:500px;            height:300px;        }        #video{            width:500px;            height:300px;        }        .btn{            display:inline-block;            text-align: center;            background-color: #333;            color:#eee;            font-size:14px;            padding:5px 15px;            border-radius: 5px;            cursor:pointer;        }    </style></head><body>    <video id="video" autoplay="true" style="background-color:#ccc;display:none;"></video>    <div style="width:500px;height:300px;margin:30px auto;">        <canvas id="canvas" width="500px" height="300px">您的浏览器不支持H5 ,请更换或升级!</canvas>        <span class="btn" filter="screenshot">截图</span>        <span class="btn" filter="close">暂停</span>        <span class="btn" filter="open">打开</span>    </div>    <div style="width:500px;height:300px;margin:40px auto;" id="show"></div></body></html>

  

	样子差不多是这样的:如何设置浏览器调用摄像头（电脑网页摄像头权限开启方法）(1)

  

	hahiahia 空白一片

  

	我们将video进行了隐藏，然后加上了几个按钮，还有canvas以及最底部的图片展示区域（用来存放截图图片）。
js实现功能

  

	这里先贴下核心代码：
navigator.getUserMedia({    video : {width:500,height:300}},function(stream){    LV.video.srcObject = stream;    LV.video.onloadedmetadata = function(e) {        LV.video.play();    };},function(err){    alert(err);//弹窗报错})

  

	相关的知识点可以参考:http://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

  

	然后根据页面逻辑实现事件以及其他功能，包括：截图、暂停。
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;    var events = {        open : function(){            LV.open();        },        close : function(){            console.log(LV.timer);            clearInterval(LV.timer);        },        screenshot : function(){            //获得当前帧的图像并拿到数据            var image = canvas.toDataURL(.jpg"');            document.getElementById('show').innerHTML = '<img src="'+image+'" style="width:500px;height:300px;" />'        }    };    var LV = {        video : document.getElementById('video'),        canvas : document.getElementById('canvas'),        timer : null,        media : null,        open :function(){            if(!LV.timer){                navigator.getUserMedia({                    video : {width:500,height:300}                },function(stream){                    LV.video.srcObject = stream;                    LV.video.onloadedmetadata = function(e) {                        LV.video.play();                    };                },function(err){                    alert(err);//弹窗报错                })            }            if(LV.timer){                clearInterval(LV.timer);            }            //将画面绘制到canvas中            LV.timer = setInterval(function(){                LV.ctx.drawImage(LV.video,0,0,500,300);            },15);        },        init : function(){            LV.ctx = LV.canvas.getContext('2d');            //绑定事件            document.querySelectorAll('[filter]').forEach(function(item){                item.onclick = function(ev){                    var type = this.getAttribute('filter');                    events[type].call(this,ev);                }            });            return LV;        }    };    LV.init();

  

	原谅我放荡不羁的命名 …