WebRTC ile gerçek zamanlı iletişim

1. Giriş

WebRTC, web ve yerel uygulamalarda ses, video ve verilerin gerçek zamanlı iletişimini sağlayan açık kaynak bir projedir.

WebRTC'nin çeşitli JavaScript API'leri vardır. Demoları görmek için bağlantıları tıklayın.

WebRTC'yi nerede kullanabilirim?

Firefox, Opera ve masaüstü ile Android'de Chrome'da. WebRTC, iOS ve Android'deki yerel uygulamalarda da kullanılabilir.

Sinyal verme nedir?

WebRTC, tarayıcılar 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. Bu codelab'de mesajlaşma için Socket.IO'yu kullanacaksınız ancak birçok alternatif vardır.

STUN ve TURN nedir?

WebRTC, eşler arası çalışacak şekilde tasarlanmıştır. Bu nedenle kullanıcılar mümkün olan en doğrudan rota üzerinden bağlanabilir. Ancak WebRTC, gerçek dünyadaki ağ iletişimiyle başa çıkmak için tasarlanmıştır: İstemci uygulamalarının NAT ağ geçitlerinden ve güvenlik duvarlarından geçmesi gerekir. Doğrudan bağlantı başarısız olursa eşler arası ağ iletişimi için yedek bağlantılar gerekir. Bu süreçte WebRTC API'leri, bilgisayarınızın IP adresini almak için STUN sunucularını, eşler arası iletişim başarısız olduğunda ise aktarım sunucusu olarak işlev görmek için TURN sunucularını kullanır. (Gerçek dünyada WebRTC başlıklı makalede daha ayrıntılı bir açıklama yer almaktadır.)

WebRTC güvenli mi?

Şifreleme, tüm WebRTC bileşenleri için zorunludur ve JavaScript API'leri yalnızca güvenli kaynaklardan (HTTPS veya localhost) kullanılabilir. Sinyal mekanizmaları WebRTC standartlarıyla tanımlanmadığından güvenli protokoller kullandığınızdan emin olmak sizin sorumluluğunuzdadır.

2. Genel Bakış

Web kameranızla video çekmek ve anlık görüntüler almak için bir uygulama oluşturun. Ardından, WebRTC üzerinden bu içerikleri eşler arası olarak paylaşın. Bu süreçte temel WebRTC API'lerini kullanmayı ve Node.js kullanarak mesajlaşma sunucusu oluşturmayı öğreneceksiniz.

Neler öğreneceksiniz?

  • Web kameranızdan video alma
  • RTCPeerConnection ile video akışı
  • RTCDataChannel ile veri akışı
  • Mesaj alışverişi için bir sinyal hizmeti ayarlama
  • Eş bağlantısı ve sinyalleşmeyi birleştirme
  • Fotoğraf çekip veri kanalı üzerinden paylaşma

İhtiyacınız olanlar

  • Chrome 47 veya sonraki sürümler
  • Web Server for Chrome'u veya kendi web sunucunuzu kullanın.
  • Örnek kod
  • Metin düzenleyici
  • HTML, CSS ve JavaScript hakkında temel bilgi

3. Örnek kodu alın

Kodu indirme

Git'i biliyorsanız bu codelab'in kodunu GitHub'dan klonlayarak indirebilirsiniz:

git clone https://github.com/googlecodelabs/webrtc-web

Alternatif olarak, kodun .zip dosyasını indirmek için aşağıdaki düğmeyi tıklayın:

İndirilen ZIP dosyasını açın. Bu işlem, bu kod laboratuvarının her adımı için bir klasörün yanı sıra ihtiyacınız olacak tüm kaynakları içeren bir proje klasörünü (adaptive-web-media) açar.

Tüm kodlama işlemlerinizi work adlı dizinde yapacaksınız.

step-nn klasörleri, bu codelab'in her adımı için tamamlanmış bir sürüm içerir. Bunlar referans amaçlıdır.

Web sunucusunu yükleme ve doğrulama

Kendi web sunucunuzu kullanmakta serbest olsanız da bu codelab, Chrome Web Sunucusu ile iyi çalışacak şekilde tasarlanmıştır. Bu uygulama henüz yüklü değilse Chrome Web Mağazası'ndan yükleyebilirsiniz.

6ddeb4aee53c0f0e.png

Web Server for Chrome uygulamasını yükledikten sonra yer işareti çubuğundaki, yeni sekme sayfasındaki veya uygulama başlatıcıdaki Chrome Uygulamaları kısayolunu tıklayın:

1d2b4aa977ab7e24.png

Web sunucusu simgesini tıklayın:

27fce4494f641883.png

Ardından, yerel web sunucunuzu yapılandırmanıza olanak tanıyan bu iletişim kutusunu görürsünüz:

Screen Shot 2016-02-18 at 11.48.14 AM.png

KLASÖR SEÇ düğmesini tıklayın ve yeni oluşturduğunuz work klasörünü seçin. Bu sayede, Web Sunucusu URL'leri bölümündeki Web Sunucusu iletişim kutusunda vurgulanan URL aracılığıyla Chrome'da devam eden çalışmalarınızı görüntüleyebilirsiniz.

Seçenekler bölümünde, aşağıdaki resimde gösterildiği gibi index.html dosyasını otomatik olarak göster seçeneğinin yanındaki kutuyu işaretleyin:

Screen Shot 2016-02-18 at 11.56.30 AM.png

Ardından Web Server: STARTED (Web Sunucusu: BAŞLATILDI) etiketli açma/kapatma düğmesini sola, ardından tekrar sağa kaydırarak sunucuyu durdurup yeniden başlatın.

Screen Shot 2016-02-18 at 12.22.18 PM.png

Şimdi, vurgulanan web sunucusu URL'sini tıklayarak web tarayıcınızda çalışma sitenizi ziyaret edin. Aşağıdaki gibi bir sayfa görmeniz gerekir. Bu sayfa, work/index.html ile eşleşir:

18a705cb6ccc5181.png

Bu uygulama henüz ilginç bir şey yapmıyor. Şu ana kadar yalnızca web sunucunuzun düzgün çalıştığından emin olmak için kullandığımız minimal bir iskelet. İşlev ve düzen özelliklerini sonraki adımlarda ekleyeceksiniz.

4. Web kameranızdan video yayını yapma

Neler öğreneceksiniz?

Bu adımda şunları nasıl yapacağınızı öğreneceksiniz:

  • Web kameranızdan video yayını alın.
  • Yayın oynatmayı kontrol etme
  • Videoyu değiştirmek için CSS ve SVG kullanın.

