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

WebRTC – это API, предоставляемое браузером и позволяющее организовать P2P соединение и передачу данных напрямую между браузерами. В Интернете довольно много руководств по написанию собственного видео-чата при помощи WebRTC. Например, вот статья на Хабре. Однако, все они ограничиваются соединением двух клиентов. В этой статье я постараюсь рассказать о том, как при помощи WebRTC организовать подключение и обмен сообщениями между тремя и более пользователями.

Интерфейс RTCPeerConnection представляет собой peer-to-peer подключение между двумя браузерами. Чтобы соединить трех и более пользователей, нам придется организовать mesh-сеть (сеть, в которой каждый узел подключен ко всем остальным узлам).
Будем использовать следующую схему:

Как известно, хоть WebRTC и предоставляет возможность P2P соединения между браузерами, для его работы всё равно требуется дополнительный транспорт для обмена сервисными сообщениями. В этом примере в качестве такого транспорта выступает WebSocket сервер, написанный на Node.JS с использованием socket.io:

Var socket_io = require("socket.io"); module.exports = function (server) { var users = {}; var io = socket_io(server); io.on("connection", function(socket) { // Желание нового пользователя присоединиться к комнате socket.on("room", function(message) { var json = JSON.parse(message); // Добавляем сокет в список пользователей users = socket; if (socket.room !== undefined) { // Если сокет уже находится в какой-то комнате, выходим из нее socket.leave(socket.room); } // Входим в запрошенную комнату socket.room = json.room; socket.join(socket.room); socket.user_id = json.id; // Отправялем остальным клиентам в этой комнате сообщение о присоединении нового участника socket.broadcast.to(socket.room).emit("new", json.id); }); // Сообщение, связанное с WebRTC (SDP offer, SDP answer или ICE candidate) socket.on("webrtc", function(message) { var json = JSON.parse(message); if (json.to !== undefined && users !== undefined) { // Если в сообщении указан получатель и этот получатель известен серверу, отправляем сообщение только ему... users.emit("webrtc", message); } else { // ...иначе считаем сообщение широковещательным socket.broadcast.to(socket.room).emit("webrtc", message); } }); // Кто-то отсоединился socket.on("disconnect", function() { // При отсоединении клиента, оповещаем об этом остальных socket.broadcast.to(socket.room).emit("leave", socket.user_id); delete users; }); }); };

Исходный код самой страницы довольно простой. Я сознательно не стал уделять внимание верстке и прочим красивостям, так как это статья не об этом. Если кому-то захочется, сделать ее красивой, особого труда не составит.

WebRTC Chat Demo Connected to 0 peers
Send

Нам по прежнему приходится использовать браузерные префиксы для обращения к интерфейсам WebRTC.

Var PeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection; var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription; var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;

Тут нам понадобится функция, для генерации уникального идентификатора комнаты и пользователя. Будем использовать для этих целей UUID.

Function uuid () { var s4 = function() { return Math.floor(Math.random() * 0x10000).toString(16); }; return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4(); }

Теперь попробуем вытащить идентификатор комнаты из адреса. Если такового не задано, сгенерируем новый. Выведем на страницу ссылку на текущую комнату, и, за одно, сгенерируем идентификатор текущего пользователя.

Var ROOM = location.hash.substr(1); if (!ROOM) { ROOM = uuid(); } room_link.innerHTML = "Link to the room"; var ME = uuid();

Сразу при открытии страницы подключимся к нашему signalling server"у, отправим запрос на вход в комнату и укажем обработчики сообщений.

// Указываем, что при закрытии сообщения нужно отправить серверу оповещение об этом var socket = io.connect("", {"sync disconnect on unload": true}); socket.on("webrtc", socketReceived); socket.on("new", socketNewPeer); // Сразу отправляем запрос на вход в комнату socket.emit("room", JSON.stringify({id: ME, room: ROOM})); // Вспомогательная функция для отправки адресных сообщений, связанных с WebRTC function sendViaSocket(type, message, to) { socket.emit("webrtc", JSON.stringify({id: ME, to: to, type: type, data: message})); }

Большинство провайдеров предоставляем подключение к Интернету через NAT. Из-за этого прямое подключение становится не таким уж тривиальным делом. При создании соединения нам нужно указать список STUN и TURN серверов, которые браузер будет пытаться использовать для обхода NAT. Так же укажем пару дополнительных опций для подключения.

Var server = { iceServers: [ {url: "stun:23.21.150.121"}, {url: "stun:stun.l.google.com:19302"}, {url: "turn:numb.viagenie.ca", credential: "your password goes here", username: "[email protected]"} ] }; var options = { optional: [ {DtlsSrtpKeyAgreement: true}, // требуется для соединения между Chrome и Firefox {RtpDataChannels: true} // требуется в Firefox для использования DataChannels API ] }

Когда в комнату добавляется новый пир, сервер отправляет нам сообщение new . Согласно обработчикам сообщений, указанным выше, вызовется функция socketNewPeer .

Var peers = {}; function socketNewPeer(data) { peers = { candidateCache: }; // Создаем новое подключение var pc = new PeerConnection(server, options); // Инициализирууем его initConnection(pc, data, "offer"); // Сохраняем пира в списке пиров peers.connection = pc; // Создаем DataChannel по которому и будет происходить обмен сообщениями var channel = pc.createDataChannel("mychannel", {}); channel.owner = data; peers.channel = channel; // Устанавливаем обработчики событий канала bindEvents(channel); // Создаем SDP offer pc.createOffer(function(offer) { pc.setLocalDescription(offer); }); } function initConnection(pc, id, sdpType) { pc.onicecandidate = function (event) { if (event.candidate) { // При обнаружении нового ICE кандидата добавляем его в список для дальнейшей отправки peers.candidateCache.push(event.candidate); } else { // Когда обнаружение кандидатов завершено, обработчик будет вызван еще раз, но без кандидата // В этом случае мы отправялем пиру сначала SDP offer или SDP answer (в зависимости от параметра функции)... sendViaSocket(sdpType, pc.localDescription, id); // ...а затем все найденные ранее ICE кандидаты for (var i = 0; i < peers.candidateCache.length; i++) { sendViaSocket("candidate", peers.candidateCache[i], id); } } } pc.oniceconnectionstatechange = function (event) { if (pc.iceConnectionState == "disconnected") { connection_num.innerText = parseInt(connection_num.innerText) - 1; delete peers; } } } function bindEvents (channel) { channel.onopen = function () { connection_num.innerText = parseInt(connection_num.innerText) + 1; }; channel.onmessage = function (e) { chatlog.innerHTML += "Peer says: " + e.data + ""; }; }

При получении одного из этих сообщений вызываем обработчик соответствующего сообщения.

Function socketReceived(data) { var json = JSON.parse(data); switch (json.type) { case "candidate": remoteCandidateReceived(json.id, json.data); break; case "offer": remoteOfferReceived(json.id, json.data); break; case "answer": remoteAnswerReceived(json.id, json.data); break; } }

При нажатии на кнопку Send вызывается функция sendMessage . Всё, что она делает, это проходится по списку пиров, и пытается отправить всем указанное сообщение.

WebRTC (Web Real-Time Communications) - это технология, которая позволяет Web-приложениям и сайтам захватывать и выборочно передавать аудио и/или видео медиа-потоки, а также обмениваться произвольными данными между браузерами, без обязательного использования посредников. Набор стандартов, которые включает в себя технология WebRTC, позволяет обмениваться данными и проводить пиринговые телеконференции, без необходимости пользователю устанавливать плагины или любое другое стороннее программное обеспечение.

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

Поскольку, реализация WebRTC находиться в процессе становления и каждый браузер имеет и WebRTC функций, настоятельно рекомендуем использовать полифил-библиотеку Adapter.js , от Google, до начала работы над вашим кодом.

Adapter.js использует клинья и полифилы для гладкой стыковки различий в реализациях WebRTC среди контекстов, его поддерживающих. Adapter.js также обрабатывает префиксы производителей, и иные различия именования свойств, облегчая процесс разработки на WebRTC, с наиболее совместимым результатом. Библиотека так же доступна как NPM пакет .

Для дальнейшего изучения библиотеки Adapter.js, смотрим .

WebRTC является многоцелевым и вместе с , предоставляют мощные мультимедийные возможности для Web, включая поддержку аудио и видео конференций, обмен файлами, захват экрана, управление идентификацией и взаимодействие с устаревшими телефонными системами, включая поддержку передачи сигналов тонового набора DTMF . Соединения между узлами могут создаваться без использования специальных драйверов или плагинов, и часто без промежуточных сервисов.

Соединение между двумя узлами представлено как объект интерфейса RTCPeerConnection . Как только соединение установлено и открыто, используя объект RTCPeerConnection , медиапотоки ( MediaStream s) и/или каналы данных ( RTCDataChannel s) могут быть добавлены в соединение.

Медиа потоки могут состоять из любого количества треков (дорожек) медиаинформации. Эти треки, представлены объектами интерфейса MediaStreamTrack , и могут содержать один или несколько типов медиаданных, включая аудио, видео, текст (такие как субтитры или название глав). Большинство потоков состоят, как минимум, только из одного аудио трека (одной аудио дорожки), или видео дорожки, и могут быть отправлены и получены, как потоки (медиаданные в настоящим времени) или сохранены в файл.

Так же, можно использовать соединение между двумя узлами для обмена произвольными данными, используя объект интерфейса RTCDataChannel , что может быть использовано для передачи служебной информации, биржевых данных, пакетов игровых статусов, передача файлов или закрытых каналов передачи данных.

more details and links to relevant guides and tutorials needed

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

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

Цель этой статьи - на демонстрационном образце пирингового видеочата (p2p видеочата) ознакомиться с его структурой и принципом работы. Для этой цели воспользуемся многопользовательским демонстрационным образцом пирингового видеочата webrtc.io-demo. Его можно скачать по ссылке: https://github.com/webRTC/webrtc.io-demo/tree/master/site .

Необходимо отметить, что GitHub - это сайт или веб-сервис для совместной разработки Web-проектов. На нем разработчики могут размещать коды своих разработок, обсуждать их и общаться друг с другом. Кроме того, некоторые крупные IT-компании размещают свои официальные репозитории на этом сайте. Сервис является бесплатным для проектов с открытым исходным кодом. GitHub - это хранилище библиотек открытого, свободного исходного кода.

Итак, скачанный с GitHub демонстрационный образец пирингового видеочата, разместим на диске C персонального компьютера в созданной директории для нашего приложения "webrtc_demo".

Рис. 1

Как следует из структуры (рис.1) пиринговый видеочат состоит из клиентского script.js и серверного server.js скриптов, реализованных на языке программирования JavaScript. Скрипт (библиотека) webrtc.io.js (CLIENT) - обеспечивает организацию коммуникаций в реальном времени между браузерами по одноранговой схеме: "клиент-клиент", а webrtc.io.js (CLIENT) и webrtc.io.js (SERVER), используя протокол WebSocket, обеспечивают дуплексную связь между браузером и веб-сервером по архитектуре "клиент-сервер".

Скрипт webrtc.io.js (SERVER) входит в библиотеку webrtc.io и находится в директории node_modules\webrtc.io\lib. Интерфейс видеочата index.html реализован на HTML5 и CSS3. Содержимое файлов приложения webrtc_demo можно посмотреть одним из html-редакторов, например "Notepad++".

Принцип работы видеочата будем проверять в файловой системе ПК. Для запуска сервера (server.js) на ПК необходимо установить среду выполнения node.js. Node.js позволяет запускать JavaScript-код вне браузера. Скачать node.js можно по ссылке: http://nodejs.org/ (версия v0.10.13 на 15.07.13). На главной страничке сайта node.org щелкаем на кнопке download и переходим на http://nodejs.org/download/. Для пользователей windows сначала скачиваем win.installer (.msi), затем запускаем win.installer (.msi) на ПК, и устанавливаем nodejs и "npm package manager" в директорию Program Files.

Рис. 2

Таким образом, node.js состоит из среды разработки и выполнения JavaScript кода, а также из набора внутренних модулей, которые можно установить с помощью менеджера или диспетчера пакетов npm.

Для установки модулей необходимо в командной строке из директории приложения (например, "webrtc_demo") выполнить команду: npm install имя_модуля . В процессе установки модулей npm-менеджер создает папку node_modules в директории, из которой была выполнена установка. В процессе работы nodejs автоматически подключает модули из директории node_modules.

Итак, после установки node.js, открываем командную строку и обновим модуль express в папке node_modules директории webrtc_demo с помощью менеджера пакетов npm:

C:\webrtc_demo>npm install express

Модуль express - это веб-фреймворк для node.js или веб-платформа для разработки приложений. Чтобы иметь глобальный доступ к express, можно установить его таким образом: npm install -g express .

Затем обновим модуль webrtc.io:

C:\webrtc_demo>npm install webrtc.io

Затем в командной строке запускаем сервер: server.js:

C:\webrtc_demo>node server.js

Рис. 3

Все, сервер работает успешно (рисунок 3). Теперь с помощью веб-браузера можно обратиться к серверу по ip-адресу и загрузить веб-страницу index.html, с которой веб-браузер будет извлекать код клиентского скрипта - script.js и код скрипта webrtc.io.js, и выполнять их. Для работы пирингового видеочата (для установки соединения между двумя браузерами) необходимо с двух браузеров, поддерживающих webrtc, обратиться по ip-адресу к сигнальному серверу, работающему на node.js.

В результате откроется интерфейс клиентской части коммуникационного приложения (видеочата) с запросом на разрешение доступа к камере и микрофону (рис. 4).

Рис. 4

После щелчка на кнопке "Разрешить" подключаются камера и микрофон для мультимедийное общения. Кроме того, через интерфейс видеочата можно общаться текстовыми данными (рис. 5).

Рис. 5

Необходимо отметить, что . Сервер является сигнальным, и в основном предназначен для установки соединения между браузерами пользователей. Для работы серверного скрипта server.js, обеспечивающего WebRTC-сигнализацию, используется Node.js.

WebRTC (сокращенно от Web real-time communications) – это технология, которая позволяет передавать аудио и видео потоковые данные между браузерами и мобильными приложениями.

Разработка этой технологии составляет конкуренцию Skype. WebRTC можно использовать для организации видеоконференций напрямую в браузере. Проект имеет открытый исходный код и активно продвигается компанией Google и в частности командой разработки браузера Google Chrome.

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

Технология WebRTC поддерживается всеми популярными браузерами Mozilla Firefox, Opera, Google Chrome (и всеми браузерами на базе Google Chrome), а также мобильными приложениями на базе Android и iOS.

Опасность технологии WebRTC заключается в определении вашего реального IP адреса. Так как подключение идет напрямую с другим пользователем, браузером, веб-сайтом или мобильным приложением, то настройки сети игнорируются. Для создания аудио и видеосвязи браузеры должны обменяться внешними и локальными IP адресами.

Анонимный VPN сервис решает данную проблему и скрывает реальный IP адрес. Максимум, что может быть обнаружено – это локальный IP адрес, присвоенный пользователю VPN сетью. Это не опасно, так как такие же локальные IP адреса будут показываться, если вы используете роутер для раздачи Интернета.

Если вы используете прокси, тогда WebRTC сможет определить ваш реальный IP адрес за прокси или IP адрес VPN сервера, если вы используете цепочку VPN + прокси.

WebRTC также определяет ваш реальный IP адрес при использовании сети Tor .

Самое лучшее решение – отключить технологию WebRTC, если вы этим не пользуетесь.

Быстрая навигация по этой странице.

Браузер Mozilla Firefox - это единственный браузер, позволяющий отключить технологию WebRTC без установки дополнительных плагинов.

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

Чтобы отключить технологию WebRTC в Mozilla Firefox необходимо в адресной строке браузера ввести следующий текст и нажать кнопку Enter.

About:config

Нажмите, кнопку Я принимаю на себя риск.

Выполните следующее:

После этих действий WebRTC будет отключен.

Если вы пользуетесь технологией WebRTC, то отключение и включение через настройки будет занимать много времени. Установите плагин, который поможет включать и выключать WebRTC в 1 клик мышки.

Откройте Дополнения.

Выберите:

Для отключения WebRTC в браузере Opera перейдите в галерею Расширений.

Выполните следующие действия:

Нажмите Добавить в Opera.

Активируйте плагин. Иконка плагина должна стать синего цвета для блокировки WebRTC.

Для отключения WebRTC в браузере Google Chrome перейдите в раздел Расширения.

Пролистайте страницу вниз и нажмите Еще расширения.

Выполните следующие действия:

Активируйте плагин. Иконка плагина должна стать синего цвета для блокировки WebRTC.

Для отключения WebRTC в Яндекс Браузере перейдите в раздел Дополнения.

Пролистайте страницу вниз и нажмите Каталог расширений для Яндекс Браузера.

Выполните действия:

Нажмите Добавить в Яндекс Браузер.

Нажмите Установить расширение.

Активируйте плагин. Иконка плагина должна стать синего цвета для блокировки WebRTC.

Браузер SRWare Iron сделан на базе Google Chrome.

Установите плагин WebRTC Control по инструкции для .

Привет друзья, как вы уже знаете, мы сообщаем вам регулярно новые технологии, сегодня я представлю WebRTC, технология, разработанная компанией Google, которая позволяет пользователям говорить непосредственно в браузере видео и аудио, не требуя, что использование plugin- Веб-сайты или приложения. Видео и аудио прямое соединение между пользователями осуществляется непосредственно в браузере.
Технология WebRTC поддерживается в Mozilla Firefox браузеров Google Chrome и на любой операционной системе, скоро присоединится и Opera.
Что такое WebRTC и что?
WebRTC короток для Web Real Time Comunication, эта технология позволяет открывать аудио и видео чатов непосредственно в браузере без необходимости других плагинов, приложений или услуг в Интернете для этого. Подключение осуществляется непосредственно из браузера в браузере.
Если известные услуги (Skype, Yahoo Messenger, Apple FaceTime, Google Hago и т.д.) требуют сервер, который соединяет пользователей, чтобы инициировать и управлять трафиком. Используя эти услуги нам нужно зарегистрироваться и установил список клиентов и контактов.
С WebRTC нам не нужны серверы, приложения или серверы, которые подключаются к заступиться.
WebRTC преимущества:
1. Нет больше приложений, потребляющее использование ресурсов и аккумулятора.
2. В чатах более частные (относительно).
3. Как связаться можно сделать на местном уровне, а не Flos США серверы для локальных соединений.
4. Простота, удобство использования.
5. Возможность дальнейшего развития, и в других направлениях.
6. Связь стабильна и не зависит от внешних соединений, которые иногда крайне нестабильным.
В учебнике я использовал демо, что люди в Google разработали, это демо довольно просто, более расширенные возможности и более быстрые соединения могут использовать один из приложений, которые поддерживают WebRTC, они проще в использовании. Скоро мы будем делать учебник и о приложениях WebRTC.
Как использовать WebRTC демо?
Очень просто нажмите на ссылку ниже, он автоматически генерирует чат. связать эту комнату, вы должны отправить друг / подруга, которую вы хотите, чтобы войти в контакт.
Друг / подруга и ваш, но вы должны использовать только самые последние версии Mozilla Firefox или Google Chrome.

Demo WebRTC (Вводный чат аудио - видео)

Внимание:
Демо не очень стабильна, производится только для демонстрации. Он может быть использован в течение ограниченного периода времени, в течение которого небольшие ошибки могут возникнуть соединение.
Если у вас есть проблемы с подключением, попробуйте создать другой чат.