Заря WebRTC

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

Google потратил около 200 миллионов долларов на разработку технологии с открытым исходным кодом для сообщества разработчиков. WebRTC использует несколько кодеков для видео и аудио, предоставляя любому возможность создавать коммуникационные приложения следующего поколения без необходимости платить за лицензирование или роялти.

Каковы Возможности?

Мы только начали царапать поверхность того, как WebRTC изменит индустрию связи. Мы видим все типы приложений, создаваемых с помощью WebRTC. Один из самых знаковых примеров — кнопка Mayday от Amazon . Это показывает истинную силу того, как WebRTC используется компаниями, большими и малыми.

WebRTC дает вам много возможностей для улучшения ваших приложений, таких как:

• Видеосвязь: создание безопасных потоков аудио и видео высокой четкости между браузерами
• Общий доступ к файлам и обмен сообщениями: Безопасное подключение и обмен данными между браузерами без необходимости загружать файлы в облако или на сетевой сервер. Данные передаются напрямую между подключенными узлами
• С телефона на браузер: WebRTC позволяет устанавливать соединения между коммутируемой телефонной сетью общего пользования (PSTN) и браузерами. Вы можете совершать и принимать звонки из одного места с использованием новых API-интерфейсов в HTML5, SIP-шлюза и WebRTC.
• С мобильного на мобильный: WebRTC не только для Интернета, есть собственные библиотеки для iOS и Android, которые используют возможности WebRTC
• Машина-машина: WebRTC является встраиваемым для систем, которым необходимо связывать машину с машиной, например, с Интернетом вещей. Google Chromecast — прекрасный пример использования WebRTC вне обычного варианта использования.

Понимание API WebRTC

WebRTC использует три API-интерфейса JavaScript, встроенные непосредственно в веб-браузеры, для которых не требуется плагин для клиента или браузера, чтобы напрямую взаимодействовать с другим браузером с поддержкой WebRTC. Эти API:

• MediaStream (он же getUserMedia) позволяет получить доступ к камере, микрофону или экрану устройства, используемого пользователем. В качестве дополнительного уровня безопасности пользователь получит доступ до того, как вам будет разрешено передавать его мультимедиа. Если пользователь подключается через безопасное соединение (HTTPS), ему нужно будет предоставить доступ только один раз для приложения, но если вы подключаетесь из незащищенного соединения (HTTP), пользователю будет предлагаться каждый раз, когда приложению требуется доступ.
• RTCPeerConnection (он же PeerConnection) позволяет двум пользователям общаться напрямую, равноправно. Он кодирует и декодирует медиафайлы, отправленные на локальный компьютер и с него на удаленный узел, получающий ваши медиа.
• RTCDataChannel (он же DataChannel) представляет собой двунаправленный канал данных между двумя узлами. Он поддерживает верхнюю часть RTCPeerConnection, позволяя вам безопасно передавать данные непосредственно между двумя подключенными узлами.

Начало работы с WebRTC

Мы начнем с простого приложения для фотостудии, которое позволит вам делать снимки с помощью веб-камеры и применять некоторые CSS-фильтры к захваченному изображению. Он научит вас основам работы с WebRTC с помощью MediaStream API. Это измененная версия примера приложения, созданного командой Google.

HTML

В приведенном ниже HTML-коде вы увидите основы, необходимые для создания вашего первого веб-приложения WebRTC. WebRTC использует HTML5-элемент `video` для визуализации локальных и удаленных видеопотоков. Кроме того, мы собираемся использовать элемент `canvas`, чтобы сделать снимок нашего локального видеопотока и применить фильтр:

<div class="m-content"> <h1>getUserMedia + CSS filters demo</h1> <div class="photo-booth"> <!-- local video stream will be rendered to the video tag --> <video autoplay></video> <!-- a copy of the stream will be made and css filters applied --> <canvas></canvas> </div> <div class="buttons"> <!-- call getUserMedia() to access webcam and give permission --> <button id="start">Access Webcam</button> <!-- take a snapshot from your webcam and render it to the canvas tag --> <button id="snapshot">Take a Snapshot</button> <!-- sort through the available css filters --> <button id="filter">Change Filter</button> </div> </div> 

JavaScript