Bu adımın tam sürümü step-01 klasöründe yer alır.

Biraz HTML...

work dizininizdeki index.html dosyasına bir video öğesi ve bir script öğesi ekleyin:

<!DOCTYPE html>
<html>

<head>

  <title>Realtime communication with WebRTC</title>

  <link rel="stylesheet" href="css/main.css" />

</head>

<body>

  <h1>Realtime communication with WebRTC</h1>

  <video autoplay playsinline></video>

  <script src="js/main.js"></script>

</body>

</html>

...ve biraz da JavaScript

js klasörünüzdeki main.js dosyasına aşağıdakileri ekleyin:

'use strict';

// On this codelab, you will be streaming only video (video: true).
const mediaStreamConstraints = {
  video: true,
};

// Video element where stream will be placed.
const localVideo = document.querySelector('video');

// Local stream that will be reproduced on the video.
let localStream;

// Handles success by adding the MediaStream to the video element.
function gotLocalMediaStream(mediaStream) {
  localStream = mediaStream;
  localVideo.srcObject = mediaStream;
}

// Handles error by logging a message to the console with the error message.
function handleLocalMediaStreamError(error) {
  console.log('navigator.getUserMedia error: ', error);
}

// Initializes media stream.
navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
  .then(gotLocalMediaStream).catch(handleLocalMediaStreamError);

Deneyin

Tarayıcınızda index.html dosyasını açtığınızda buna benzer bir görüntü (elbette web kameranızın görüntüsüyle) görmeniz gerekir:

9297048e43ed0f3d.png

İşleyiş şekli

getUserMedia() çağrısından sonra tarayıcı, kameraya erişmek için kullanıcıdan izin ister (mevcut kaynak için kamera erişimi ilk kez isteniyorsa). Başarılı olursa srcObject özniteliği aracılığıyla bir medya öğesi tarafından kullanılabilen bir MediaStream döndürülür:

navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
  .then(gotLocalMediaStream).catch(handleLocalMediaStreamError);


}

function gotLocalMediaStream(mediaStream) {
  localVideo.srcObject = mediaStream;
}

constraints bağımsız değişkeni, hangi medyanın alınacağını belirtmenize olanak tanır. Bu örnekte, ses varsayılan olarak devre dışı olduğundan yalnızca video indirilir:

const mediaStreamConstraints = {
  video: true,
};

Video çözünürlüğü gibi ek şartlar için kısıtlamalar kullanabilirsiniz:

const hdConstraints = {
  video: {
    width: {
      min: 1280
    },
    height: {
      min: 720
    }
  }
}

MediaTrackConstraints spesifikasyonunda, tüm seçenekler tüm tarayıcılar tarafından desteklenmese de olası tüm kısıtlama türleri listelenir. İstenen çözünürlük, şu anda seçili kamera tarafından desteklenmiyorsa getUserMedia(), OverconstrainedError ile reddedilir ve kullanıcıdan kamerasına erişim izni vermesi istenmez.

getUserMedia() başarılı olursa web kamerasından gelen video akışı, video öğesinin kaynağı olarak ayarlanır:

function gotLocalMediaStream(mediaStream) {
  localVideo.srcObject = mediaStream;
}

Bonus puanlar

  • getUserMedia()'a iletilen localStream nesnesi genel kapsamdadır. Bu nedenle, tarayıcı konsolundan inceleyebilirsiniz: Konsolu açın, stream yazıp Enter tuşuna basın. (Konsolu Chrome'da görüntülemek için Ctrl-Üst Karakter-J veya Mac kullanıyorsanız Command-Option-J tuşlarına basın.)
  • localStream.getVideoTracks() ne döndürür?
  • localStream.getVideoTracks()[0].stop() numaralı telefonu aramayı deneyin.
  • Kısıtlamalar nesnesine bakın: Bunu {audio: true, video: true} olarak değiştirdiğinizde ne olur?
  • Video öğesinin boyutu nedir? Videonun görüntü boyutu yerine doğal boyutunu JavaScript ile nasıl alabilirsiniz? Kontrol etmek için Chrome Geliştirici Araçları'nı kullanın.
  • Video öğesine CSS filtreleri eklemeyi deneyin. Örneğin:
video {
  filter: blur(4px) invert(1) opacity(0.5);
}
  • SVG filtreleri eklemeyi deneyin. Örneğin:
video {
   filter: hue-rotate(180deg) saturate(200%);
 }

Öğrendikleriniz

Bu adımda şunları öğrendiniz:

  • Web kameranızdan video alma
  • Medya kısıtlamaları ayarlayın.
  • Video öğesiyle oynama

Bu adımın tam sürümü step-01 klasöründe yer alır.

İpuçları

  • video öğesindeki autoplay özelliğini unutmayın. Aksi takdirde yalnızca tek bir kare görürsünüz.
  • getUserMedia() kısıtlamaları için daha birçok seçenek vardır. webrtc.github.io/samples/src/content/peerconnection/constraints adresindeki demoya göz atın. Bu sitede birçok ilginç WebRTC örneği bulabilirsiniz.

En iyi uygulama

  • Video öğenizin kapsayıcısını aşmadığından emin olun. Videoya tercih edilen bir boyut ve maksimum boyut ayarlamak için width ve max-width özelliklerini ekledik. Tarayıcı, yüksekliği otomatik olarak hesaplar:
video {
  max-width: 100%;
  width: 320px;
}

Sıradaki

Videonuz var ancak nasıl yayınlayacaksınız? Bir sonraki adımda öğrenin.

5. RTCPeerConnection ile video akışı

Neler öğreneceksiniz?

Bu adımda şunları nasıl yapacağınızı öğreneceksiniz:

  • adapter.js adlı WebRTC shim ile tarayıcı farklılıklarını ortadan kaldırın.
  • Video yayınlamak için RTCPeerConnection API'yi kullanın.
  • Medya yakalama ve akışını kontrol etme

Bu adımın tam sürümü step-2 klasöründe yer alır.

RTCPeerConnection nedir?

RTCPeerConnection, video ve ses yayını yapmak ve veri alışverişinde bulunmak için WebRTC görüşmeleri yapmaya yönelik bir API'dir.

Bu örnekte, aynı sayfadaki iki RTCPeerConnection nesnesi (eşler olarak bilinir) arasında bağlantı kurulur.

Pratikte pek kullanışlı olmasa da RTCPeerConnection'ın nasıl çalıştığını anlamak için faydalıdır.

Video öğeleri ve kontrol düğmeleri ekleme

