WebRTC'yi kullanmaya başlama

Sam Dutton

WebRTC, açık ve engelsiz bir web için verilen uzun savaşta yeni bir cephedir.

Brendan Eich, JavaScript'in mucidi

Eklentiler olmadan anlık iletişim

Telefonunuzun, TV'nizin ve bilgisayarınızın ortak bir platformda iletişim kurabildiği bir dünya hayal edin. Web uygulamanıza görüntülü sohbet ve eşler arası veri paylaşımı eklemenin kolay olduğunu hayal edin. WebRTC'nin vizyonu budur.

Denemek ister misiniz? WebRTC; Google Chrome, Safari, Firefox ve Opera'da masaüstü ve mobil cihazlarda kullanılabilir. Başlamak için appr.tc adresindeki basit görüntülü sohbet uygulamasını kullanabilirsiniz:

  1. Tarayıcınızda appr.tc adresini açın.
  2. Bir sohbet odasına katılmak için Katıl'ı tıklayın ve uygulamanın web kameranızı kullanmasına izin verin.
  3. Sayfanın sonunda gösterilen URL'yi yeni bir sekmede veya tercihen farklı bir bilgisayarda açın.

Hızlı başlangıç

Bu makaleyi okumaya vaktiniz yok mu veya yalnızca kodu mu istiyorsunuz?

  • WebRTC'ye genel bakış için aşağıdaki Google I/O videosunu izleyin veya bu slaytlara göz atın:
  • getUserMedia API'sini kullanmadıysanız HTML5'te ses ve video yakalama ile simpl.info getUserMedia başlıklı makalelere göz atın.
  • RTCPeerConnection API hakkında bilgi edinmek için aşağıdaki örneğe ve 'simpl.info RTCPeerConnection' sayfasına bakın.
  • WebRTC'nin sinyalizasyon, güvenlik duvarı ve NAT geçişi için sunucuları nasıl kullandığını öğrenmek üzere appr.tc'deki kodu ve konsol günlüklerini inceleyin.
  • Beklemek istemiyor ve WebRTC'yi hemen denemek mi istiyorsunuz? WebRTC JavaScript API'lerini kullanan 20'den fazla demoyu deneyin.
  • Makineniz ve WebRTC ile ilgili sorun mu yaşıyorsunuz? WebRTC Sorun Giderici'yi ziyaret edin.

Alternatif olarak, basit bir sinyal sunucusu da dahil olmak üzere eksiksiz bir görüntülü sohbet uygulamasının nasıl oluşturulacağını adım adım açıklayan WebRTC codelab'e doğrudan geçebilirsiniz.

WebRTC'nin kısa tarihi

Web'in karşılaştığı son büyük zorluklardan biri, ses ve video aracılığıyla insan iletişimini sağlamaktır. Bu, kısaca RTC olarak bilinen gerçek zamanlı iletişimdir. RTC, bir web uygulamasında metin girişine metin girme kadar doğal olmalıdır. Bu özellik olmadan yenilik yapma ve kullanıcıların etkileşim kurabileceği yeni yollar geliştirme konusunda sınırlı kalırsınız.

Geçmişte RTC, kurumsal ve karmaşık bir yapıya sahipti. Bu nedenle, pahalı ses ve video teknolojilerinin lisanslanması veya şirket içinde geliştirilmesi gerekiyordu. RTC teknolojisini mevcut içerik, veri ve hizmetlerle entegre etmek, özellikle web'de zor ve zaman alıcı olmuştur.

Gmail'de görüntülü sohbet 2008'de popüler hale geldi. 2011'de ise Google, Gmail'de olduğu gibi Talk'u kullanan Hangouts'u tanıttı. Google, GIPS'i satın aldı. GIPS, RTC için gerekli birçok bileşeni (ör. codec'ler ve yankı iptali teknikleri) geliştiren bir şirketti. Google, GIPS tarafından geliştirilen teknolojileri açık kaynaklı hale getirdi ve sektörde fikir birliği sağlanması için Internet Engineering Task Force (IETF) ve World Wide Web Consortium (W3C) bünyesindeki ilgili standart kuruluşlarıyla birlikte çalıştı. Ericsson, Mayıs 2011'de WebRTC'nin ilk uygulamasını oluşturdu.

WebRTC, gerçek zamanlı, eklenti gerektirmeyen video, ses ve veri iletişimi için açık standartlar uygular. Gerçek bir ihtiyaç vardı:

  • Birçok web hizmeti RTC kullanıyordu ancak indirme, yerel uygulama veya eklenti gerektiriyordu. Skype, Facebook ve Hangouts bu uygulamalara dahildir.
  • Eklentileri indirme, yükleme ve güncelleme işlemleri karmaşık, hataya açık ve can sıkıcıdır.
  • Eklentilerin dağıtılması, hata ayıklaması, sorun gidermesi, test edilmesi ve bakımı zordur. Ayrıca, karmaşık ve pahalı teknolojilerle lisanslama ve entegrasyon gerektirebilirler. Kullanıcıları eklenti yüklemeye ikna etmek genellikle zordur.