Метод navigator.getUserMedia() — это метод, предоставляемый API getUserMedia, который позволяет вам получать поток от ваших пользователей. На момент написания этой статьи необходимо было определить префиксы разных поставщиков, чтобы это приложение работало во всех браузерах, совместимых с WebRTC: Chrome, Firefox, Opera. Мы можем достичь этой цели с помощью следующего кода:

 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; 

Нам нужно определить ограничения, которые мы запрашиваем, с navigator.getUserMedia() который будет определять тип медиа, который мы запрашиваем. В этом примере мы запрашиваем доступ к веб-камере пользователя только путем установки video: true .

 var constraints = { audio: false, video: true }; 

Ниже мы определяем и храним элементы HTML для демонстрационного приложения в переменных.

 var start = document.querySelector('#start'); var snapshot = document.querySelector('#snapshot'); var filter = document.querySelector('#filter'); var video = document.querySelector('video'); var canvas = document.querySelector('canvas'); 

Далее нам нужно создать массив для фильтров, которые мы применим к снимку. Мы определим фильтры в нашем CSS-коде, описанном в следующем разделе, используя те же имена:

 var filters = ['blur', 'brightness', 'contrast', 'grayscale', 'hue', 'invert', 'saturate', 'sepia']; 

Время для настоящего веселья! Мы добавляем событие click к нашей кнопке start, чтобы инициализировать navigator.getUserMedia(constraints, success, error); чтобы получить доступ к нашей веб-камере. Разрешение должно быть предоставлено для доступа к нашей веб-камере. Каждый поставщик браузеров по-разному отображает запрос на предоставление доступа к веб-камере и микрофону пользователя.

 start.addEventListener('click', function() { navigator.getUserMedia(constraints, success, error); }); 

После успешного предоставления разрешения на доступ к веб-камере пользователя мы передаем объект потока в качестве источника video тега HTML5.

 function success(stream) { /* hide the start button*/ start.style.display = 'none'; /* show the snapshot button*/ snapshot.style.display = 'block'; /* show the filter button*/ filter.style.display = 'block'; if(window.URL) { video.src = window.URL.createObjectURL(stream); } else { video.src = stream; } } 

Если при доступе к веб-камере пользователя произойдет ошибка или будет отказано в разрешении, вы получите сообщение об ошибке, которое будет выведено на консоль.

 function error(e) { console.log('navigator.getUserMedia error: ', e); } 

 filter.addEventListener('click', function() { var index = (filters.indexOf(canvas.className) + 1) % filters.length; video.className = filters[index]; canvas.className = filters[index]; }); 

 snapshot.addEventListener('click', function() { canvas.width = 360; canvas.height = 270; canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); }); 

 body { font-family: 'Open Sans', sans-serif; background-color: #e4e4e4; } h1 { width: 780px; margin-left: 20px; float: left; } .m-content { width: 800px; height: 310px; margin: auto; } .photo-booth { width: 800px; height: 310px; float: left; } 

 video { width: 360px; height: 270px; float: left; margin: 20px; background-color: #333; } canvas { width: 360px; height: 270px; float: left; margin: 20px; background-color: #777; } 

 .buttons { margin-left: 20px; float: left; } button { background-color: #d84a38; border: none; border-radius: 2px; color: white; font-family: 'Open Sans', sans-serif; font-size: 0.8em; margin: 0 0 1em 0; padding: 0.5em 0.7em 0.6em 0.7em; } button:active { background-color: #cf402f; } button:hover { background-color: #cf402f; cursor: pointer; } #filter, #snapshot { display: none; margin-right: 20px; float: left; } 

 .blur { filter: blur(2px); -webkit-filter: blur(2px); } .grayscale { filter: grayscale(1); -webkit-filter: grayscale(1); } .sepia { filter: sepia(1); -webkit-filter: sepia(1); } .brightness { filter: brightness(2.2); -webkit-filter: brightness(2.2); } .contrast { filter: contrast(3); -webkit-filter: contrast(3); } .hue { filter: hue-rotate(120deg); -webkit-filter: hue-rotate(120deg); } .invert { filter: invert(1); -webkit-filter: invert(1); } .saturate { filter: staurate(5); -webkit-filter: staurate(5); }