На этой неделе я участвовал в проекте с открытым исходным кодом Meetify.


Особенность

Моя идея заключалась в том, что на Веб-сайт пользователь мог нажать на Кнопка демонстрации экрана и поделитесь его экраном.

демонстрация экрана

Я реализовал эту функциональность с помощью vanilla Javascript.


Ванильный JavaScript 😍

Честно говоря, мне очень нравится ванильный JS. Без сомнения, существует так много полезных фреймворков JavaScript, которые могут сэкономить много времени. Тем не менее, удивительно, какие вещи мы можем делать с помощью ванильного JavaScript: распознавание речи, запись видео, слайдер, карусель и т. д.

Большинство из этих вещей можно было бы сделать с помощью JQuery и других фреймворков. но разве не здорово знать, как построить одно и то же несколькими способами?

Я думаю, это сделает вас лучше как разработчика 😊

Eсть отличный курс от WesBos, который создает 30 проектов с vanilla JS. Я многому научился у этого. Не спонсирую, просто делюсь отличным курсом. Если вам интересно, вы не пожалеете!


Реализация 💻

Для моего пиар Я написал следующий код:

function dumpOptionsInfo() {
    const videoTrack = videoElem.srcObject.getVideoTracks()[0];
    console.log(videoTrack);

    console.info("Track settings:");
    console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
    console.info("Track constraints:");
    console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
  }

  const videoElem = document.getElementById("video");
  let displayMediaOptions = {
    video: {
      cursor: "always",
      height: 1000,
      width: 1200,
    },
    audio: false,
  };

  async function startCapture() {
    try {
      videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
      dumpOptionsInfo();
    } catch (err) {
      console.error("Error: " + err);
    }
  }


Войти в полноэкранный режим

Выйти из полноэкранного режима

Для HTML мы можем использовать следующий код:

<body>
    <div>
        <video id="video" autoplay playsinline muted></video>
    </div>
    <div>
        <button id="start"> Start Screen Sharing</button>
        <button id="stop"> Stop</button>
    </div>
</body>
Войти в полноэкранный режим

Выйти из полноэкранного режима

При нажатии на кнопку «Начать общий доступ к экрану» у вас должно появиться всплывающее окно, подобное этому:

выскакивать

Вы можете нажать на окно, и начнется демонстрация экрана.

совместное использование экрана

Удивительно, правда?

Вы можете проверить более подробный блог о совместном использовании экрана с помощью Javascript. здесь.

Если вы хотите поддержать меня, вы можете купи мне кофе. Это будет мотивировать меня писать лучшие блоги и делиться знаниями.

Дайте нам знать, что вы думаете в комментариях 🙂 Если у вас есть другие курсы по ванильному JavaScript, которыми вы хотите поделиться, дайте нам знать 🙂