十、桌面捕捉和共享

getDisplayMedia

基本格式

let promise = navigator.mediaDevices.getDisplayMedia(constrants)

constrants可选
constrants中约束与getUserMedia函数中完全一致

此功能为Chrome中实验性功能，还未完全开放，只有在最新版本Chrome中可以使用
在使用前需在浏览器中进行设置
chrome://flags/#enable-experimental-web-platform-features

将 disable 改为enabled，点击下方relaunch now，重启浏览器

代码,只要把getUserMedia换成getDisplayMedia即可

let videoPlayer = document.querySelector('video#player');

let gotMediaStream = (stream) => {
    videoPlayer.srcObject = stream
}
let handleError = (err) => {
    console.log(`getDisplayMedia errpr:${err}`)
}

if(!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
    console.log('getDisplayMedia is not supported!');
}else {  
    let constrants = {
        video: true,
        audio: false
    }
    navigator.mediaDevices.getDisplayMedia(constrants)
    .then(gotMediaStream)
    .catch(handleError)
}

运行结果，打开窗口，自动共享桌面

点击分享后，页面实时共享桌面内容
同时可使用视频录制等功能，实现桌面的录制

注意：getDisplayMedia无法同时采集音频