getDisplayMedia抓取螢幕\視窗畫面

MediaDevices提供像是照相機、麥克風和螢幕分享等功能，可取得這些多媒體的串流資料，這篇主要透過MediaDevices.getDisplayMedia()進行實作:

使用HTML的<video>可將影像顯示在Web page上，新增兩個按鈕一個是開始截圖、一個結束截圖。

<video id="video" autoplay>
    Your browser does not support HTML5 video.
</video>
<button type="button" onclick="startCapture()">開始截圖</button>
<button type="button" onclick="stopCapture()">停止截圖</button>
var video = document.getElementById("video");
var startCapture = function() {
    if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
        navigator.mediaDevices.getDisplayMedia({
            video: {
                cursor: "always"
            },
            audio: false
        }).then(function(stream) {
            video.srcObject = stream;
            video.play();
        });
    }
}
var stopCapture = function(evt) {
    var tracks = video.srcObject.getTracks();
    tracks.forEach(track => track.stop());

    video.srcObject = null;
}