index.html dosyasında tek video öğesini iki video öğesi ve üç düğmeyle değiştirin:

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


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

Video öğelerinden biri getUserMedia() kaynağından gelen akışı, diğeri ise aynı videonun RTCPeerconnection üzerinden yayınlanan akışını gösterir. (Gerçek dünya uygulamasında bir video öğesi yerel akışı, diğeri ise uzak akışı gösterir.)

adapter.js shim'ini ekleyin

adapter.js'nin mevcut sürümüne main.js bağlantısının üstüne bir bağlantı ekleyin:

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Index.html dosyası artık şöyle görünmelidir:

<!DOCTYPE html>
<html>

<head>
  <title>Realtime communication with WebRTC</title>
  <link rel="stylesheet" href="css/main.css" />
</head>

<body>
  <h1>Realtime communication with WebRTC</h1>

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

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

  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

RTCPeerConnection kodunu yükleme

main.js dosyasını step-02 klasöründeki sürümle değiştirin.

Aramayı yapma

index.html dosyasını açın, web kameranızdan video almak için Başlat düğmesini, eşler bağlantısı oluşturmak için Arama'yı tıklayın. Her iki video öğesinde de aynı videoyu (web kameranızdan) görmeniz gerekir. WebRTC günlüklerini görmek için tarayıcı konsolunu görüntüleyin.

İşleyiş şekli

Bu adımda birçok işlem yapılır...

WebRTC, eşler olarak bilinen WebRTC istemcileri arasında video yayını yapmak için bağlantı oluşturmak üzere RTCPeerConnection API'sini kullanır.

Bu örnekte, iki RTCPeerConnection nesnesi aynı sayfada yer alıyor: pc1 ve pc2. Pratik kullanım alanı olmasa da API'lerin nasıl çalıştığını göstermek için iyi bir örnektir.

WebRTC eşleri arasında arama ayarlama üç görevden oluşur:

  • Aramanın her iki ucu için bir RTCPeerConnection oluşturun ve her iki uca getUserMedia()'dan yerel akışı ekleyin.
  • Ağ bilgilerini alma ve paylaşma: Potansiyel bağlantı uç noktaları ICE adayları olarak bilinir.
  • Yerel ve uzak açıklamaları alma ve paylaşma: SDP biçimindeki yerel medya hakkında meta veriler.

Ayşe ve Ali'nin, görüntülü sohbet başlatmak için RTCPeerConnection'ı kullanmak istediğini varsayalım.

İlk olarak, Ayşe ve Ali ağ bilgilerini paylaşıyor. "Aday bulma" ifadesi, ICE çerçevesi kullanılarak ağ arayüzlerinin ve bağlantı noktalarının bulunması sürecini ifade eder.

  1. Alice, onicecandidate (addEventListener('icecandidate')) işleyicisiyle bir RTCPeerConnection nesnesi oluşturur. Bu, main.js dosyasındaki aşağıdaki koda karşılık gelir:
let localPeerConnection;

localPeerConnection = new RTCPeerConnection(servers);
localPeerConnection.addEventListener('icecandidate', handleConnection);
localPeerConnection.addEventListener(
    'iceconnectionstatechange', handleConnectionChange);
  1. Alice, getUserMedia()'ı arar ve iletilen akışı ekler:
navigator.mediaDevices.getUserMedia(mediaStreamConstraints).
  then(gotLocalMediaStream).
  catch(handleLocalMediaStreamError);

function gotLocalMediaStream(mediaStream) {
  localVideo.srcObject = mediaStream;
  localStream = mediaStream;
  trace('Received local stream.');
  callButton.disabled = false;  // Enable call button.
}

localPeerConnection.addStream(localStream);
trace('Added local stream to localPeerConnection.');
  1. Ağ adayları kullanılabilir olduğunda 1. adımdaki onicecandidate işleyicisi çağrılır.
  2. Ayşe, seri hâle getirilmiş aday verilerini Ali'ye gönderir. Gerçek bir uygulamada bu işlem (sinyal verme olarak bilinir) bir mesajlaşma hizmeti aracılığıyla gerçekleşir. Bunu nasıl yapacağınızı sonraki bir adımda öğreneceksiniz. Elbette bu adımda iki RTCPeerConnection nesnesi aynı sayfadadır ve harici mesajlaşmaya gerek kalmadan doğrudan iletişim kurabilir.
  3. Ahmet'ten aday mesajı alan Ali, adayı uzak eş açıklamasına eklemek için addIceCandidate() işlevini çağırır:
function handleConnection(event) {
  const peerConnection = event.target;
  const iceCandidate = event.candidate;

  if (iceCandidate) {
    const newIceCandidate = new RTCIceCandidate(iceCandidate);
    const otherPeer = getOtherPeer(peerConnection);

    otherPeer.addIceCandidate(newIceCandidate)
      .then(() => {
        handleConnectionSuccess(peerConnection);
      }).catch((error) => {
        handleConnectionFailure(peerConnection, error);
      });

    trace(`${getPeerName(peerConnection)} ICE candidate:\n` +
          `${event.candidate.candidate}.`);
  }
}

WebRTC eşlerinin çözünürlük ve codec özellikleri gibi yerel ve uzak ses ile video medya bilgilerini de öğrenip paylaşması gerekir. Medya yapılandırma bilgilerini değiştirmek için sinyal verme işlemi, SDP olarak bilinen Oturum Açıklaması Protokolü biçimi kullanılarak offer (teklif) ve answer (yanıt) olarak bilinen meta veri bloblarının değiştirilmesiyle yapılır:

  1. Ayşe, RTCPeerConnection createOffer() yöntemini çalıştırır. Döndürülen söz, bir RTCSessionDescription sağlar: Alice'in yerel oturum açıklaması:
trace('localPeerConnection createOffer start.');
localPeerConnection.createOffer(offerOptions)
  .then(createdOffer).catch(setSessionDescriptionError);
  1. Başarılı olursa Alice, setLocalDescription() kullanarak yerel açıklamayı ayarlar ve ardından bu oturum açıklamasını sinyal kanalı üzerinden Bob'a gönderir.
  2. Ali, setRemoteDescription() kullanarak Ayşe'nin kendisine gönderdiği açıklamayı uzaktan açıklama olarak ayarlar.
  3. Bob, Alice'ten aldığı uzak açıklamayı ileterek RTCPeerConnection createAnswer() yöntemini çalıştırır. Böylece, Alice'in oturumuyla uyumlu bir yerel oturum oluşturulabilir. createAnswer() sözü bir RTCSessionDescription iletilir: Ali bunu yerel açıklama olarak ayarlar ve Ayşe'ye gönderir.
  4. Ayşe, Ali'nin oturum açıklamasını aldığında setRemoteDescription() ile bunu uzak açıklama olarak ayarlar.
