Dokumen tersebut membahas tentang implementasi aplikasi video call menggunakan WebRTC. WebRTC adalah protokol yang memungkinkan fitur komunikasi real-time seperti video call di browser secara peer-to-peer tanpa plugin. Dokumen tersebut menjelaskan tentang komponen-komponen WebRTC seperti media stream, peer connection, signaling process, dan contoh kode untuk merealisasikan video call menggunakan WebRTC.

1. Implementasi Aplikasi Video Call
Menggunakan WebRTC
Fitra Aditya
fitra@qiscus.com

2. Perkenalan
● Fitra Aditya
● Software Engineer di
● Kontak
– Email: fitra@qiscus.com
– FB: https://facebook.com/fitra.aditya

3. Ada yang pernah mendengar
tentang WebRTC?

4. Ada yang pernah mengunakan
aplikasi di bawah ini?

5. 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/

6. WebRTC

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

8. Era Sebelum WebRTC

9. WebRTC
Desktop: 17+
Mobile: 29+
Desktop: 18+
Mobile: 24+
Desktop: 18+
Mobile: 20+
*) Microsoft Edge menggunakan ORTC (WebRTC compatible)

11. Mengapa harus WebRTC?
● Open source
● Tanpa plugin
● Mudah diimplementasikan menggunakan API
standar

12. WebRTC pada mobile apps
IOS and Android

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

14. Implementasi WebRTC

15. Bisnis

16. Pendidikan

17. Kesehatan

18. Personal

19. Bagaimana WebRTC bekerja?

20. WebRTC API
Media Stream
Peer Connection
Data Channel

21. Media Stream
Camera and Microphone

22. 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);
});

23. Media Stream API
HTTP vs HTTPS
Chrome: HTTPS
Firefox / Opera: HTTP

24. Peer Connection

25. Peer Connection
NAT / FIREWALL

26. 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

27. STUN
(Simple Traversal of UDP through NAT)
Berapa nomor IP publik saya?
IP publik kamu adalah xx.xx.xx.xx

28. Peer Connection
(menggunakan STUN)

29. TURN
(Traversal Using Relay NAT)

30. Peer Connection
(menggunakan STUN)

31. Peer Connection
Signaling Process
WebSocket, AJAX, SIP
Data:
SDP (Session Data Protocol)
- Informasi jaringan (IP publik, port)
- Video dan audio codec

32. Peer Connection
Signaling Process
WebSocket / AJAX / SIP
LocalDescription
Sends offer

33. Peer Connection
Signaling Process
WebSocket / AJAX / SIP
LocalDescription
RemoteDescription
Receives offer

34. Peer Connection
Signaling Process
WebSocket / AJAX / SIP
LocalDescription LocalDescription
RemoteDescription
Sends answer

35. Peer Connection
Signaling Process
WebSocket / AJAX / SIP
LocalDescription
RemoteDescription
LocalDescription
RemoteDescription
Receives answer

36. Peer Connection
Signaling Process
WebSocket / AJAX / SIP
LocalDescription
RemoteDescription
LocalDescription
RemoteDescription

37. Peer Connection

38. Peer Connection

39. Peer Connection

40. Bandwith
● Video
– 180p : 0.1 – 0.5 Mbps
– 360p : 0.5 – 1 Mbps
– 720p : 1 – 2 Mbps
● Audio
– 0.06 – 0.51 Mbps

41. Libraries

42. Free Application
● https://appear.in/
● https://appr.tc/

43. 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/

44. Materi
● https://github.com/fitraditya/php-indonesia-webr
tc

45. Terima Kasih