Экран захвата и транслируйте, как Zoom, используя JavaScript

Привет всем

В этой статье мы увидим, как приложения, такие как Zoom, используют Экран захват API Предоставлено браузерами, чтобы захватить экран и транслировать его на другой конец.

Мы увидим основную реализацию захвата экрана, чтобы получить идею.

Экран захват API

API захвата экрана позволяет пользователю выбрать экран или часть экрана (например, окно) для захвата в виде потока носителя. Этот поток может быть записан или обмен другими людьми по сети.

Реализация

Во -первых, мы создадим простую веб -страницу HTML, чтобы показать поток и кнопки захваченного экрана, чтобы начать и прекратить захват.

Имя файла: index.html

  
  
  
  
  


  
Screen Capture
  

    Start Sharing
    Stop Sharing
  
  

Я предполагаю, что у вас есть базовые знания о HTML и CSS Анкет

Теперь мы создадим файл JavaScript, где мы будем реализовать основную логическую часть.

Имя файла: script.js

function main() {
  const video = document.getElementById("video");
  const start = document.getElementById("start");
  const stop = document.getElementById("stop");

  var displayMediaOptions = {
    video: {
      cursor: "always",
    },
    audio: false,
  };

  start.onclick = function (e) {
    startSharing();
  };
  stop.onclick = function (e) {
    stopSharing();
  };

  async function startSharing() {
    try {
      video.srcObject = await navigator.mediaDevices.getDisplayMedia(
        displayMediaOptions
      );
      } catch (error) {
        console.log(error);
      }
    }

    function stopSharing() {
      let tracks = video.srcObject.getTracks();
      tracks.forEach((track) => track.stop());
      video.srcObject = null;
    }
}

main();

• Сначала мы назначаем ссылку на видео элемент и кнопка элементы.

• Слушание на старт и Стоп кнопка для Onclick Событие, которое будет вызывать StartSharing и остановка Метод соответственно. DisplayMediaOptions

• это своего рода вариант конфигурации, который мы передаем при захвате потока. Аудио: ложь

  • как мы не захватываем аудио. Video.cursor: всегда
  • означает, что курсор всегда будет виден на потоке.

Проверьте официальный Документы Для других вариантов.

Начните обмен функцией

Чтобы начать снимать видео с экрана, мы используем GetDisplayMedia Метод в экземпляре Navigator.MediaDevices Анкет

Обещание возвращено GetDisplayMedia Метод решается к потоку мультимедиа, который транслирует захваченный экран, который мы устанавливаем в video.srcobject Анкет

Прекратите функцию совместного использования

Чтобы прекратить снимать экран, мы получаем список всех треков, используя GetTracks Метод video.srcobject Анкет Затем пробираясь через список треков и вызывая его Стоп метод Это остановит поток.

После этого мы устанавливаем video.srcobject к NULL Анкет

Пример

GitHub Repo: Скриншот

Попробуйте: Жить

Первоначально опубликовано на blog.bibekkakati.me

Спасибо за чтение 🙏

Если вам понравилась эта статья или нашли ее полезной, дайте ей палец вверх 👍

Не стесняйтесь подключаться 👋

Twitter | Instagram | LinkedIn

Если вам нравится моя работа и вы хотите поддержать ее, вы можете сделать это здесь. Я очень признателю это.

Оригинал: “https://dev.to/bibekkakati/capture-screen-and-stream-like-zoom-using-javascript-1b65”