WebRTC projesinin temel ilkeleri, API'lerinin açık kaynaklı, ücretsiz, standartlaştırılmış, web tarayıcılarına yerleştirilmiş ve mevcut teknolojilerden daha verimli olmasıdır.

Şu anda neredeyiz?

WebRTC, Google Meet gibi çeşitli uygulamalarda kullanılır. WebRTC, WebKitGTK+ ve Qt yerel uygulamalarıyla da entegre edilmiştir.

WebRTC şu üç API'yi uygular: - MediaStream (getUserMedia olarak da bilinir) - RTCPeerConnection - RTCDataChannel

API'ler şu iki spesifikasyonda tanımlanır:

Üç API'nin tümü, mobil ve masaüstü cihazlarda Chrome, Safari, Firefox, Edge ve Opera tarafından desteklenir.

getUserMedia: Demolar ve kod için WebRTC örnekleri'ne bakın veya Chris Wilson'ın getUserMedia'yı web sesinde giriş olarak kullanan muhteşem örneklerini deneyin.

RTCPeerConnection: Basit bir demo ve tam işlevli bir görüntülü sohbet uygulaması için sırasıyla WebRTC örnekleri Eş bağlantısı ve appr.tc'ye bakın. Bu uygulama, tarayıcı farklılıklarını ve spesifikasyon değişikliklerini soyutlamak için WebRTC topluluğunun yardımıyla Google tarafından desteklenen bir JavaScript ara katmanı olan adapter.js'yi kullanır.

RTCDataChannel: Bu özelliği uygulamada görmek için WebRTC örnekleri bölümüne giderek veri kanalı demolarından birine göz atın.

WebRTC codelab'inde, video sohbeti ve dosya paylaşımı için basit bir uygulama oluşturmak üzere üç API'nin nasıl kullanılacağı gösterilmektedir.

İlk WebRTC'niz

WebRTC uygulamalarının yapması gereken birkaç şey vardır:

WebRTC, akış verilerini edinmek ve iletmek için aşağıdaki API'leri uygular:

  • MediaStream, kullanıcının kamerası ve mikrofonu gibi kaynaklardan gelen veri akışlarına erişir.
  • RTCPeerConnection, şifreleme ve bant genişliği yönetimi olanaklarıyla sesli veya görüntülü görüşme yapılmasını sağlar.
  • RTCDataChannel, genel verilerin eşler arası iletişimini sağlar.

