Implementasi Aplikasi Video CallMenggunakan WebRTC

Fitra Adityafitra@qiscus.com

Perkenalan

● Fitra Aditya● Software Engineer di● Kontak

– Email: fitra@qiscus.com

– FB: https://facebook.com/fitra.aditya

Ada yang pernah mendengar tentang WebRTC?

Ada yang pernah mengunakan aplikasi di bawah ini?

Perkembangan teknologi komunikasi real-time pada web

http://venturebeat.com/2012/08/13/webrtc-is-almost-here-and-it-will-change-the-web/http://venturebeat.com/2012/08/13/webrtc-is-almost-here-and-it-will-change-the-web/

WebRTC

WebRTC merupakan protokol yang bertujuan untuk menghadirkan fitur real-time communication pada web browser secara peer-to-peer.

Apa itu WebRTC?

Era Sebelum WebRTC

WebRTC

Desktop: 17+Mobile: 29+

Desktop: 18+Mobile: 24+

Desktop: 18+Mobile: 20+

*) Microsoft Edge menggunakan ORTC (WebRTC compatible)

Mengapa harus WebRTC?

● Open source● Tanpa plugin● Mudah diimplementasikan menggunakan API

standar

WebRTC pada mobile apps

IOS and Android

Codec

● Video: VP8, H.264, VP9● Audio: Opus, G.711

Implementasi WebRTC

Bisnis

Pendidikan

Kesehatan

Personal

Bagaimana WebRTC bekerja?

WebRTC API

Media Stream

Peer Connection

Data Channel

Media Stream

Camera and Microphone

Media Stream API

var localVideo = document.querySelector('#local-video');

navigator.mediaDevices.getUserMedia({ video: true })

.then(function(stream) {

localStream = stream;

localVideo.srcObject = localStream;

})

.catch(function(error) {

alert('Error: ', error);

});

Media Stream API

HTTP vs HTTPS

Chrome: HTTPSFirefox / Opera: HTTP

Peer Connection

Peer Connection

NAT / FIREWALL

Peer Connection

● Masalah– Berapa nomor IP publik saya?

– Port mana yang akan saya gunakan?

– Saya tidak bisa melewati firewall!

– Bagaimana saya memberitahukan IP publik dan port yang saya gunakan kepada lawan?

● Solusi– ICE Server

● STUN● TURN

STUN(Simple Traversal of UDP through NAT)

Berapa nomor IP publik saya?

IP publik kamu adalah xx.xx.xx.xx

Peer Connection(menggunakan STUN)

TURN(Traversal Using Relay NAT)

Peer Connection(menggunakan STUN)

Peer ConnectionSignaling Process

WebSocket, AJAX, SIP

Data:SDP (Session Data Protocol)- Informasi jaringan (IP publik, port)- Video dan audio codec

Peer ConnectionSignaling Process

WebSocket / AJAX / SIP

LocalDescription

Sends offer

Peer ConnectionSignaling Process

WebSocket / AJAX / SIP

LocalDescription

RemoteDescription

Receives offer

Peer ConnectionSignaling Process

WebSocket / AJAX / SIP

LocalDescription LocalDescription

RemoteDescription

Sends answer

Peer ConnectionSignaling Process

WebSocket / AJAX / SIP

LocalDescription

RemoteDescription

LocalDescription

RemoteDescription

Receives answer

Peer ConnectionSignaling Process

WebSocket / AJAX / SIP

LocalDescription

RemoteDescription

LocalDescription

RemoteDescription

Peer Connection

Peer Connection

Peer Connection

Bandwith

● Video– 180p : 0.1 – 0.5 Mbps

– 360p : 0.5 – 1 Mbps

– 720p : 1 – 2 Mbps

● Audio– 0.06 – 0.51 Mbps

Libraries

Free Application

● https://appear.in/● https://appr.tc/

Referensi

● http://webrtc.org● http://www.html5rocks.com/en/tutorials/webrtc/b

asics/● https://www.pkcsecurity.com/blog#webrtc-flow● https://www.webrtc-experiment.com/

Materi

● https://github.com/fitraditya/php-indonesia-webrtc

Terima Kasih