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

 

鄙視無腦抄襲，鼓勵求證分享。

Tags:

VirMach 便宜 VPS

QNews

QNews