Связь между браузерами в реальном времени стала возможной в 2011 году благодаря WebRTC. Этот API позволяет вам создать P2P-соединение между двумя пользователями и позволить им обмениваться данными, например, общаться через видеочат и делиться своим экраном. В этой серии статей мы собираемся создать такой видеочат. Вы можете проверить следующие статьи:

Первым шагом к созданию видеочата является получение доступа к устройствам пользователя, таким как веб-камера и микрофон, и их потоку данных. В этой первой статье мы собираемся получить доступ к нашим устройствам и отобразить видео (со звуком) в нашем браузере. Конечный результат будет выглядеть так:

Доступ к пользовательскому аудио- и видеопотоку

Сначала нам нужно получить доступ к веб-камере и микрофону пользователя. Навигатор имеет доступ к медиаустройствам через интерфейс MediaDevices.

window.navigator.mediaDevices

Мы можем получить список всех устройств, к которым у браузера есть доступ, вызвав в консоли:

const devices = await window.navigator
                            .mediaDevices
                            .enumerateDevices();

В моем браузере я получаю массив из пяти устройств, одного видеовхода и пяти аудиовходов. Но нас не интересуют сами устройства, мы хотим получить от них поток данных.

Медиа-контент, как аудио и видео, представлен интерфейсом MediaStream. Чтобы получить доступ к потоку данных, необходимо вызвать функцию getUserMedia для объекта mediaDevices. Нам нужно указать типы мультимедиа, которые мы хотим, в качестве параметра, здесь аудио и видео. Мы можем задать кучу ограничений в качестве параметра, не только тип мультимедиа, но также размер видео, которое мы хотим, ориентацию, ... Здесь мы сохраняем простоту:

const stream = await window.navigator.mediaDevices.getUserMedia(
  {
    video: true,
    audio: true,
  },
);

Это возвращает обещание, так как вы должны разрешить доступ к своим устройствам. В Google Chrome вы должны увидеть такой диалог:

Если вы ответите утвердительно, вы получите объект MediaStream. Если у вашей веб-камеры есть эта функция, вы должны увидеть небольшой свет рядом с ней, говорящий о том, что теперь она включена.

Наш объект MediaStream состоит из двух дорожек, одна дорожка соответствует одному типу мультимедиа. Вы можете получить к ним доступ, позвонив

stream.getAudioTracks();
stream.getVideoTracks();

Эти методы возвращают массивы дорожек, каждая дорожка содержит некоторую информацию, такую ​​как тип (например, аудио или видео), метка, идея, но также, если дорожка включена, отключена и т. Д.

HTML5-тег видео

Теперь у нас есть доступ к потоку данных с микрофона и веб-камеры, мы просто хотим отобразить их в нашем браузере, чтобы убедиться, что он работает. Раньше это было головной болью, но тег видео HTML5 позволяет нам довольно легко создавать видео на странице.

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

Давайте посмотрим на код JavaScript:

Когда вы нажимаете на кнопку, мы создаем поток, как и в предыдущем разделе. Ваш браузер должен запросить ваше разрешение на запуск видео (мы не рассматриваем случаи, когда пользователь отказывается здесь). Как только поток становится доступным, он устанавливается в качестве исходного объекта для тега видео, и видео запускается. Теперь вы должны увидеть и услышать себя.

Теперь у нас есть доступ к потоку данных из браузера. Следующим шагом является создание соединения между браузерами пользователей, желающих общаться в видеочате. В следующей статье мы создаем соединение WebSocket между двумя клиентами.