// Logs offer creation and sets peer connection session descriptions.
function createdOffer(description) {
  trace(`Offer from localPeerConnection:\n${description.sdp}`);

  trace('localPeerConnection setLocalDescription start.');
  localPeerConnection.setLocalDescription(description)
    .then(() => {
      setLocalDescriptionSuccess(localPeerConnection);
    }).catch(setSessionDescriptionError);

  trace('remotePeerConnection setRemoteDescription start.');
  remotePeerConnection.setRemoteDescription(description)
    .then(() => {
      setRemoteDescriptionSuccess(remotePeerConnection);
    }).catch(setSessionDescriptionError);

  trace('remotePeerConnection createAnswer start.');
  remotePeerConnection.createAnswer()
    .then(createdAnswer)
    .catch(setSessionDescriptionError);
}

// Logs answer to offer creation and sets peer connection session descriptions.
function createdAnswer(description) {
  trace(`Answer from remotePeerConnection:\n${description.sdp}.`);

  trace('remotePeerConnection setLocalDescription start.');
  remotePeerConnection.setLocalDescription(description)
    .then(() => {
      setLocalDescriptionSuccess(remotePeerConnection);
    }).catch(setSessionDescriptionError);

  trace('localPeerConnection setRemoteDescription start.');
  localPeerConnection.setRemoteDescription(description)
    .then(() => {
      setRemoteDescriptionSuccess(localPeerConnection);
    }).catch(setSessionDescriptionError);
}
  1. Ping!

Bonus puanlar

  1. chrome://webrtc-internals sayfasına göz atın. Bu, WebRTC istatistiklerini ve hata ayıklama verilerini sağlar. (Chrome URL'lerinin tam listesi chrome://about adresinde yer alır.)
  2. CSS ile sayfayı stilize edin:
  • Videoları yan yana yerleştirin.
  • Düğmeleri aynı genişlikte ve daha büyük metinle oluşturun.
  • Düzenin mobil cihazlarda çalıştığından emin olun.
  1. Chrome Geliştirici Araçları konsolunda localStream, localPeerConnection ve remotePeerConnection'a bakın.
  2. Konsolda localPeerConnectionpc1.localDescription simgesine bakın. SDP biçimi nasıl görünür?

Öğrendikleriniz

Bu adımda şunları öğrendiniz:

  • adapter.js adlı WebRTC shim ile tarayıcı farklılıklarını ortadan kaldırın.
  • Video yayınlamak için RTCPeerConnection API'yi kullanın.
  • Medya yakalama ve akışını kontrol etme
  • WebRTC görüşmesi yapmak için eşler arasında medya ve ağ bilgilerini paylaşın.

Bu adımın tam sürümü step-2 klasöründe yer alır.

İpuçları

  • Bu adımda öğrenecek çok şey var. RTCPeerConnection'ı daha ayrıntılı olarak açıklayan diğer kaynakları bulmak için webrtc.org adresine göz atın. Bu sayfada, WebRTC kullanmak ancak API'lerle uğraşmak istemiyorsanız JavaScript çerçeveleriyle ilgili öneriler yer alır.
  • adapter.js shim hakkında daha fazla bilgiyi adapter.js GitHub deposunda bulabilirsiniz.
  • Dünyanın en iyi görüntülü sohbet uygulamasının nasıl göründüğünü görmek ister misiniz? WebRTC görüşmeleri için WebRTC projesinin standart uygulaması olan AppRTC'ye göz atın: app, code. Arama kurulum süresi 500 ms'den azdır.

En iyi uygulama

  • Kodunuzun gelecekte de çalışmasını sağlamak için yeni Promise tabanlı API'leri kullanın ve adapter.js kullanarak bunları desteklemeyen tarayıcılarla uyumluluğu etkinleştirin.

Sıradaki

Bu adımda, eşler arasında video akışı yapmak için WebRTC'nin nasıl kullanılacağı gösterilmektedir. Ancak bu codelab, verilerle de ilgilidir.

Bir sonraki adımda, RTCDataChannel kullanarak rastgele verileri nasıl yayınlayacağınızı öğreneceksiniz.

6. Veri alışverişi için RTCDataChannel'ı kullanma

Neler öğreneceksiniz?

  • WebRTC uç noktaları (eşler) arasında veri alışverişi yapma

Bu adımın tam sürümü step-03 klasöründe yer alır.

HTML'nizi güncelleme

Bu adımda, aynı sayfadaki iki textarea öğesi arasında metin göndermek için WebRTC veri kanallarını kullanacaksınız. Bu çok kullanışlı olmasa da WebRTC'nin video akışının yanı sıra veri paylaşmak için nasıl kullanılabileceğini gösterir.

index.html dosyasından video ve düğme öğelerini kaldırıp aşağıdaki HTML ile değiştirin:

<textarea id="dataChannelSend" disabled
    placeholder="Press Start, enter some text, then press Send."></textarea>
<textarea id="dataChannelReceive" disabled></textarea>

<div id="buttons">
  <button id="startButton">Start</button>
  <button id="sendButton">Send</button>
  <button id="closeButton">Stop</button>
</div>

Bir metin alanı metin girmek için, diğeri ise metni eşler arasında aktarılmış şekilde göstermek için kullanılır.

index.html artık aşağıdaki gibi görünmelidir:

<!DOCTYPE html>
<html>

<head>

  <title>Realtime communication with WebRTC</title>

  <link rel="stylesheet" href="css/main.css" />

</head>

<body>

  <h1>Realtime communication with WebRTC</h1>

  <textarea id="dataChannelSend" disabled
    placeholder="Press Start, enter some text, then press Send."></textarea>
  <textarea id="dataChannelReceive" disabled></textarea>

  <div id="buttons">
    <button id="startButton">Start</button>
    <button id="sendButton">Send</button>
    <button id="closeButton">Stop</button>
  </div>

  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="js/main.js"></script>

</body>

</html>

JavaScript'inizi güncelleyin

main.js dosyasını step-03/js/main.js dosyasının içeriğiyle değiştirin.

Eşler arasında veri akışını deneme: index.html dosyasını açın, eş bağlantısını ayarlamak için Start'a basın, soldaki textarea alanına biraz metin girin, ardından WebRTC veri kanallarını kullanarak metni aktarmak için Send'i (Gönder) tıklayın.

İşleyiş şekli

