JS:
const videoElem = document.getElementById("video");
const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");
// Options for getDisplayMedia()
var displayMediaOptions = {
video: {
cursor: "never"
},
audio: false
};
// Set event listeners for the start and stop buttons
startElem.addEventListener("click", function(evt) {
startCapture();
}, false);
stopElem.addEventListener("click", function(evt) {
stopCapture();
}, false);
async function startCapture() {
try {
let screen = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
videoElem.srcObject = screen
sendInfo(screen);
} catch(err) {
console.error("Error: " + err);
}
}
function stopCapture(evt) {
let tracks = videoElem.srcObject.getTracks();
tracks.forEach(track => track.stop());
videoElem.srcObject = null;
}
function sendInfo(data) {
// Тут отправляем 'data' на сервер
/*
Как отобразить данные из видео
videoElem.srcObject = (здесь данные с сервера)
*/
}
HTML:
<p><button id="start">Start Capture</button> <button id="stop">Stop Capture</button></p>
<video id="video" autoplay></video>
<br>
CSS:
#video {
border: 1px solid #999;
width: 98%;
max-width: 860px;
}
Тут не обязателен HTTPS, не нужны внешние ресурсы.