用Canvas定时显示摄像头捕获的画像（HTML5）

用Canvas定时显示摄像头捕获的画像（HTML5）

需要实现一个功能，大意嘛，就是标题写的那个意思。虽然用户只要求在微信中实现即可，也就是可以用JSSDK。但是前端小哥哥脑袋一根筋，就想用原生的H5和JS实现。

网上铺天盖地的资料，可惜没有一个是可以用的。对，你没看错，都是相互抄袭，都没验证一下。

托前端小哥哥的福，把demo代码完成。代码就寥寥几行，不详细解释，大家需要注意几点：

1、要让浏览器顺利唤起摄像头，域名必须是https

2、代码要正确，如下：

<video controls="controls" src="" id="demo" ></video>
<canvas id="canvas" width="500" height="500"></canvas>

<script type="text/javascript">
var context = canvas.getContext("2d");

navigator.getMedia =(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mediaDevices.getUserMedia || navigator.msGetUserMedia); 

var video = document.getElementById("demo");
navigator.getMedia({
    video : true
},res=>{
    video.srcObject = res;
    video.play();
},function(){});

window.setInterval(function() {
    context.drawImage(video, 0, 0, 375, 180);
}, 15);
</script>

 

鄙视无脑抄袭，鼓励求证分享。