Видеопоток: GetUserMedia API, запись, загрузка

5 (100%) 14 vote[s]

Видеопоток с веб-камеры управляется и обрабатывается при помощи GetUserMedia API . Рассмотрим части,  связанные с элементами <video> и <audio>. Хотя этот API является одним из компонентов спецификации WebRTC и поэтому не считается «реальной» частью спецификации HTML5, все же можно считать, что он имеет отношение к «мультимедийной» части HTML5. API getUserMedia при работе с видеопотоками всегда используется вместе с элементом <video> .

Типичное использование API getUserMedia с веб-камерой

Основная идея состоит в том, чтобы установить атрибут srcObject элемента <video> для объекта живого видеопотока, выходящего из веб-камеры. Чтобы получить этот поток, вам нужно вызвать метод navigator.mediaDevices.getUserMedia() (но не устаревший navigator.getUserMedia ()) из API getUserMedia, который возвращает  промис ES6 (ES означает ECMAScript и является языком сценариев, который составляет основу JavaScript). Не паникуйте, если вы не знаете промисы ES6! Синтаксис очень прост, и вы узнаете, что вам нужно из приведенных примеров.

Видеопоток передается в качестве параметра  методу then (), возвращаемому промису, как в этом типичном примере:

<html>
<head>
</head>
<body>
<video id="myVideo" autoplay>Fallback msg here.</video>
<script>
  if (navigator.getUserMedia) {
    // запросить видео и аудио поток с веб-камеры пользователя
    navigator.mediaDevices.getUserMedia({
        audio: true,
        video: true
    }).then((stream) => {
      var video = document.querySelector('#myVideo');
      video.srcObject = stream;
      video.play();
    }).catch((error) => {
      console.log('navigator.getUserMedia error: ', error);
    });
}
</script>
</body>
</html>

HTTPS является обязательным: для работы getUserMedia необходимо получить доступ к странице, содержащей код JavaScript, через https: // . В противном случае вы получите сообщение об ошибке.

Текущая поддержка браузера

Поддержка очень хорошая во всех современных браузерах, включая мобильные:

Видеопоток-с-веб-камеры-GetUserMedia API

Подробнее о getUserMedia: запуск/остановка веб-камеры, снимки экрана, фильтры CSS и т. д.

Рассмотрим несколько примеров того, что можно сделать с помощью API getUserMedia: запустить/остановить веб-камеру, сделать снимок экрана с текущего видеопотока с веб-камеры и применить эффекты CSS в режиме реального времени.

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

Как остановить/включить веб-камеру

Чтобы остановить веб-камеру и заставить устройство «разблокировать ее», необходимо вызвать метод stop () видеопотока:

Смотреть код

Пояснения:

    • Строки 11-13 : мы вызываем метод . getUserMedia . Параметры указывают, что мы хотим захватить видео и аудио с текущего устройства (веб-камера по умолчанию). Вызов getUserMedia возвращает промис ES6: метод then (stream).
    • Строка 14: метод then (stream) вызывается в случае успеха и получает текущий аудио/видео поток в качестве параметра. Это передается браузером в код JavaScript. 
    • Строки 15-19Строка 16  устанавливает аудио/видео поток веб-камеры по умолчанию для атрибута srcObject элемента video, а строка 18 начинает отображать его в видеоплеере (может быть несколько веб-камер). Строка 19 сохраняет поток в глобальной переменной, чтобы мы могли использовать его из другой функции (для остановки/запуска веб-камеры …)
    • Строки 19-23 определяют метод catch, вызываемый в случае ошибки (возможно, к веб-камере нет доступа или авторизация не предоставлена).
    • Строки 25-27 : функция остановки веб-камеры. Здесь мы используем глобальную переменную webcamStream , которая была инициализирована, когда мы начали использовать веб-камеру в строке 19. Мы должны отдельно остановить аудио и видео потоки.

Другие примеры, как обрабатывать видеопоток

Видеопоток с применением эффектов CSS в режиме реального времени

Попробуйте этот пример, который показывает, как использовать API getUserMedia. Обратите внимание на эффекты CSS (кликните на видео, чтобы переходить от одного эффекта к другому). Этот пример работает в Chrome / Firefox / Opera:

