效果圖
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屏幕共享</title>
</head>
<body>
<div id="container">
<video id="video-local" autoplay playsinline></video>
<button id="showVideo" onclick="startShard()">開始共享屏幕</button>
</div>
</body>
</html>
javaScript
let videoEle = document.querySelector('video');
/**
* 開啓屏幕共享
* @returns {boolean}
*/
function startShard() {
if (window.stream != null) {
alert('你已開啓屏幕共享，請勿重複打開哦');
return false;
}
const constraints = {
audio: true,
video: true
};
try {
navigator.mediaDevices.getDisplayMedia(constraints).then(gotStream);
} catch (err) {
console.error(err)
}
}
/**
* 獲取到流數據
* @param stream
*/
function gotStream(stream) {
window.stream = stream;
videoEle.srcObject = stream;
//監聽手動點擊“停止分享”
stream.getVideoTracks()[0].onended = () => {
// 獲取流中的所有軌道
const tracks = stream.getTracks();
tracks.forEach(function (track) {
track.stop();
});
//監聽以後的處理邏輯……
alert('屏幕共享已關閉')
videoEle.srcObject = null;
window.stream = null;
}
}