Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Implementasi Aplikasi Video Call Menggunakan WebRTC

688 views

Published on

Implementasi aplikasi video call dalam kehidupan sehari-hari yang dapat dikembangkan menggunakan WebRTC. Materi ini juga mencakup pengenalan tentang WebRTC dan bagaimana WebRTC bekerja.

Disampaikan pada acara PHP Indonesia: Technology Update and Trend 2016

Published in: Technology
  • Be the first to comment

Implementasi Aplikasi Video Call Menggunakan WebRTC

  1. 1. Implementasi Aplikasi Video Call Menggunakan WebRTC Fitra Aditya fitra@qiscus.com
  2. 2. Perkenalan ● Fitra Aditya ● Software Engineer di ● Kontak – Email: fitra@qiscus.com – FB: https://facebook.com/fitra.aditya
  3. 3. Ada yang pernah mendengar tentang WebRTC?
  4. 4. Ada yang pernah mengunakan aplikasi di bawah ini?
  5. 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. 6. WebRTC
  7. 7. WebRTC merupakan protokol yang bertujuan untuk menghadirkan fitur real-time communication pada web browser secara peer- to-peer. Apa itu WebRTC?
  8. 8. Era Sebelum WebRTC
  9. 9. WebRTC Desktop: 17+ Mobile: 29+ Desktop: 18+ Mobile: 24+ Desktop: 18+ Mobile: 20+ *) Microsoft Edge menggunakan ORTC (WebRTC compatible)
  10. 10. Mengapa harus WebRTC? ● Open source ● Tanpa plugin ● Mudah diimplementasikan menggunakan API standar
  11. 11. WebRTC pada mobile apps IOS and Android
  12. 12. Codec ● Video: VP8, H.264, VP9 ● Audio: Opus, G.711
  13. 13. Implementasi WebRTC
  14. 14. Bisnis
  15. 15. Pendidikan
  16. 16. Kesehatan
  17. 17. Personal
  18. 18. Bagaimana WebRTC bekerja?
  19. 19. WebRTC API Media Stream Peer Connection Data Channel
  20. 20. Media Stream Camera and Microphone
  21. 21. 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); });
  22. 22. Media Stream API HTTP vs HTTPS Chrome: HTTPS Firefox / Opera: HTTP
  23. 23. Peer Connection
  24. 24. Peer Connection NAT / FIREWALL
  25. 25. 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
  26. 26. STUN (Simple Traversal of UDP through NAT) Berapa nomor IP publik saya? IP publik kamu adalah xx.xx.xx.xx
  27. 27. Peer Connection (menggunakan STUN)
  28. 28. TURN (Traversal Using Relay NAT)
  29. 29. Peer Connection (menggunakan STUN)
  30. 30. Peer Connection Signaling Process WebSocket, AJAX, SIP Data: SDP (Session Data Protocol) - Informasi jaringan (IP publik, port) - Video dan audio codec
  31. 31. Peer Connection Signaling Process WebSocket / AJAX / SIP LocalDescription Sends offer
  32. 32. Peer Connection Signaling Process WebSocket / AJAX / SIP LocalDescription RemoteDescription Receives offer
  33. 33. Peer Connection Signaling Process WebSocket / AJAX / SIP LocalDescription LocalDescription RemoteDescription Sends answer
  34. 34. Peer Connection Signaling Process WebSocket / AJAX / SIP LocalDescription RemoteDescription LocalDescription RemoteDescription Receives answer
  35. 35. Peer Connection Signaling Process WebSocket / AJAX / SIP LocalDescription RemoteDescription LocalDescription RemoteDescription
  36. 36. Peer Connection
  37. 37. Peer Connection
  38. 38. Peer Connection
  39. 39. Bandwith ● Video – 180p : 0.1 – 0.5 Mbps – 360p : 0.5 – 1 Mbps – 720p : 1 – 2 Mbps ● Audio – 0.06 – 0.51 Mbps
  40. 40. Libraries
  41. 41. Free Application ● https://appear.in/ ● https://appr.tc/
  42. 42. 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/
  43. 43. Materi ● https://github.com/fitraditya/php-indonesia-webr tc
  44. 44. Terima Kasih

×