Hakan GÜZEL

WebRTC’yi Anlamak

by · Published · Updated

WebRTC nedir?

WebRTC, Web Gerçek Zamanlı İletişim anlamına gelir. Webrtc.org’dan:

“WebRTC ile, uygulamanıza açık bir standart üzerinde çalışan gerçek zamanlı iletişim yetenekleri ekleyebilirsiniz. Eşler arasında gönderilecek video, ses ve genel verileri destekler ve geliştiricilerin güçlü ses ve görüntülü iletişim çözümleri oluşturmasına olanak tanır”

API aslında göründüğü kadar büyük ve karmaşık değil. MDN web sitesi, her zaman olduğu gibi, https://developer.mozilla.org/en-US/docs/Glossary/WebRTC .

3 ana bölümümüz var:

  1. getUserMedia(): kullanıcıdan izin istemek için tarayıcıya bir sinyal gönderir ve ses / video / veri “akışını” döndürür
  2. RTCPeerConnection: iki katılımcıya eşler denir, yerel ve uzak. Fiziksel olarak uzak olması gerekmez, aynı bilgisayarda iki tarayıcı olabilir.
  3. RTCDataChannel: iki eş, veri aktarmak için iki yönlü bir şekilde bir kanal üzerinden bağlanır. Bir eş 65.534’e kadar veri kanalına sahip olabilir (tarayıcıya bağlıdır)

Webrtc.org’da birçok yararlı örnek bulabiliriz https://webrtc.github.io/samples/

Temel bir eşler arası bağlantıyı inceleyelim.

  • demo: https://webrtc.github.io/samples/src/content/peerconnection/pc1/
  • kod: https://github.com/webrtc/samples/tree/gh-pages/src/content/peerconnection/pc1

İlk olarak, biri diğer kişiyi, diğeri de kendimizi görmek için iki video öğesine ihtiyacımız olacak:

<video id="localVideo" playsinline autoplay muted></video>
<video id="remoteVideo" playsinline autoplay></video>

Ardından, başlatmak, aramak ve kapatmak için kontroller:

<button id="startButton">Start</button>
<button id="callButton">Call</button>
<button id="hangupButton">Hang Up</button>

Artık tüm eşler arası bağlantı olaylarını işlemek için WebRTC API’yi kullanmaya başlayabiliriz. İlk önce bazı global değişkenler ayarlıyoruz, GUI öğeleri alıyoruz ve tıklama işleyicileri ekliyoruz:

const startButton = document.getElementById("startButton");
const callButton = document.getElementById("callButton");
const hangupButton = document.getElementById("hangupButton");
startButton.addEventListener("click", start); callButton.addEventListener("click", call); hangupButton.addEventListener("click", hangup);
const localVideo = document.getElementById("localVideo"); const remoteVideo = document.getElementById("remoteVideo"); let localStream; let pc1; let pc2; const offerOptions = { offerToReceiveAudio: 1, offerToReceiveVideo: 1, };

Başlat’a tıkladığımızda, temel olarak kullanıcıdan kamera ve mikrofonu getUserMedia () ile kullanma izni istemek istiyoruz:

async function start() 
{ 
try 
{ 
const stream = await navigator.mediaDevices.getUserMedia(
{ 
audio: true, 
video: true, 
}); 
localVideo.srcObject = stream; 
localStream = stream; 
} catch (e) { 
alert(`getUserMedia() error: ${e.name}`); 
} 
}

Bir çağrı başlatırken, iki eş arasında bir bağlantı kuracağız, birbirlerini ICECandidates ekleyeceğiz, yerel ses / video izlerini ayarlayacağız, eş 1’den bir bağlantı teklifi oluşturacağız ve eş 2’den bir cevap oluşturacağız:

async function call() { 
const configuration = {}; 
pc1 = new RTCPeerConnection(configuration); pc1.addEventListener("icecandidate", (e) => onIceCandidate(pc1, e)); pc2 = new RTCPeerConnection(configuration); pc2.addEventListener("icecandidate", (e) => onIceCandidate(pc2, e)); pc2.addEventListener("track", gotRemoteStream); localStream.getTracks().forEach((track) => pc1.addTrack(track, localStream)); 
try { await pc1.createOffer(offerOptions); 
await onCreateOfferSuccess() } catch (e) { onCreateSessionDescriptionError(e); } } 
async function onCreateOfferSuccess() { 
try { await pc2.createAnswer(); } catch (e) { onCreateSessionDescriptionError(e); } } 
function onCreateSessionDescriptionError(error) { console.log(`Failed to create session description: ${error.toString()}`); 
}

Yukarıdaki koddan, bir RTCIceCandidate’e ihtiyacımız olduğunu fark ettik, bu bir İnternet Bağlantı Kuruluşunu temsil ediyor.

İki eşin iletişim kurması için gereken tüm gizli mantığı, protokolleri, yönlendirmeyi, hata düzeltme vb. Açıklar. Burada her iki taraftaki adayları ekleyeceğiz:

function getName(pc) { 
return pc === pc1 ? "pc1" : "pc2"; 
} 
function getOtherPc(pc) { 
return pc === pc1 ? pc2 : pc1; 
} 
async function onIceCandidate(pc, event) { 
try { 
await getOtherPc(pc).addIceCandidate(event.candidate); 
} catch (e) { 
onAddIceCandidateError(pc, e); 
} 
} 
function onAddIceCandidateError(pc, error) { 
console.log( `${getName(pc)} failed to add ICE Candidate: ${error.toString()}` ); 
}

ICE adaylarını ekledikten sonra, “track” etkinliğine bir dinleyici ekledik. Olay akışını video öğesinin srcObject’ine ekleyeceğiz:

function gotRemoteStream(e) { 
if (remoteVideo.srcObject !== e.streams[0]) { 
remoteVideo.srcObject = e.streams[0]; 
} 
}

Bu bize her iki taraftan da video vermelidir.

Son olarak, bir aramayı kapatmak için eş bağlantılarını kapatır ve onları null olarak ayarlarız:

function hangup() { 
pc1.close(); 
pc2.close(); 
pc1 = null; 
pc2 = null; 
}

Umarım webrtc.org temel eş bağlantı örneğini yeterince basitleştirmişimdir

webrtc/samples
You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or…github.com

böylece harika video görüşmesi uygulamaları oluşturmaya başlayabilirsiniz. Elbette üretime hazır bir hizmet için çok daha fazlasını düşünmemiz gerekecek.

Mutlu kodlamalar.

Kaynak: Jorge Ortega – Understanding WebRTC

You may also like...