implementasi aplikasi video call menggunakan webrtc
TRANSCRIPT
Perkenalan
● Fitra Aditya● Software Engineer di● Kontak
– Email: [email protected]
– 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
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