Видеозвонок между браузерами

OVPC > Новости > Видеозвонок между браузерами

Видеозвонок между браузерами

13 февраля, 2013

Объединившись разработчики 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;
}

Надеюсь данный материал был полезным…)

1 комментарий к записи “Видеозвонок между браузерами”

Lina:

06.03.2014 в 13:47

А для тех, кто не хочет создавать велосипед для видео звонков — https://videolink2.me
Пользуюсь уже больше года. Очень довольна!

Ответить

Видеозвонок между браузерами

1 комментарий к записи “Видеозвонок между браузерами”

Оставить комментарий

Свежие записи

Рубрики