使用 video 標籤顯示 webcam 的畫面，並且拍照顯示於 canvas 標籤上
之前因為專案上的需要，寫了簡易版的 webcam，也就是將 webcam 的畫面，顯示於 video 標籤上，然後要可以拍照，將拍照後的畫面，顯示在 canvas 標籤上。
以下描述幾個重點的地方，若想看原始碼，可直接參考下方的「下載原始碼」喔。
直接看完成結果：
結構部份 - HTML
在 HTML 的部份，主要是需要 video 標籤，用來呈現視訊鏡頭(webcam)的畫面，如下：
<video id="my_video" poster="https://alldata.sgp1.digitaloceanspaces.com/images%2Fwebcam_hint.png" playsinline autoplay muted></video>然後一個 canvas 標籤，這是為了當執行拍照功能時，將拍照得到的畫面，呈現於 canvas 標籤上，例：
<canvas id="my_canvas"></canvas>功能部份 - JavaScript
- 開啟 webcam：使用 navigator.mediaDevices.getUserMedia() 來取得 MediaStream 串流物件，並設定到 video 標籤的 srcObject。
- 關閉 webcam：將取得的所有 MediaStream 都關閉。
// 開啟視訊鏡頭，瀏覽器會跳詢問視窗
navigator.mediaDevices.getUserMedia({video: true}).then(function(stream){
stream_obj = stream; // 將串流物件放在 stream_obj 全域變數，方便後面關閉 webcam 時會用到
video_el.srcObject = stream; // video 標籤顯示 webcam 畫面
}).catch(function(error){ // 若無法取得畫面，執行 catch
console.log('navigator.MediaDevices.getUserMedia Error: ', error.message, error.name);
});
// 將所有的 MediaStreamTrack 都關閉
stream_obj.getTracks().forEach(function(track) {
track.stop();
});
stream_obj = undefined; // 回到該變數原來預設(即 undefined)
video_el.srcObject = null; // 將 video 標籤上的 srcObject 清空- 拍照功能：使用 canvas_el.getContext('2d').drawImage() 將 video 標籤繪製於 canvas 標籤上。同時也設定寬高。
// 將 video 標籤的影片寬高，顯示於 canvas 標籤上
canvas_el.width = video_el.videoWidth;
canvas_el.height = video_el.videoHeight;
// drawImage 說明文件： https://www.w3schools.com/tags/canvas_drawimage.asp
canvas_el.getContext('2d').drawImage(video_el, 0, 0, canvas_el.width, canvas_el.height);注意事項
此功能限定你的網域要使用 https 的通訊協定才能使用，然而如果只是在本機端網域測試的話，用一般的 http 也是可以的。
瀏覽器會跳出詢問的彈窗，需要使用者同意，才能使用。