Bu kod, kısa mesaj alışverişini etkinleştirmek için RTCPeerConnection ve RTCDataChannel'ı kullanır.

Bu adımdaki kodun çoğu, RTCPeerConnection örneğindekiyle aynıdır.

Yeni kodun çoğu sendData() ve createConnection() işlevlerinde bulunur:

function createConnection() {
  dataChannelSend.placeholder = '';
  var servers = null;
  pcConstraint = null;
  dataConstraint = null;
  trace('Using SCTP based data channels');
  // For SCTP, reliable and ordered delivery is true by default.
  // Add localConnection to global scope to make it visible
  // from the browser console.
  window.localConnection = localConnection =
      new RTCPeerConnection(servers, pcConstraint);
  trace('Created local peer connection object localConnection');

  sendChannel = localConnection.createDataChannel('sendDataChannel',
      dataConstraint);
  trace('Created send data channel');

  localConnection.onicecandidate = iceCallback1;
  sendChannel.onopen = onSendChannelStateChange;
  sendChannel.onclose = onSendChannelStateChange;

  // Add remoteConnection to global scope to make it visible
  // from the browser console.
  window.remoteConnection = remoteConnection =
      new RTCPeerConnection(servers, pcConstraint);
  trace('Created remote peer connection object remoteConnection');

  remoteConnection.onicecandidate = iceCallback2;
  remoteConnection.ondatachannel = receiveChannelCallback;

  localConnection.createOffer().then(
    gotDescription1,
    onCreateSessionDescriptionError
  );
  startButton.disabled = true;
  closeButton.disabled = false;
}

function sendData() {
  var data = dataChannelSend.value;
  sendChannel.send(data);
  trace('Sent Data: ' + data);
}

RTCDataChannel'ın söz dizimi, send() yöntemi ve message etkinliğiyle WebSocket'e benzer şekilde tasarlanmıştır.

dataConstraint kullanımına dikkat edin. Veri kanalları, farklı veri paylaşımı türlerini etkinleştirecek şekilde yapılandırılabilir. Örneğin, performansa kıyasla güvenilir teslimata öncelik verilebilir. Seçenekler hakkında daha fazla bilgiyi Mozilla Developer Network'te bulabilirsiniz.

Bonus puanlar

  1. WebRTC veri kanalları tarafından kullanılan protokol olan SCTP ile güvenilir ve sıralı veri teslimi varsayılan olarak etkindir. RTCDataChannel'ın verilerin güvenilir şekilde teslim edilmesini sağlaması gerektiği ve bazı verilerin kaybolması anlamına gelse bile performansın daha önemli olabileceği durumlar nelerdir?
  2. Sayfa düzenini iyileştirmek için CSS'yi kullanın ve "dataChannelReceive" metin alanına bir yer tutucu özelliği ekleyin.
  3. Sayfayı mobil cihazda test edin.

Öğrendikleriniz

Bu adımda şunları öğrendiniz:

  • İki WebRTC eşi arasında bağlantı kurun.
  • Eşler arasında metin verilerini değiştirme

Bu adımın tam sürümü step-03 klasöründe yer alır.

Daha fazla bilgi

Sıradaki

Aynı sayfadaki eşler arasında nasıl veri alışverişi yapacağınızı öğrendiniz. Peki bunu farklı makineler arasında nasıl yaparsınız? Öncelikle meta veri mesajlarını değiştirmek için bir sinyal kanalı oluşturmanız gerekir. Nasıl yapacağınızı öğrenmek için sonraki adıma geçin.

7. Mesaj alışverişi için bir sinyal hizmeti ayarlama

Neler öğreneceksiniz?

Bu adımda şunları öğreneceksiniz:

  • package.json dosyasında belirtilen proje bağımlılarını yüklemek için npm komutunu kullanın.
  • Node.js sunucusu çalıştırın ve statik dosyaları sunmak için node-static'i kullanın.
  • Socket.IO kullanarak Node.js'de mesajlaşma hizmeti oluşturun.
  • Bu özelliği kullanarak "odalar" oluşturabilir ve mesaj alışverişinde bulunabilirsiniz.

Bu adımın tam sürümü step-04 klasöründe yer alır.

Kavramlar

WebRTC istemcilerinin (eşler) WebRTC görüşmesi ayarlayıp sürdürebilmesi için meta veri alışverişi yapması gerekir:

  • Aday (ağ) bilgileri.
  • Çözünürlük ve codec'ler gibi medya hakkında bilgi veren teklif ve yanıt mesajları.

Başka bir deyişle, ses, video veya verilerin eşler arası akışı gerçekleşmeden önce meta veri alışverişi yapılması gerekir. Bu sürece sinyal gönderme denir.

Önceki adımlarda, gönderen ve alıcı RTCPeerConnection nesneleri aynı sayfada olduğundan "sinyalleşme" yalnızca nesneler arasında meta veri aktarma işlemidir.

Gerçek dünya uygulamasında, gönderen ve alıcı RTCPeerConnection'ları farklı cihazlardaki web sayfalarında çalışır ve meta verileri iletmeleri için bir yol gerekir.

Bunun için sinyal sunucusu kullanırsınız: WebRTC istemcileri (eşler) arasında ileti iletebilen bir sunucu. Gerçek iletiler düz metindir: dizeleştirilmiş JavaScript nesneleri.

Ön koşul: Node.js'yi yükleyin

Bu codelab'in sonraki adımlarını (step-04 ile step-06 klasörleri) çalıştırmak için Node.js kullanarak localhost'ta bir sunucu çalıştırmanız gerekir.

Node.js'yi bu bağlantıdan veya tercih ettiğiniz paket yöneticisi üzerinden indirebilir ve yükleyebilirsiniz.

Yüklendikten sonra, sonraki adımlar için gereken bağımlılıkları (npm install komutunu çalıştırma) içe aktarabilir ve codelab'i yürütmek için küçük bir localhost sunucusu çalıştırabilirsiniz (node index.js komutunu çalıştırma). Bu komutlar, gerekli olduğunda daha sonra belirtilir.

Uygulama hakkında

WebRTC, istemci tarafı JavaScript API'sini kullanır ancak gerçek dünyada kullanım için sinyal (mesajlaşma) sunucusunun yanı sıra STUN ve TURN sunucuları da gerekir. Daha fazla bilgiye buradan ulaşabilirsiniz.

Bu adımda, mesajlaşma için Socket.IO Node.js modülünü ve JavaScript kitaplığını kullanarak basit bir Node.js sinyal sunucusu oluşturacaksınız. Node.js ve Socket.IO deneyimi faydalı olacaktır ancak zorunlu değildir. Mesajlaşma bileşenleri çok basittir.

