Build Web Based Video Call Application Using WebRTC

Build Web Based Video Call Application
Using WebRTC
Fitra Aditya
Sabtu, 24 Oktober 2015

● Fitra Aditya
● Software Engineer di

WebRTC
● WebRTC
– Protokol
– Open source project

WebRTC
● WebRTC merupakan protokol yang
memungkinkan web browser untuk melakukan
panggilan audio, video, serta pertukaran data
lainnya menggunakan jalur peer-to-peer tanpa
perlu tambahan plugin.

WebRTC
● WebRTC juga merupakan proyek open source
yang menyediakan sekumpulan API bagi web
browser dan aplikasi mobile untuk melakukan
komunikasi secara real-time.
● Proyek WebRTC digawangi oleh Google, serta
didukung oleh Mozilla, Opera, serta beberapa
perusahaan lainnya.

Mengapa WebRTC?
● Cukup menggunakan web browser
● Tidak perlu menggunakan plugin tambahan
● Open source

Bagaimana WebRTC Bekerja?
Alice Bob
Signaling
Server
Media
SDP SDP

Alice Bob
Signaling
Server
Media
SDP SDP
NAT NAT

Alice Bob
Signaling
Server
Media
SDP SDP
NAT NAT
ICE Server ICE Server

● Misalkan Alice dan Bob ingin melakukan video
chat menggunakan WebRTC
● Alice dan Bob perlu bertukar informasi mengenai
informasi jaringan internet
● Proses ini dinamakan dengan 'finding candidates'
● Alice dan Bob juga perlu bertukar informasi
mengenai media yang dimiliki
● Proses ini dinamakan dengan 'offer – answer'

Alice Bob
Signaling
Server
Media
SDP SDP
NAT NAT
ICE Server ICE Server
Finding Candidates
Offer - Answer
WebRTC Connection

● Finding candidates
– Alice
● Buat peer object untuk mendapatkan candidates
menggunakan ICE (interactive connectivity
establishment) → ICE candidates
● Kirim ICE candidates menggunakan signaling channel
(contoh: websocket)
– Bob
● Simpan ICE candidates yang diterima untuk digunakan
kemudian

pc = new RTCPeerConnection(...);
pc.onicecandidate = function (event) {
...
};
pc = new RTCPeerConnection(...);
pc.addIceCandidate(new RTCIceCandidate(...));
Alice
Bob

● Offer – answer
– Alice
● Panggil createOffer() → localDescription
● Kirim localDescription ke Bob
– Bob
● Simpan localDescription yang dikirim oleh Alice → remoteDescription
● Panggil createAnswer() → localDescription
● Kirim localDescription ke Alice
– Alice
● Simpan localDescription yang dikirim oleh Bob → remoteDescription
– Ping!

if (isCaller)
  pc.createOffer(gotDescription);
else
  pc.createAnswer(pc.remoteDescription, gotDescription);
function gotDescription(localdescription) {
  pc.setLocalDescription(localdescription);
  // send localdescription
}
if (localdescription) {
  pc.setRemoteDescription(
    new RTCSessionDescription(localdescription)
  );
}

15 Menit dengan WebRTC
● Membangun aplikasi one-to-one video call
berbasis web dengan WebRTC
– Kemampuan HTML dan Javascript dibutuhkan
untuk membangun aplikasi ini

15 Menit dengan WebRTC
● Langkah-langkah
– Ambil audio dan video menggunakam microphone
dan webcam
– Buat sambungan peer-to-peer antar web browser
– Kirim video antar peer

getUserMedia()
● Merupakan API untuk mengambil video maupun
audio dari hardware (webcam dan microphone)
untuk ditampilkan ke dalam halaman web
● Tiap web browser memiliki implementasi yang
berbeda
– navigator.getUserMedia
– navigator.webkitGetUserMedia
– navigator.mozGetUserMedia

getUserMedia()
● Contoh: geekcamp-webrtc/satu/index.html
navigator.getUserMedia({ video: true, audio: true }, successCallback, errorCallback);
function successCallback (stream) {
  var video = document.querySelector('#localVideo');
  video.src = window.URL.createObjectURL(stream);
}
function errorCallback (error) {
  alert('getUserMedia error: ', error);
}

RTCPeerConnection()
● Merupakan API untuk membangun sambungan
peer-to-peer antar web browser
– ICE candicates
– NAT traversal
● Sambungan peer-to-peer ini digunakan untuk
melakukan panggilan audio maupun video
– Termasuk juga encode / decode audio dan video

RTCPeerConnection()
● Membutuhkan signaling server untuk membuat
sambungan peer-to-peer di awal
– Websocket / Socket.io
● Membutuhkan ICE servers untuk mendapatkan
ICE candidates
– STUN / TURN

RTCPeerConnection()
● Contoh tanpa signaling server dan ICE servers:
geekcamp-webrtc/dua/index.html
● Contoh menggunakan signaling server dan ICE
servers: geekcamp-webrtc/tiga/index.html

Open Source WebRTC Library
● SimpleWebRTC
● EasyRTC
● RTC.io

Referensi
● www.html5rocks.com/en/tutorials/getusermedia/i
ntro/
● http://www.html5rocks.com/en/tutorials/webrtc/b
asics/
● http://www.webrtc.org/

Terima Kasih
● http://www.slideshare.net/fitraaditya/build-web-b
ased-video-call-application-using-webrtc
● https://github.com/fitraditya/geekcamp-webrtc

Build Web Based Video Call Application Using WebRTC

Recommended

More Related Content

Similar to Build Web Based Video Call Application Using WebRTC (20)

Build Web Based Video Call Application Using WebRTC