用Canvas定时显示摄像头捕获的画像(HTML5)

时间:2024-02-01 15:43:00

用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>

 

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