需要實現一個功能，大意嘛，就是標題寫的那個意思。雖然使用者只要求在微信中實現即可，也就是可以用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>

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