Объединившись разработчики Google и Mozila в разработки спецификаций WebRTC достигли такого уровня совместимости, что теперь, Вы можете напрямую установить голосовой и видео звонок с помощью RTCPeerConnection.
Для установления видеозвонка, Вам больше не нужны дополнительные программы, на подобие Skype и других…
В данной технологии, для обменом изображением и звуком, разработчики использовали кодеки Opus и VP8, шифрование осуществляется при помощи — DTLS-SRTP, для пробивания фаерволов — ICE.
Это все интересно, но как нам установить видеозвонок между браузерами?
Все достаточно просто, разработчики позаботились и об этом. Для установки звонка, Вам нужно:
- Скачать браузеры Chrome 25 Beta и Firefox Nightly for Desktop.
- В Firefox, сделать небольшую настройку — в адресной строке пишем «about:config». Нажимаем на кнопку, ну конечно если Вы этого действительно хотите — я все сломаю… нечего не будет работать I’ll be careful, I promise! (Я аккуратно, я обещаю!) и да не забывайте этого 😉
- Дальше устанавливаем значение true, для записи media.peerconnection.enabled, для этого — находим её в поиске и нажимаем два разу на значение false, так мы изменим его на true.
- Для установки видеосвязи, нужно перейти на специально созданный разработчиками демо-сайт: apprtc.appspot.com.
- Подтвердить запрос о использовании вашей веб-камеры и микрофона.
Примечание: на обеих компьютерах должны быть подключенными — веб-камера и микрофон.
- И последнее, что нужно сделать — поделиться одному из вас ссылкой на страницу, для установки связи, внизу демо-сайта.
Поздравляю Вас с первым видеозвонком между браузерами…)
>Сайт разработчиков, с открытым API<
Запись на форуме: «Привет, Chrome! Тебе звонит Firefox»
Скоро и браузер Opera присоединится к такому видеочату. Компания Microsoft отказалась от участия и таком мероприятии и начала делать свою «более открытую» WebRTC не привязываясь к кодекам Opus и VP8, компания дальше разрабатываэт HTML5-версию Skype.
Код для реализации подобия демо-сайта, на вашем…
function initiateCall(user) { document.getElementById("main").style.display = "none"; document.getElementById("call").style.display = "block"; // Here's where you ask user permission to access the camera and microphone streams navigator.mozGetUserMedia({video:true, audio:true}, function(stream) { document.getElementById("localvideo").mozSrcObject = stream; document.getElementById("localvideo").play(); document.getElementById("localvideo").muted = true; // Here's where you set up a Firefox PeerConnection var pc = new mozRTCPeerConnection(); pc.addStream(stream); pc.onaddstream = function(obj) { log("Got onaddstream of type " + obj.type); document.getElementById("remotevideo").mozSrcObject = obj.stream; document.getElementById("remotevideo").play(); document.getElementById("dialing").style.display = "none"; document.getElementById("hangup").style.display = "block"; }; pc.createOffer(function(offer) { log("Created offer" + JSON.stringify(offer)); pc.setLocalDescription(offer, function() { // Send offer to remote end. log("setLocalDescription, sending to remote"); peerc = pc; jQuery.post( "offer", { to: user, from: document.getElementById("user").innerHTML, offer: JSON.stringify(offer) }, function() { console.log("Offer sent!"); } ).error(error); }, error); }, error); }, error); } function acceptCall(offer) { log("Incoming call with offer " + offer); document.getElementById("main").style.display = "none"; document.getElementById("call").style.display = "block"; // Here's where you ask user permission to access the camera and microphone streams navigator.mozGetUserMedia({video:true, audio:true}, function(stream) { document.getElementById("localvideo").mozSrcObject = stream; document.getElementById("localvideo").play(); document.getElementById("localvideo").muted = true; // Here's where you set up a Firefox PeerConnection var pc = new mozRTCPeerConnection(); pc.addStream(stream); pc.onaddstream = function(obj) { document.getElementById("remotevideo").mozSrcObject = obj.stream; document.getElementById("remotevideo").play(); document.getElementById("dialing").style.display = "none"; document.getElementById("hangup").style.display = "block"; }; pc.setRemoteDescription(JSON.parse(offer.offer), function() { log("setRemoteDescription, creating answer"); pc.createAnswer(function(answer) { pc.setLocalDescription(answer, function() { // Send answer to remote end. log("created Answer and setLocalDescription " + JSON.stringify(answer)); peerc = pc; jQuery.post( "answer", { to: offer.from, from: offer.to, answer: JSON.stringify(answer) }, function() { console.log("Answer sent!"); } ).error(error); }, error); }, error); }, error); }, error); } function endCall() { log("Ending call"); document.getElementById("call").style.display = "none"; document.getElementById("main").style.display = "block"; document.getElementById("localvideo").mozSrcObject.stop(); document.getElementById("localvideo").mozSrcObject = null; document.getElementById("remotevideo").mozSrcObject = null; peerc.close(); peerc = null; } |
Надеюсь данный материал был полезным…)
А для тех, кто не хочет создавать велосипед для видео звонков — https://videolink2.me
Пользуюсь уже больше года. Очень довольна!