Нажмите кнопку «Запустить веб-камеру», затем нажмите на видео, чтобы переключать различные эффекты.

Смотреть код

Как сделать и сохранить снимок из прямой трансляции с веб камеры

Хитрость заключается в том, чтобы скопировать и вставить текущее изображение из видеопотока в элемент  <canvas> .

Мы рассмотрим этот пример более подробно в теме, связанной с элементом <canvas>. Пока что просто изучите логику кода в примере:

Веб-камера

Снимок:

Смотреть код

Как записать и скачать видеопоток с веб-камеры с помощью MediaRecorder API

Записывайте, воспроизводите и загружайте видеопоток, снятый с помощью веб-камеры. Нажмите «начать запись», затем нажмите кнопку воспроизведения на элементе видео в правой части приложения. Вы также можете нажать кнопку «скачать», чтобы загрузить файл .webm , который можно воспроизводить в автономном режиме с помощью медиаплеера, например, такого как VLC .

Смотреть код

Для использования объекта mediaRecorder необходимо пять шагов

1 — Создайте медиа-рекордер из потока

1.	var options = {mimeType: 'video/webm; codecs=vp9'};
2.	mediaRecorder = new MediaRecorder(stream, options);

… где streams обычно является объектом, возвращаемым при вызове getUserMedia (см. предыдущие примеры).

2 — Добавьте «обработчик данных» и вызовите метод start () объекта mediaRecorder.

1.	var recordedChunks = []; // будет держать записанный поток
2.	mediaRecorder.ondataavailable = handleDataAvailable;
3.	mediaRecorder.start();
4.	 
5.	function handleDataAvailable(event) {
6.	   if (event.data.size > 0) {
7.	      recordedChunks.push(event.data);
8.	   } else {
9.	   // ...
10.	}

Пояснения:

      • Строка 1 : мы объявляем массив байтов, который будет содержать записанный поток.
      • Строка 2 : мы объявляем функцию обратного вызова, которая будет вызываться во время захвата потока. Пока будет использоваться веб-камера, каждые xxx секунды порции данных будут передаваться в функцию handleDataAvailable .
      • Строки 5-10 : эта функция собирает порцию данных, которая соответствует нескольким секундам видео, и сохраняет ее в байтовом массиве recordsChunks.

3 — Когда закончится запись, остановите MediaRecorder.

Когда нужно остановить запись, вызываем метод stop () объекта mediaRecorder. Это завершит периодическое выполнение  метода handleDataAvailable и остановит сбор данных.

1.	mediaRecorder.stop();

4 — Создайте BLOB-объект (большой двоичный объект) с собранными данными и используйте его для установки атрибута src видеопроигрывателя HTML5.

Этот фрагмент кода создает большой двоичный объект с массивом  recordedChunks. Используйте стандартный метод URL.createObjectURL (recordedChunks), чтобы создать другой объект, который можно использовать в качестве значения для установки атрибута src видеоэлемента HTML5.

Таким образом, записанный поток может быть воспроизведен с использованием стандартного элемента видео HTML5.

1.	function play() {
2.	   var superBuffer = new Blob(recordedChunks);
3.	   videoElement.src =
4.	         window.URL.createObjectURL(superBuffer);
5.	}

5 — Скачать захваченный поток.

Хитрость заключается в создании на лету невидимой ссылки с атрибутом загрузки и атрибутом href, который указывает на объект blob, содержащий записанный поток, закодированный с использованием данного кодека ( поддерживается только современными браузерами), затем программно генерировать событие клика по ссылке. Это заставит браузер загрузить файл типа video/webm на жесткий диск.

1.	function download() {
2.	    var blob = new Blob(recordedChunks, {
3.	        type: 'video/webm'
4.	    });
5.	    var url = URL.createObjectURL(blob);
6.	    var a = document.createElement('a');
7.	    document.body.appendChild(a);
8.	    a.style = 'display: none';
9.	    a.href = url;
10.	    a.download = 'test.webm';
11.	    a.click();
12.	    window.URL.revokeObjectURL(url);
13.	}

Вебкамера со смешными эффектами

Посмотрите приложение (кликните по картинке), сделанное с использованием всех описанных возможностей API getUserMedia для работы с веб-камерой с применением разных фильтров и возможностью сохранения фото.

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 1745

Популярные записи