Bu örnekte sunucu (Node.js uygulaması) index.js içinde, üzerinde çalışan istemci (web uygulaması) ise index.html içinde uygulanır.

Bu adımdaki Node.js uygulamasında iki görev vardır.

İlk olarak, mesaj iletme görevi görür:

socket.on('message', function (message) {
  log('Got message: ', message);
  socket.broadcast.emit('message', message);
});

İkincisi, WebRTC görüntülü sohbet "odalarını" yönetir:

if (numClients === 0) {
  socket.join(room);
  socket.emit('created', room, socket.id);
} else if (numClients === 1) {
  socket.join(room);
  socket.emit('joined', room, socket.id);
  io.sockets.in(room).emit('ready');
} else { // max two clients
  socket.emit('full', room);
}

Basit WebRTC uygulamamız, en fazla iki eşin bir odayı paylaşmasına izin verir.

HTML ve JavaScript

index.html dosyasını aşağıdaki gibi görünecek şekilde güncelleyin:

<!DOCTYPE html>
<html>

<head>

  <title>Realtime communication with WebRTC</title>

  <link rel="stylesheet" href="css/main.css" />

</head>

<body>

  <h1>Realtime communication with WebRTC</h1>

  <script src="/socket.io/socket.io.js"></script>
  <script src="js/main.js"></script>
  
</body>

</html>

