WebRTC позволяет реализовать real-time аудио/видео связь через браузер (firefox и chrome).
В этом топике я расскажу как реализовать простейшее WebRTC приложение.
1. getUserMedia — получение доступа к медиа устройствам (микрофон/вебкамера)
Ничего сложного, с помощью 10 строк javascript-кода вы сможете увидеть и услышать себя в браузере(демо).
Cоздайте index.html:
<video autoplay></video>
<script>
navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
navigator.getUserMedia({ audio: true, video: true }, gotStream, streamError);
function gotStream(stream) {
document.querySelector('video').src = URL.createObjectURL(stream);
}
function streamError(error) {
console.log(error);
}
</script>
К элементу video вы можете применить css3-фильтры.
Огорчает здесь то, что на данном этапе развития WebRTC я не могу сказать браузеру «этому сайту я доверяю, всегда давай ему доступ к моей камере и микрофону» и нужно нажимать Allow после каждого открытия/обновления страницы.
Ну и не лишним будет напомнить, что если вы дали доступ к камере в одном браузере, другой при попытке получить доступ получит PERMISSION_DENIED.
2. Signaling server (сигнальный сервер)
Здесь я нарушаю последовательность большинства «webrtc getting started» инструкций потому как они вторым шагом демонструруют возможности webRTC на одном клиенте, что лично мне только добавило путаницы в объяснение.
Сигнальный сервер — это кооринирующий центр WebRTC, который обеспечивает коммуникацию между клиентами, инициализацию и закрытие соединения, отчеты об ошибках.
Сигнальный сервер в нашем случае это Node.js + socket.io + node-static, он будет слушать порт 1234.
Плюс ко всему node-static может отдать index.html, что сделает наше приложение максимально простым.
В папке приложения установим необходимое:
npm install socket.io
npm install node-static
Read more: Habrahabr.ru
QR: 