(WebRTC'nin ağ ve sinyal yönleriyle ilgili ayrıntılı bir tartışma daha sonra yapılacaktır.)

MediaStream API (getUserMedia API olarak da bilinir)

MediaStream API'si, senkronize edilmiş medya akışlarını temsil eder. Örneğin, kamera ve mikrofon girişinden alınan bir akışta senkronize edilmiş video ve ses parçaları bulunur. (MediaStreamTrack öğesini, tamamen farklı bir şey olan <track> öğesiyle karıştırmayın.)

MediaStream API'yi anlamanın muhtemelen en kolay yolu, gerçek hayattaki kullanımına bakmaktır:

  1. Tarayıcınızda WebRTC örneklerigetUserMedia sayfasına gidin.
  2. Konsolu açın.
  3. Genel kapsamda olan stream değişkenini inceleyin.

Her MediaStream öğesinin bir girişi (getUserMedia() tarafından oluşturulan bir MediaStream olabilir) ve bir çıkışı (video öğesine veya RTCPeerConnection öğesine aktarılabilir) vardır.

getUserMedia() yöntemi, MediaStreamConstraints nesne parametresini alır ve MediaStream nesnesine çözümlenen bir Promise döndürür.

Her MediaStream öğesinde 'Xk7EuLhsuHKbnjLWkW4yYGNJJ8ONsgwHBvLQ' gibi bir label bulunur. getAudioTracks() ve getVideoTracks() yöntemleri tarafından MediaStreamTrack dizisi döndürülür.

getUserMedia örneğinde stream.getAudioTracks() boş bir dizi döndürür (çünkü ses yoktur) ve çalışan bir web kamerası bağlı olduğu varsayıldığında stream.getVideoTracks(), web kamerasından gelen akışı temsil eden tek bir MediaStreamTrack dizisi döndürür. Her MediaStreamTrack bir türe ('video' veya 'audio'), bir label'ye ('FaceTime HD Camera (Built-in)' gibi) sahiptir ve ses veya video kanallarından birini ya da daha fazlasını temsil eder. Bu durumda yalnızca bir video parçası vardır ve ses yoktur. Ancak ön kameradan, arka kameradan ve mikrofondan yayın alan bir sohbet uygulaması ile ekranını paylaşan bir uygulama gibi daha fazla parça içeren kullanım alanları kolayca hayal edilebilir.

srcObject özelliği ayarlanarak bir MediaStream, video öğesine eklenebilir. Bu işlem daha önce src özelliği URL.createObjectURL() ile oluşturulan bir nesne URL'sine ayarlanarak yapılıyordu ancak bu yöntem kullanımdan kaldırıldı.

getUserMedia, Web Audio API için giriş düğümü olarak da kullanılabilir:

// Cope with browser differences.
let audioContext;
if (typeof AudioContext === 'function') {
  audioContext = new AudioContext();
} else if (typeof webkitAudioContext === 'function') {
  audioContext = new webkitAudioContext(); // eslint-disable-line new-cap
} else {
  console.log('Sorry! Web Audio not supported.');
}

// Create a filter node.
var filterNode = audioContext.createBiquadFilter();
// See https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#BiquadFilterNode-section
filterNode.type = 'highpass';
// Cutoff frequency. For highpass, audio is attenuated below this frequency.
filterNode.frequency.value = 10000;

// Create a gain node to change audio volume.
var gainNode = audioContext.createGain();
// Default is 1 (no change). Less than 1 means audio is attenuated
// and vice versa.
gainNode.gain.value = 0.5;

navigator.mediaDevices.getUserMedia({audio: true}, (stream) => {
  // Create an AudioNode from the stream.
  const mediaStreamSource =
    audioContext.createMediaStreamSource(stream);
  mediaStreamSource.connect(filterNode);
  filterNode.connect(gainNode);
  // Connect the gain node to the destination. For example, play the sound.
  gainNode.connect(audioContext.destination);
});

Chromium tabanlı uygulama ve uzantılar da getUserMedia içerebilir. Manifeste audioCapture ve/veya videoCapture izinlerinin eklenmesi, iznin yalnızca yükleme sırasında bir kez istenmesini ve verilmesini sağlar. Bu işlemden sonra kullanıcıdan kamera veya mikrofon erişimi için izin istenmez.

getUserMedia() için izin yalnızca bir kez verilmelidir. İlk kez izin istediğinde tarayıcının bilgi çubuğunda İzin ver düğmesi gösterilir. getUserMedia() için HTTP erişimi, güçlü bir özellik olarak sınıflandırıldığı için 2015'in sonunda Chrome tarafından kullanımdan kaldırıldı.

Amaç, yalnızca kamera veya mikrofon için değil, tüm akış veri kaynakları için MediaStream özelliğini etkinleştirmektir. Bu sayede, depolanan verilerden veya sensörler ya da diğer girişler gibi rastgele veri kaynaklarından akış yapılabilir.

getUserMedia(), diğer JavaScript API'leri ve kitaplıklarıyla birlikte kullanıldığında gerçekten hayat bulur:

  • Webcam Toy, fotoğraflara tuhaf ve harika efektler eklemek için WebGL'yi kullanan bir fotoğraf kabini uygulamasıdır. Bu efektler, yerel olarak kaydedilebilir veya paylaşılabilir.
  • FaceKat, headtrackr.js ile oluşturulmuş bir yüz izleme oyunudur.
  • ASCII Camera, ASCII resimleri oluşturmak için Canvas API'yi kullanır.
idevelop.ro/ascii-camera tarafından oluşturulan ASCII resmi
gUM ASCII art!

Sınırlamalar

Kısıtlamalar, getUserMedia() için video çözünürlüğü değerlerini ayarlamak üzere kullanılabilir. Bu, en boy oranı, yüz modu (ön veya arka kamera), kare hızı, yükseklik ve genişlik gibi diğer kısıtlamaların ve applyConstraints() yönteminin desteklenmesini de sağlar.

Örnek için WebRTC örnekleri getUserMedia: çözünürlük seçme başlıklı makaleyi inceleyin.

İzin verilmeyen bir kısıtlama değeri ayarlamak, örneğin istenen çözünürlük kullanılamıyorsa DOMException veya OverconstrainedError hatası verir. Bu özelliği uygulamada görmek için WebRTC örnekleri getUserMedia: Çözünürlük seçme başlıklı makaleyi inceleyin.

Ekran ve sekme yakalama

Chrome uygulamaları, chrome.tabCapture ve chrome.desktopCapture API'leri aracılığıyla tek bir tarayıcı sekmesinin veya masaüstünün canlı videosunu paylaşmanıza da olanak tanır. (Demo ve daha fazla bilgi için WebRTC ile ekran paylaşımı başlıklı makaleyi inceleyin. Bu makale birkaç yıl önce yayınlanmış olsa da hâlâ ilgi çekici.)

Deneysel chromeMediaSource kısıtlamasını kullanarak Chrome'da ekran görüntüsünü MediaStream kaynağı olarak da kullanabilirsiniz. Ekran görüntüsü alma özelliğinin HTTPS gerektirdiğini ve bu yayında açıklandığı gibi komut satırı işaretiyle etkinleştirildiği için yalnızca geliştirme amacıyla kullanılması gerektiğini unutmayın.

Sinyal: Oturum kontrolü, ağ ve medya bilgileri

WebRTC, tarayıcılar (eşler olarak da bilinir) arasında akış verilerini iletmek için RTCPeerConnection kullanır ancak iletişimi koordine etmek ve kontrol mesajları göndermek için de bir mekanizmaya ihtiyaç duyar. Bu işleme sinyalizasyon adı verilir. Sinyal yöntemleri ve protokolleri WebRTC tarafından belirtilmez. Sinyal verme, RTCPeerConnection API'sinin bir parçası değildir.

Bunun yerine, WebRTC uygulama geliştiricileri SIP veya XMPP gibi tercih ettikleri mesajlaşma protokolünü ve uygun bir çift yönlü iletişim kanalını seçebilir. appr.tc örneğinde, sinyal mekanizması olarak XHR ve Channel API kullanılır. codelab, Node sunucusunda çalışan Socket.io'yu kullanır.

Sinyal, üç tür bilgiyi değiştirmek için kullanılır:

  • Oturum kontrolü mesajları: İletişimi başlatmak veya kapatmak ve hataları bildirmek için kullanılır.
  • Ağ yapılandırması: Bilgisayarınızın dış dünyadaki IP adresi ve bağlantı noktası nedir?
  • Medya özellikleri: Tarayıcınız ve iletişim kurmak istediği tarayıcı hangi codec'leri ve çözünürlükleri işleyebilir?

Eşler arası yayın başlatılmadan önce sinyalizasyon yoluyla bilgi alışverişi başarıyla tamamlanmalıdır.

Örneğin, Alara'nın Bora ile iletişim kurmak istediğini düşünelim. W3C WebRTC spesifikasyonundan alınan ve sinyal sürecini gösteren bir kod örneğini burada bulabilirsiniz. Kod, createSignalingChannel() yönteminde oluşturulan bazı sinyal mekanizmalarının varlığını varsayar. Ayrıca Chrome ve Opera'da RTCPeerConnection simgesinin şu anda önek olarak kullanıldığını unutmayın.

// handles JSON.stringify/parse
const signaling = new SignalingChannel();
const constraints = {audio: true, video: true};
const configuration = {iceServers: [{urls: 'stun:stun.example.org'}]};
const pc = new RTCPeerConnection(configuration);

// Send any ice candidates to the other peer.
pc.onicecandidate = ({candidate}) => signaling.send({candidate});

// Let the "negotiationneeded" event trigger offer generation.
pc.onnegotiationneeded = async () => {
  try {
    await pc.setLocalDescription(await pc.createOffer());
    // Send the offer to the other peer.
    signaling.send({desc: pc.localDescription});
  } catch (err) {
    console.error(err);
  }
};

// Once remote track media arrives, show it in remote video element.
pc.ontrack = (event) => {
  // Don't set srcObject again if it is already set.
  if (remoteView.srcObject) return;
  remoteView.srcObject = event.streams[0];
};

// Call start() to initiate.
async function start() {
  try {
    // Get local stream, show it in self-view, and add it to be sent.
    const stream =
      await navigator.mediaDevices.getUserMedia(constraints);
    stream.getTracks().forEach((track) =>
      pc.addTrack(track, stream));
    selfView.srcObject = stream;
  } catch (err) {
    console.error(err);
  }
}

signaling.onmessage = async ({desc, candidate}) => {
  try {
    if (desc) {
      // If you get an offer, you need to reply with an answer.
      if (desc.type === 'offer') {
        await pc.setRemoteDescription(desc);
        const stream =
          await navigator.mediaDevices.getUserMedia(constraints);
        stream.getTracks().forEach((track) =>
          pc.addTrack(track, stream));
        await pc.setLocalDescription(await pc.createAnswer());
        signaling.send({desc: pc.localDescription});
      } else if (desc.type === 'answer') {
        await pc.setRemoteDescription(desc);
      } else {
        console.log('Unsupported SDP type.');
      }
    } else if (candidate) {
      await pc.addIceCandidate(candidate);
    }
  } catch (err) {
    console.error(err);
  }
};

İlk olarak, Aylin ve Başar ağ bilgilerini paylaşır. (Aday bulma ifadesi, ICE çerçevesini kullanarak ağ arayüzlerini ve bağlantı noktalarını bulma sürecini ifade eder.)

  1. Ayşe, ağ adayları kullanılabilir hale geldiğinde çalışan bir onicecandidate işleyiciye sahip bir RTCPeerConnection nesnesi oluşturur.
  2. Ayşe, kullandıkları sinyal kanalı (ör. WebSocket veya başka bir mekanizma) üzerinden seri hale getirilmiş aday verilerini Burak'a gönderir.
  3. Bob, Alice'ten bir aday mesajı aldığında adayı uzak eş açıklamasına eklemek için addIceCandidate işlevini çağırır.

WebRTC istemcilerinin (bu örnekte eşler veya Alice ve Bob olarak da bilinir) çözünürlük ve codec yetenekleri gibi yerel ve uzak ses ile video medya bilgilerini de belirleyip paylaşması gerekir. Medya yapılandırma bilgilerini değiştirmek için sinyal verme işlemi, Oturum Açıklama Protokolü (SDP) kullanılarak teklif ve yanıt değişimiyle yapılır:

  1. Ayşe, RTCPeerConnection createOffer() yöntemini çalıştırır. Bu işlemden döndürülen değer, RTCSessionDescription olarak iletilir. Bu, Alice'in yerel oturum açıklamasıdır.
  2. Geri aramada Alice, setLocalDescription() kullanarak yerel açıklamayı ayarlar ve ardından bu oturum açıklamasını sinyal kanalından Bob'a gönderir. RTCPeerConnection, setLocalDescription() çağrılana kadar aday toplamaya başlamaz. Bu durum, JSEP IETF taslağında kodlanmıştır.
  3. Ali, Ayşe'nin kendisine gönderdiği açıklamayı setRemoteDescription() kullanarak uzaktan açıklama olarak ayarlar.
  4. Bora, RTCPeerConnection createAnswer() yöntemini çalıştırarak Alice'ten aldığı uzak açıklamayı bu yönteme iletiyor. Böylece, Alice'in oturumuyla uyumlu yerel bir oturum oluşturulabiliyor. createAnswer() geri çağırmasına RTCSessionDescription iletilir. Bob bunu yerel açıklama olarak ayarlar ve Alice'e gönderir.
  5. Ayşe, Ali'nin oturum açıklamasını aldığında setRemoteDescription ile bunu uzak açıklama olarak ayarlar.
  6. Ping!

RTCSessionDescription nesneleri, Oturum Açıklama Protokolü (SDP) ile uyumlu blob'lardır. Serileştirilmiş bir SDP nesnesi şu şekilde görünür:

v=0
o=- 3883943731 1 IN IP4 127.0.0.1
s=
t=0 0
a=group:BUNDLE audio video
m=audio 1 RTP/SAVPF 103 104 0 8 106 105 13 126

// ...

a=ssrc:2223794119 label:H4fjnMzxy3dPIgQ7HxuCTLb4wLLLeRHnFxh810

Ağ ve medya bilgilerinin edinilmesi ve değişimi eş zamanlı olarak yapılabilir ancak eşler arasında ses ve video akışı başlatılmadan önce her iki işlemin de tamamlanması gerekir.

Daha önce açıklanan teklif/yanıt mimarisine JavaScript Oturum Kurma Protokolü veya JSEP adı verilir. (Ericsson'ın ilk WebRTC uygulaması için hazırladığı demo videosunda sinyal ve akış sürecini açıklayan mükemmel bir animasyon yer almaktadır.)

JSEP mimari şeması
JSEP mimarisi

Sinyal verme süreci başarıyla tamamlandıktan sonra veriler doğrudan eşler arası olarak, arayan ve aranan arasında aktarılabilir. Bu işlem başarısız olursa veriler bir aracı aktarım sunucusu üzerinden aktarılır (bu konuyla ilgili daha fazla bilgiyi sonraki bölümlerde bulabilirsiniz). Yayın hizmeti RTCPeerConnection'ın işidir.

RTCPeerConnection

RTCPeerConnection, akış verilerinin eşler arasında kararlı ve verimli bir şekilde iletilmesini sağlayan WebRTC bileşenidir.

Aşağıda, RTCPeerConnection rolünü gösteren bir WebRTC mimari şeması yer almaktadır. Fark edeceğiniz üzere, yeşil kısımlar karmaşık.

WebRTC mimari şeması
WebRTC mimarisi (webrtc.org'dan)

JavaScript açısından bu şemadan anlaşılması gereken en önemli nokta, RTCPeerConnection'nin web geliştiricileri altta yatan sayısız karmaşıklıktan koruduğudur. WebRTC tarafından kullanılan codec'ler ve protokoller, güvenilir olmayan ağlarda bile anlık iletişimi mümkün kılmak için çok fazla iş yapar:

  • Paket kaybını gizleme
  • Yankı giderme
  • Bant genişliği uyarlanabilirliği
  • Dinamik ses dalgalanması arabelleği
  • Otomatik kazanç kontrolü
  • Gürültü azaltma ve bastırma
  • Görüntü temizleme

Önceki W3C kodu, sinyal verme açısından WebRTC'nin basitleştirilmiş bir örneğini gösterir. Aşağıda, çalışan iki WebRTC uygulamasının adım adım açıklamaları verilmiştir. Birincisi RTCPeerConnection'yı göstermek için basit bir örnek, ikincisi ise tam işlevsel bir görüntülü sohbet istemcisidir.

Sunucular olmadan RTCPeerConnection

Aşağıdaki kod, bir web sayfasında yerel ve uzak RTCPeerConnection (ve yerel ve uzak video) içeren WebRTC örnekleri Eş bağlantısı'ndan alınmıştır. Bu, çok faydalı bir şey olmasa da (arayan ve aranan aynı sayfada) sayfadaki RTCPeerConnection nesneleri, ara sinyal mekanizmalarını kullanmak zorunda kalmadan doğrudan veri ve mesaj alışverişinde bulunabildiğinden RTCPeerConnection API'nin işleyişini biraz daha netleştirir.

Bu örnekte, pc1 yerel eşi (arayan) ve pc2 uzak eşi (aranan) temsil eder.

Arayan

  1. Yeni bir RTCPeerConnection oluşturun ve getUserMedia() kaynağından akışı ekleyin: ```js // Servers is an optional configuration file. (TURN ve STUN ile ilgili tartışmayı daha sonra inceleyin.) pc1 = new RTCPeerConnection(servers); // ... localStream.getTracks().forEach((track) => { pc1.addTrack(track, localStream); });
  1. Bir fırsat oluşturun ve bunu pc1 için yerel açıklama, pc2 için ise uzaktan açıklama olarak ayarlayın. Arayan ve aranan aynı sayfada olduğundan bu işlem, sinyalizasyon kullanılmadan doğrudan kodda yapılabilir: js pc1.setLocalDescription(desc).then(() => { onSetLocalSuccess(pc1); }, onSetSessionDescriptionError ); trace('pc2 setRemoteDescription start'); pc2.setRemoteDescription(desc).then(() => { onSetRemoteSuccess(pc2); }, onSetSessionDescriptionError );

Callee

  1. pc2 oluşturun ve pc1 kaynağından yayın eklendiğinde bunu bir video öğesinde gösterin: js pc2 = new RTCPeerConnection(servers); pc2.ontrack = gotRemoteStream; //... function gotRemoteStream(e){ vid2.srcObject = e.stream; }

RTCPeerConnection API ve sunucular

Gerçek dünyada WebRTC'nin sunuculara ihtiyacı vardır. Bu nedenle, aşağıdaki durumlar yaşanabilir:

  • Kullanıcılar birbirini keşfeder ve ad gibi gerçek dünyayla ilgili ayrıntıları paylaşır.
  • WebRTC istemci uygulamaları (eşler) ağ bilgilerini paylaşır.
  • Eşler, video biçimi ve çözünürlüğü gibi medya hakkındaki verileri paylaşır.
  • WebRTC istemci uygulamaları NAT ağ geçitlerinden ve güvenlik duvarlarından geçer.

Başka bir deyişle, WebRTC'nin dört tür sunucu tarafı işlevselliğine ihtiyacı vardır:

  • Kullanıcı keşfi ve iletişimi
  • Sinyal
  • NAT/güvenlik duvarı geçişi
  • Eşler arası iletişim başarısız olduğunda ileti sunucuları

NAT geçişi, eşler arası ağ ve kullanıcı keşfi ile sinyalizasyon için sunucu uygulaması oluşturma şartları bu makalenin kapsamı dışındadır. STUN protokolü ve uzantısı olan TURN'ün, RTCPeerConnection'ın NAT geçişi ve diğer ağ değişkenlikleriyle başa çıkmasını sağlamak için ICE çerçevesi tarafından kullanıldığını belirtmek yeterlidir.

ICE, iki görüntülü sohbet istemcisi gibi eşleri bağlamak için kullanılan bir çerçevedir. ICE, başlangıçta eşleri UDP üzerinden mümkün olan en düşük gecikmeyle doğrudan bağlamaya çalışır. Bu süreçte STUN sunucularının tek bir görevi vardır: NAT'ın arkasındaki bir eşin herkese açık adresini ve bağlantı noktasını bulmasını sağlamak. (STUN ve TURN hakkında daha fazla bilgi için WebRTC uygulaması için gereken arka uç hizmetlerini oluşturma başlıklı makaleyi inceleyin.)

Bağlantı adaylarını bulma
Bağlantı adaylarını bulma

UDP başarısız olursa ICE, TCP'yi dener. Doğrudan bağlantı başarısız olursa (özellikle kurumsal NAT geçişi ve güvenlik duvarları nedeniyle) ICE, aracı (geçiş) TURN sunucusunu kullanır. Diğer bir deyişle ICE, önce STUN'ı UDP ile kullanarak eşleri doğrudan bağlar ve bu başarısız olursa TURN aktarım sunucusuna geri döner. Adayları bulma ifadesi, ağ arayüzlerini ve bağlantı noktalarını bulma sürecini ifade eder.

WebRTC veri yolları
WebRTC veri yolları

WebRTC mühendisi Justin Uberti, 2013 Google I/O WebRTC sunumunda ICE, STUN ve TURN hakkında daha fazla bilgi veriyor. (Sunum slaytlarında TURN ve STUN sunucu uygulamalarıyla ilgili örnekler verilmektedir.)

Basit bir görüntülü sohbet istemcisi

WebRTC'yi denemek için iyi bir yer olan appr.tc adresindeki görüntülü sohbet demosunda, STUN sunucusu kullanılarak sinyal ve NAT/güvenlik duvarı geçişi tamamlanıyor. Bu uygulama, uygulamaları spesifikasyon değişikliklerinden ve önek farklılıklarından korumak için bir ara katman olan adapter.js'yi kullanır.

Kod, günlük kaydında kasıtlı olarak ayrıntılıdır. Olayların sırasını anlamak için konsolu kontrol edin. Aşağıda kodun ayrıntılı bir açıklaması verilmiştir.

Ağ topolojileri

WebRTC, şu anki uygulamasıyla yalnızca bire bir iletişimi desteklemektedir. Ancak her biri doğrudan veya bir çok noktalı kontrol birimi (MCU) aracılığıyla birbirleriyle iletişim kuran birden fazla eş gibi daha karmaşık ağ senaryolarında kullanılabilir. MCU, çok sayıda katılımcıyı işleyebilen ve seçici akış yönlendirme, ses ve video karıştırma veya kaydetme işlemlerini yapabilen bir sunucudur.

Çok Noktalı Kontrol Birimi topoloji diyagramı
Çok noktalı kontrol birimi topolojisi örneği

Mevcut birçok WebRTC uygulaması yalnızca web tarayıcıları arasındaki iletişimi gösterir. Ancak ağ geçidi sunucuları, bir tarayıcıda çalışan WebRTC uygulamasının telefonlar (PSTN olarak da bilinir) ve VOIP sistemleri gibi cihazlarla etkileşime girmesini sağlayabilir. Doubango Telecom, Mayıs 2012'de WebRTC ve WebSocket ile oluşturulan sipml5 SIP istemcisinin açık kaynak kodunu yayınladı. Bu istemci, diğer olası kullanımlarının yanı sıra iOS ve Android'de çalışan tarayıcılar ve uygulamalar arasında görüntülü görüşme yapılmasını sağlar. Google I/O'da Tethr ve Tropo, WebRTC aracılığıyla özellikli telefonlar ve bilgisayarlar arasında iletişimi etkinleştirmek için OpenBTS hücresini kullanarak bir evrak çantasında afet iletişimi için bir çerçeve gösterdi. Operatör olmadan telefonla iletişim kurun.

Google I/O 2012&#39;de Tethr/Tropo demosu
Tethr/Tropo: Bir çantada felaket iletişimi

RTCDataChannel API<

WebRTC, ses ve videonun yanı sıra diğer veri türleri için de gerçek zamanlı iletişimi destekler.

RTCDataChannel API, düşük gecikme ve yüksek işleme hızıyla rastgele verilerin eşler arası değişimini sağlar. Tek sayfalık demolar ve basit bir dosya aktarımı uygulaması oluşturmayı öğrenmek için sırasıyla WebRTC örnekleri ve WebRTC codelab sayfalarına bakın.

API'nin birçok potansiyel kullanım alanı vardır. Örneğin:

  • Oyun
  • Uzaktan masaüstü uygulamaları
  • Gerçek zamanlı yazılı sohbet
  • Dosya aktarımı
  • Merkezi olmayan ağlar

API, RTCPeerConnection'dan en iyi şekilde yararlanmak ve güçlü ve esnek eşler arası iletişim sağlamak için çeşitli özelliklere sahiptir:

  • RTCPeerConnection oturum kurulumundan yararlanma
  • Önceliklendirme ile birden fazla eşzamanlı kanal
  • Güvenilir ve güvenilir olmayan teslimat semantiği
  • Yerleşik güvenlik (DTLS) ve tıkanıklık kontrolü
  • Ses veya video ile ya da ses veya video olmadan kullanabilme

Söz dizimi, send() yöntemi ve message etkinliği ile WebSocket'e benzer şekilde tasarlanmıştır:

const localConnection = new RTCPeerConnection(servers);
const remoteConnection = new RTCPeerConnection(servers);
const sendChannel =
  localConnection.createDataChannel('sendDataChannel');

// ...

remoteConnection.ondatachannel = (event) => {
  receiveChannel = event.channel;
  receiveChannel.onmessage = onReceiveMessage;
  receiveChannel.onopen = onReceiveChannelStateChange;
  receiveChannel.onclose = onReceiveChannelStateChange;
};

function onReceiveMessage(event) {
  document.querySelector("textarea#send").value = event.data;
}

document.querySelector("button#send").onclick = () => {
  var data = document.querySelector("textarea#send").value;
  sendChannel.send(data);
};

İletişim doğrudan tarayıcılar arasında gerçekleştiğinden, güvenlik duvarları ve NAT'lerle başa çıkmak için bağlantı noktası açma işlemi başarısız olduğunda bir geçiş (TURN) sunucusu gerekse bile RTCDataChannel, WebSocket'ten çok daha hızlı olabilir.

RTCDataChannel; Chrome, Safari, Firefox, Opera ve Samsung Internet'te kullanılabilir. Cube Slam oyunu, oyun durumunu iletmek için API'yi kullanır. Arkadaşınızla veya ayıyla oynayın. Yenilikçi bir platform olan Sharefest, RTCDataChannel üzerinden dosya paylaşımına olanak tanırken peerCDN, WebRTC'nin eşler arası içerik dağıtımını nasıl sağlayabileceğine dair bir fikir verdi.

RTCDataChannel hakkında daha fazla bilgi için IETF'nin protokol spesifikasyonu taslağına göz atın.

Güvenlik

Anlık iletişim uygulamaları veya eklentileri, güvenliği çeşitli şekillerde tehlikeye atabilir. Örneğin:

  • Şifrelenmemiş medya veya veriler, tarayıcılar arasında ya da bir tarayıcı ile sunucu arasında ele geçirilebilir.
  • Bir uygulama, kullanıcının bilgisi olmadan video veya ses kaydı yapıp dağıtabilir.
  • Kötü amaçlı yazılımlar veya virüsler, görünüşte zararsız bir eklenti ya da uygulamayla birlikte yüklenebilir.

WebRTC'nin bu sorunları önlemek için çeşitli özellikleri vardır:

  • WebRTC uygulamaları, DTLS ve SRTP gibi güvenli protokoller kullanır.
  • Sinyal mekanizmaları da dahil olmak üzere tüm WebRTC bileşenleri için şifreleme zorunludur.
  • WebRTC bir eklenti değildir. Bileşenleri ayrı bir işlemde değil, tarayıcı korumalı alanında çalışır. Bileşenlerin ayrı olarak yüklenmesi gerekmez ve tarayıcı her güncellendiğinde bileşenler de güncellenir.
  • Kamera ve mikrofon erişimi açıkça verilmelidir. Kamera veya mikrofon çalışırken bu durum kullanıcı arayüzünde net bir şekilde gösterilir.

Akış medyası güvenliğiyle ilgili ayrıntılı bir tartışma bu makalenin kapsamı dışındadır. Daha fazla bilgi için IETF tarafından önerilen Proposed WebRTC Security Architecture (Önerilen WebRTC Güvenlik Mimarisi) başlıklı makaleyi inceleyin.

Sonuç

WebRTC'nin API'leri ve standartları; telefon, oyun, video prodüksiyonu, müzik yapımı ve haber toplama gibi içerik oluşturma ve iletişim araçlarını demokratikleştirip merkeziyetsizleştirebilir.

Teknoloji bundan daha ezber bozucu olamaz.

Blog yazarı Phil Edholm'un dediği gibi, "WebRTC ve HTML5, orijinal tarayıcının bilgi için sağladığı dönüşümü gerçek zamanlı iletişim için de sağlayabilir."

Geliştirici araçları

Daha fazla bilgi

Standartlar ve protokoller

WebRTC destek özeti

MediaStream ve getUserMedia API'leri

  • Chrome masaüstü 18.0.1008 ve sonraki sürümleri; Android için Chrome 29 ve sonraki sürümleri
  • Opera 18 ve sonraki sürümler; Android için Opera 20 ve sonraki sürümler
  • Opera 12, Opera Mobile 12 (Presto motoruna dayalı)
  • Firefox 17 ve sonraki sürümler
  • Microsoft Edge 16 ve sonraki sürümler
  • iOS'te Safari 11.2 ve sonraki sürümler, macOS'te ise 11.1 ve sonraki sürümler
  • Android'de UC 11.8 ve sonraki sürümler
  • Samsung Internet 4 ve sonraki sürümler

RTCPeerConnection API

  • Chrome masaüstü 20 ve sonraki sürümler; Android için Chrome 29 ve sonraki sürümler (flagsiz)
  • Opera 18 ve sonraki sürümler (varsayılan olarak etkin); Android için Opera 20 ve sonraki sürümler (varsayılan olarak etkin)
  • Firefox 22 ve sonraki sürümler (varsayılan olarak etkin)
  • Microsoft Edge 16 ve sonraki sürümler
  • iOS'te Safari 11.2 ve sonraki sürümler, macOS'te ise 11.1 ve sonraki sürümler
  • Samsung Internet 4 ve sonraki sürümler

RTCDataChannel API

  • Chrome 25'te deneysel sürüm, Chrome 26 ve sonraki sürümlerde daha kararlı (ve Firefox ile birlikte çalışabilirlik özelliğiyle); Android için Chrome 29 ve sonraki sürümler
  • Opera 18 ve sonraki sürümlerde (Firefox ile birlikte çalışabilirlik özelliğiyle) kararlı sürüm; Android için Opera 20 ve sonraki sürümler
  • Firefox 22 ve sonraki sürümler (varsayılan olarak etkin)

getUserMedia ve RTCPeerConnection gibi API'lerin platformlar arası desteği hakkında daha ayrıntılı bilgi için caniuse.com ve Chrome Platform Durumu'nu inceleyin.

RTCPeerConnection için yerel API'leri webrtc.org adresindeki dokümanlarda da bulabilirsiniz.