需要实现一个功能,大意嘛,就是标题写的那个意思。虽然用户只要求在微信中实现即可,也就是可以用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>
鄙视无脑抄袭,鼓励求证分享。