Bu adımda sayfada herhangi bir şey görmezsiniz: Tüm günlük kaydı işlemleri tarayıcı konsolunda yapılır. (Konsolu Chrome'da görüntülemek için Ctrl-Üst Karakter-J veya Mac kullanıyorsanız Command-Option-J tuşlarına basın.)

js/main.js dosyasını aşağıdakiyle değiştirin:

'use strict';

var isInitiator;

window.room = prompt("Enter room name:");

var socket = io.connect();

if (room !== "") {
  console.log('Message from client: Asking to join room ' + room);
  socket.emit('create or join', room);
}

socket.on('created', function(room, clientId) {
  isInitiator = true;
});

socket.on('full', function(room) {
  console.log('Message from client: Room ' + room + ' is full :^(');
});

socket.on('ipaddr', function(ipaddr) {
  console.log('Message from client: Server IP address is ' + ipaddr);
});

socket.on('joined', function(room, clientId) {
  isInitiator = false;
});

socket.on('log', function(array) {
  console.log.apply(console, array);
});

Socket.IO'yu Node.js'de çalışacak şekilde ayarlama

HTML dosyasında bir Socket.IO dosyası kullandığınızı görmüş olabilirsiniz:

<script src="/socket.io/socket.io.js"></script>

work dizininizin en üst düzeyinde aşağıdaki içeriklere sahip package.json adlı bir dosya oluşturun:

{
  "name": "webrtc-codelab",
  "version": "0.0.1",
  "description": "WebRTC codelab",
  "dependencies": {
    "node-static": "^0.7.10",
    "socket.io": "^1.2.0"
  }
}

Bu, Node Package Manager'a (npm) hangi proje bağımlılıklarının yükleneceğini bildiren bir uygulama manifestidir.

Bağımlılıkları (ör. /socket.io/socket.io.js) yüklemek için çalışma dizininizde komut satırı terminalinden aşağıdakileri çalıştırın:

npm install

Aşağıdaki gibi bir yükleme günlüğü görürsünüz:

3ab06b7bcc7664b9.png

Gördüğünüz gibi, npm, package.json içinde tanımlanan bağımlıları yükledi.

work dizininizin en üst düzeyinde (js dizininde değil) index.js adlı yeni bir dosya oluşturun ve aşağıdaki kodu ekleyin:

'use strict';

var os = require('os');
var nodeStatic = require('node-static');
var http = require('http');
var socketIO = require('socket.io');

var fileServer = new(nodeStatic.Server)();
var app = http.createServer(function(req, res) {
  fileServer.serve(req, res);
}).listen(8080);

var io = socketIO.listen(app);
io.sockets.on('connection', function(socket) {

  // convenience function to log server messages on the client
  function log() {
    var array = ['Message from server:'];
    array.push.apply(array, arguments);
    socket.emit('log', array);
  }

  socket.on('message', function(message) {
    log('Client said: ', message);
    // for a real app, would be room-only (not broadcast)
    socket.broadcast.emit('message', message);
  });

  socket.on('create or join', function(room) {
    log('Received request to create or join room ' + room);

    var clientsInRoom = io.sockets.adapter.rooms[room];
    var numClients = clientsInRoom ? Object.keys(clientsInRoom.sockets).length : 0;

    log('Room ' + room + ' now has ' + numClients + ' client(s)');

    if (numClients === 0) {
      socket.join(room);
      log('Client ID ' + socket.id + ' created room ' + room);
      socket.emit('created', room, socket.id);

    } else if (numClients === 1) {
      log('Client ID ' + socket.id + ' joined room ' + room);
      io.sockets.in(room).emit('join', room);
      socket.join(room);
      socket.emit('joined', room, socket.id);
      io.sockets.in(room).emit('ready');
    } else { // max two clients
      socket.emit('full', room);
    }
  });

  socket.on('ipaddr', function() {
    var ifaces = os.networkInterfaces();
    for (var dev in ifaces) {
      ifaces[dev].forEach(function(details) {
        if (details.family === 'IPv4' && details.address !== '127.0.0.1') {
          socket.emit('ipaddr', details.address);
        }
      });
    }
  });

});

Komut satırı terminalinden work dizininde aşağıdaki komutu çalıştırın:

node index.js

Tarayıcınızda localhost:8080 adresini açın.

Bu URL'yi her açtığınızda oda adı girmeniz istenir. Aynı odaya katılmak için her seferinde aynı oda adını (ör. "foo") seçin.

Yeni bir sekme sayfası açın ve localhost:8080 adresini tekrar açın. Aynı oda adını seçin.

Üçüncü bir sekmede veya pencerede localhost:8080'i açın. Aynı oda adını tekrar seçin.

Her sekmedeki konsolu kontrol edin. Yukarıdaki JavaScript'ten gelen günlük kaydını görmeniz gerekir.

Bonus puanlar

  1. Hangi alternatif mesajlaşma mekanizmaları kullanılabilir? "Saf" WebSocket kullanırken ne gibi sorunlarla karşılaşabilirsiniz?
  2. Bu uygulamayı ölçeklendirirken hangi sorunlarla karşılaşılabilir? Binlerce veya milyonlarca eşzamanlı oda isteğini test etme yöntemi geliştirebilir misiniz?
  3. Bu uygulama, oda adı almak için JavaScript istemi kullanıyor. URL'den oda adını almanın bir yolunu bulun. Örneğin, localhost:8080/foo, oda adı olarak foo değerini verir.

Öğrendikleriniz

Bu adımda şunları öğrendiniz:

  • package.json dosyasında belirtilen proje bağımlılıklarını yüklemek için npm'yi kullanın.
  • Statik dosyaları sunmak için bir Node.js sunucusu çalıştırın.
  • socket.io kullanarak Node.js'de bir mesajlaşma hizmeti ayarlayın.
  • Bu özelliği kullanarak "odalar" oluşturabilir ve mesaj alışverişinde bulunabilirsiniz.

Bu adımın tam sürümü step-04 klasöründe yer alır.

Daha fazla bilgi

Sıradaki

İki kullanıcının eşler arası bağlantı kurmasını sağlamak için sinyalleşmeyi nasıl kullanacağınızı öğrenin.

8. Eş bağlantısı ve sinyalleşmeyi birleştirme

Neler öğreneceksiniz?

Bu adımda şunları nasıl yapacağınızı öğreneceksiniz:

  • Node.js üzerinde çalışan Socket.IO kullanarak bir WebRTC sinyal hizmeti çalıştırma
  • Bu hizmeti kullanarak eşler arasında WebRTC meta verilerini değiştirin.

Bu adımın tam sürümü step-05 klasöründe yer almaktadır.

HTML ve JavaScript'i değiştirme

index.html dosyasının içeriğini aşağıdakiyle değiştirin:

<!DOCTYPE html>
<html>

<head>

  <title>Realtime communication with WebRTC</title>

  <link rel="stylesheet" href="/css/main.css" />

</head>

<body>

  <h1>Realtime communication with WebRTC</h1>

  <div id="videos">
    <video id="localVideo" autoplay muted></video>
    <video id="remoteVideo" autoplay></video>
  </div>

  <script src="/socket.io/socket.io.js"></script>
  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="js/main.js"></script>
  
</body>

</html>

js/main.js dosyasını step-05/js/main.js dosyasının içeriğiyle değiştirin.

Node.js sunucusunu çalıştırma

Bu codelab'i iş dizininizden takip etmiyorsanız step-05 klasörü veya mevcut çalışma klasörünüz için bağımlılıkları yüklemeniz gerekebilir. Çalışma dizininizden aşağıdaki komutu çalıştırın:

npm install

Yüklendikten sonra Node.js sunucunuz çalışmıyorsa work dizininde aşağıdaki komutu çağırarak sunucuyu başlatın:

node index.js

Önceki adımda Socket.IO'yu uygulayan index.js sürümünü kullandığınızdan emin olun. Node ve Socket IO hakkında daha fazla bilgi için "Set up a signaling service to exchange messages" (Mesaj alışverişi için sinyal hizmeti ayarlama) bölümünü inceleyin.

Tarayıcınızda localhost:8080 adresini açın.

localhost:8080 adresini yeni bir sekmede veya pencerede tekrar açın. Video öğelerinden biri getUserMedia() cihazından gelen yerel akışı, diğeri ise RTCPeerconnection üzerinden yayınlanan "uzak" videoyu gösterir.

Tarayıcı konsolunda günlüğe kaydetmeyi görüntüleyin.

Bonus puanlar

  1. Bu uygulama yalnızca bire bir görüntülü sohbeti destekler. Birden fazla kişinin aynı görüntülü sohbet odasını paylaşabilmesi için tasarımı nasıl değiştirirsiniz?
  2. Örnekte, oda adı foo sabit kodlanmıştır. Diğer oda adlarını etkinleştirmenin en iyi yolu nedir?
  3. Kullanıcılar oda adını nasıl paylaşır? Oda adlarını paylaşmaya alternatif bir yöntem oluşturmayı deneyin.
  4. Uygulamayı nasıl değiştirebilirsiniz?

Öğrendikleriniz

Bu adımda şunları öğrendiniz:

  • Node.js üzerinde çalışan Socket.IO kullanarak bir WebRTC sinyal hizmeti çalıştırın.
  • Bu hizmeti kullanarak eşler arasında WebRTC meta verilerini değiştirin.

Bu adımın tam sürümü step-05 klasöründe yer almaktadır.

İpuçları

  • WebRTC istatistikleri ve hata ayıklama verileri chrome://webrtc-internals adresinde bulunur.
  • Yerel ortamınızı kontrol etmek ve kamera ile mikrofonunuzu test etmek için test.webrtc.org adresini kullanabilirsiniz.
  • Önbelleğe alma ile ilgili sorun yaşıyorsanız aşağıdakileri deneyin:
  • Ctrl tuşunu basılı tutarak ve Yeniden yükle düğmesini tıklayarak zorunlu yenileme yapın.
  • Tarayıcıyı yeniden başlatın.
  • npm cache clean komutunu komut satırından çalıştırın.

Sıradaki

Fotoğraf çekme, görüntü verilerini alma ve bunları uzaktaki eşler arasında paylaşma hakkında bilgi edinin.

9. Fotoğraf çekip veri kanalı üzerinden paylaşma

Neler öğreneceksiniz?

Bu adımda şunları öğreneceksiniz:

  • Tuval öğesini kullanarak fotoğraf çekin ve fotoğrafın verilerini alın.
  • Uzak bir kullanıcıyla görüntü verilerini paylaşma

Bu adımın tam sürümü step-06 klasöründe yer almaktadır.

İşleyiş şekli

Daha önce RTCDataChannel kullanarak nasıl kısa mesaj alışverişi yapacağınızı öğrenmiştiniz.

Bu adım, dosyaların tamamının paylaşılmasını sağlar. Bu örnekte, getUserMedia() ile çekilen fotoğraflar paylaşılır.

Bu adımın temel kısımları şunlardır:

  1. Veri kanalı oluşturun. Bu adımda eşler bağlantısına herhangi bir medya akışı eklemediğinizi unutmayın.
  2. Kullanıcının web kamerası video akışını getUserMedia() ile yakalayın:
var video = document.getElementById('video');

function grabWebCamVideo() {
  console.log('Getting user media (video) ...');
  navigator.mediaDevices.getUserMedia({
    video: true
  })
  .then(gotStream)
  .catch(function(e) {
    alert('getUserMedia() error: ' + e.name);
  });
}
  1. Kullanıcı Snap (Anlık Görüntü) düğmesini tıkladığında video akışından bir anlık görüntü (video karesi) alın ve bunu bir canvas öğesinde gösterin:
var photo = document.getElementById('photo');
var photoContext = photo.getContext('2d');

function snapPhoto() {
  photoContext.drawImage(video, 0, 0, photo.width, photo.height);
  show(photo, sendBtn);
}
  1. Kullanıcı Gönder düğmesini tıkladığında resmi baytlara dönüştürün ve bir veri kanalı üzerinden gönderin:
function sendPhoto() {
  // Split data channel message in chunks of this byte length.
  var CHUNK_LEN = 64000;
  var img = photoContext.getImageData(0, 0, photoContextW, photoContextH),
    len = img.data.byteLength,
    n = len / CHUNK_LEN | 0;

  console.log('Sending a total of ' + len + ' byte(s)');
  dataChannel.send(len);

  // split the photo and send in chunks of about 64KB
  for (var i = 0; i < n; i++) {
    var start = i * CHUNK_LEN,
      end = (i + 1) * CHUNK_LEN;
    console.log(start + ' - ' + (end - 1));
    dataChannel.send(img.data.subarray(start, end));
  }

  // send the reminder, if any
  if (len % CHUNK_LEN) {
    console.log('last ' + len % CHUNK_LEN + ' byte(s)');
    dataChannel.send(img.data.subarray(n * CHUNK_LEN));
  }
}
  1. Alıcı taraf, veri kanalı mesaj baytlarını tekrar görüntüye dönüştürür ve görüntüyü kullanıcıya gösterir:
function receiveDataChromeFactory() {
  var buf, count;

  return function onmessage(event) {
    if (typeof event.data === 'string') {
      buf = window.buf = new Uint8ClampedArray(parseInt(event.data));
      count = 0;
      console.log('Expecting a total of ' + buf.byteLength + ' bytes');
      return;
    }

    var data = new Uint8ClampedArray(event.data);
    buf.set(data, count);

    count += data.byteLength;
    console.log('count: ' + count);

    if (count === buf.byteLength) {
      // we're done: all data chunks have been received
      console.log('Done. Rendering photo.');
      renderPhoto(buf);
    }
  };
}

function renderPhoto(data) {
  var canvas = document.createElement('canvas');
  canvas.width = photoContextW;
  canvas.height = photoContextH;
  canvas.classList.add('incomingPhoto');
  // trail is the element holding the incoming images
  trail.insertBefore(canvas, trail.firstChild);

  var context = canvas.getContext('2d');
  var img = context.createImageData(photoContextW, photoContextH);
  img.data.set(data);
  context.putImageData(img, 0, 0);
}

Kodu alın

work klasörünüzün içeriğini step-06 klasörünün içeriğiyle değiştirin. work klasöründeki index.html dosyanız artık aşağıdaki gibi görünmelidir**:**

<!DOCTYPE html>
<html>

<head>

  <title>Realtime communication with WebRTC</title>

  <link rel="stylesheet" href="/css/main.css" />

</head>

<body>

  <h1>Realtime communication with WebRTC</h1>

  <h2>
    <span>Room URL: </span><span id="url">...</span>
  </h2>

  <div id="videoCanvas">
    <video id="camera" autoplay></video>
    <canvas id="photo"></canvas>
  </div>

  <div id="buttons">
    <button id="snap">Snap</button><span> then </span><button id="send">Send</button>
    <span> or </span>
    <button id="snapAndSend">Snap &amp; Send</button>
  </div>

  <div id="incoming">
    <h2>Incoming photos</h2>
    <div id="trail"></div>
  </div>

  <script src="/socket.io/socket.io.js"></script>
  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="js/main.js"></script>

</body>

</html>

Bu codelab'i work dizininden takip etmiyorsanız step-06 klasörü veya mevcut çalışma klasörünüz için bağımlılıkları yüklemeniz gerekebilir. Çalışma dizininizden aşağıdaki komutu çalıştırmanız yeterlidir:

npm install

Yüklendikten sonra Node.js sunucunuz çalışmıyorsa work dizininden aşağıdaki komutu çağırarak sunucuyu başlatın:

node index.js

Socket.IO'yu uygulayan index.js sürümünü kullandığınızdan emin olun ve değişiklik yaparsanız Node.js sunucunuzu yeniden başlatmayı unutmayın. Node ve Socket IO hakkında daha fazla bilgi için "Set up a signaling service to exchange messages" (Mesaj alışverişi için sinyal hizmeti ayarlama) bölümünü inceleyin.

Gerekirse uygulamanın web kameranızı kullanmasına izin vermek için İzin ver düğmesini tıklayın.

Uygulama, rastgele bir oda kimliği oluşturur ve bu kimliği URL'ye ekler. Adres çubuğundaki URL'yi yeni bir tarayıcı sekmesinde veya penceresinde açın.

Snap & Send (Fotoğraf Çek ve Gönder) düğmesini tıklayın, ardından sayfanın alt kısmındaki diğer sekmede Gelen alanına bakın. Uygulama, fotoğrafları sekmeler arasında aktarır.

Aşağıdakine benzer bir tablo görürsünüz:

911b40f36ba6ba8.png

Bonus puanlar

  1. Herhangi bir dosya türünün paylaşılabilmesi için kodu nasıl değiştirebilirsiniz?

Daha fazla bilgi

  • MediaStream Image Capture API: Fotoğraf çekmek ve kameraları kontrol etmek için kullanılan bir API. Yakında tarayıcınızda kullanıma sunulacak.
  • Ses ve video kaydı için MediaRecorder API: demo, belgeler.

Öğrendikleriniz

  • Tuval öğesini kullanarak fotoğraf çekme ve fotoğraftaki verileri alma
  • Bu verileri uzak bir kullanıcıyla nasıl paylaşacağınız.

Bu adımın tam sürümü step-06 klasöründe yer almaktadır.

10. Tebrikler

Gerçek zamanlı video akışı ve veri alışverişi yapmak için bir uygulama geliştirdiniz.

Öğrendikleriniz

Bu codelab'de şunları öğrendiniz:

  • Web kameranızdan video alma
  • RTCPeerConnection ile video yayınlama.
  • RTCDataChannel ile veri akışı yapın.
  • Mesaj alışverişi için bir sinyal hizmeti ayarlayın.
  • Eşler arası bağlantı ve sinyalleşmeyi birleştirin.
  • Fotoğraf çekip veri kanalı üzerinden paylaşma

Sonraki adımlar

Daha fazla bilgi

  • WebRTC'yi kullanmaya başlamak için çeşitli kaynaklara webrtc.org adresinden ulaşabilirsiniz.