Вы когда-нибудь задумывались о том, насколько сложно или легко создать собственное приложение для совместного использования экрана?
В этой статье мы покажем вам, как создать приложение для совместного использования экрана на JavaScript с помощью Screen Capture API
и его техники getDisplayMedia(). Это позволит нам захватывать половину или весь экран и делиться им с другими
пользователями во время сеанса конференции WebRTC.
Начальные шаги:
- Создайте новый проект в вашей любимой IDE.
- Установите код HTML-шаблона
- Добавьте код JavaScript
- Разверните Live-сервер
Создайте новый проект в вашей любимой IDE
В этом руководстве я буду использовать VScode. Не стесняйтесь использовать редактор по своему усмотрению. Давайте продолжим и настроим
наш html-код.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Screen Sharing</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div style="width:80%;background: grey;margin: auto;">
<video id="video" autoplay playsinline muted></video>
</div>
<div style="width:80%;margin: auto;padding-top:10px ;">
<button class="btn btn-primary" id="start"> Start Screen Sharing</button>
<button class="btn btn-secondary" id="stop"> Stop</button>
</div>
</body>
</html>
Запустите ваш live-сервер и откройте файл index.html в браузере. Вы должны увидеть страницу, которая выглядит следующим образом:
JavaScript:
Далее нам нужно добавить немного кода JavaScript в наш файл index.html. Добавьте теги сценария в раздел body
вашего файла index.html и добавьте следующий код:
const videoElem = document.getElementById("video");
const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");
// Options for getDisplayMedia()
var displayMediaOptions = {
video: {
cursor: "always",
height: 1000,
width: 1200
},
audio: false
};
// Set event listeners for the start and stop buttons
startElem.addEventListener("click", function (evt) {
startCapture();
}, false);
// Stop the screen capture
stopElem.addEventListener("click", function (evt) {
stopCapture();
}, false);
// Start the screen capture
async function startCapture() {
try {
videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
dumpOptionsInfo();
} catch (err) {
// Handle error
console.error("Error: " + err);
}
}
// Stop the stream
function stopCapture(evt) {
let tracks = videoElem.srcObject.getTracks();
tracks.forEach(track => track.stop());
videoElem.srcObject = null;
}
// Dump the available media track capabilities to the console
function dumpOptionsInfo() {
const videoTrack = videoElem.srcObject.getVideoTracks()[0];
console.info("Track settings:");
console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
console.info("Track constraints:");
console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
}
Тестирование приложения
Теперь мы можем приступить к тестированию нашего приложения. Откройте файл index.html в браузере и нажмите на кнопку запуска, чтобы
инициализировать захват экрана.
Щелкните на экране, и вы увидите видеопоток экрана, на котором вы щелкнули. Вы также можете нажать на кнопку
чтобы остановить захват экрана.
Полный экран:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Screen Sharing</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div style="width:80%;background: grey;margin: auto;">
<video id="video" autoplay playsinline muted></video>
</div>
<div style="width:80%;margin: auto;padding-top:10px ;">
<button class="btn btn-primary" id="start"> Start Screen Sharing</button>
<button class="btn btn-secondary" id="stop"> Stop</button>
</div>
<script type="text/javascript">
const videoElem = document.getElementById("video");
const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");
// Options for getDisplayMedia()
var displayMediaOptions = {
video: {
cursor: "always",
height: 1000,
width: 1200
},
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 {
videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
dumpOptionsInfo();
} catch (err) {
console.error("Error: " + err);
}
}
function stopCapture(evt) {
let tracks = videoElem.srcObject.getTracks();
tracks.forEach(track => track.stop());
videoElem.srcObject = null;
}
function dumpOptionsInfo() {
const videoTrack = videoElem.srcObject.getVideoTracks()[0];
console.info("Track settings:");
console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
console.info("Track constraints:");
console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
}
</script>
</body>
</html>
🤝 Большое спасибо, что нашли время прочитать эту статью! Я надеюсь, что она помогла вам и вы узнали что-то новое сегодня! Пожалуйста, оставьте комментарий, если у вас есть что-то, что вы хотели бы добавить.
☕️ Если вам нравится читать мой контент, купите мне кофе, так как это поможет мне продолжать делать потрясающие качественные блоги!
👨🏽💻 Для большего количества фрагментов кода Web Dev, советов и подсказок проверьте мою платформу Grepper.
🎨 Вы также можете посмотреть мое портфолио здесь
🐦 Вы также можете следовать за мной в Twitter, чтобы узнать о моем самоучительском пути, а также получить больше полезных советов по веб-разработке.