Thank you for sending your enquiry! One of our team members will contact you shortly.
Thank you for sending your booking! One of our team members will contact you shortly.
Course Outline
Hari 1 – Pengelolaan Perangkat Media
1. Izin Browser dengan navigator.permissions
- Mengakses perangkat keras:
- Kamera Web
- Mikrofon
- Izin opsional:
- Lokasi Geografis
- Pemberitahuan
- Clipboard (baca/tulis)
- Pertanyaan dan status izin
- Batasan dan kompatibilitas browser
- Kasus penggunaan praktis
2. Membaca Perangkat Media dengan navigator.mediaDevices
- Pencacahan perangkat
- Mengelola perubahan perangkat
- Kasus penggunaan praktis
3. Kompatibilitas Multi-Browser
- Penggunaan API:
- navigator.permissions.query()
- navigator.mediaDevices.enumerateDevices()
- getUserMedia()
- Taktik penggantian Safari
- Kasus penggunaan praktis
4. Pengelolaan Perangkat Media
- Inisialisasi perangkat: getUserMedia(constraints)
- Kendala perangkat media
- Mengawali dan menghentikan aliran media
- Mengelola perubahan perangkat
- Kasus penggunaan praktis
5. Perekaman Perangkat dengan MediaRecorder
- Mulai/hentikan streaming dan perekaman
- Mendownload file .webm
- Tampilan pratinjau bentuk gelombang secara real-time
- Kasus penggunaan praktis
Fitur Tambahan Opsional:
- Menyimpan dalam format .wav menggunakan ScriptProcessorNode
- Vizualisasi spektrum FFT audio
- Balok volume dalam desibel
- Pengenalan suara dengan webkitSpeechRecognition
Hari 2 – Koneksi Peer
1. Server Sinyal
- Opsi saluran dua arah:
- WebSocket
- Socket.io
- SignalR
- Struktur pesan
- Klien WebRTC yang disederhanakan
- Alur sinyal lengkap
- Kasus penggunaan praktis
2. Video Chat melalui WebRTC
- Arsitektur: Node.js + ws
- Klien WebRTC: RTCPeerConnection
- Pengujian E2E lokal
- Kasus penggunaan praktis
Fitur Tambahan Opsional:
- Mengakhiri panggilan (tutup koneksi, hentikan media)
- Panggilan grup (ruangan multi-pengguna)
- Otentikasi sederhana berbasis token
3. Berbagi Layar
- Menggunakan getDisplayMedia()
- Arsitektur dan opsi
- Kasus penggunaan praktis
4. Protokol Deskripsi Sesi (SDP)
- Pendahuluan dan isi
- Membaca dan memahami SDP
- Kodek:
- AUDIO & VIDEO
- Negosiasi dan kontrol
- Taktik penggantian
- Kasus penggunaan praktis
5. WebRTC Statistics dengan getStats()
- Jenis statistik
- Cara memahami statistik
- Grafik bitrate/jitter langsung
- Taktik adaptasi kualitas
- Kasus penggunaan praktis
Requirements
Materi ini ideal untuk pengembang frontend dan full-stack, arsitek teknis, serta insinyur yang membangun fitur komunikasi real-time berbasis browser seperti obrolan video, berbagi layar, atau streaming audio. Peserta sebaiknya memiliki pengetahuan praktis tentang JavaScript dan teknologi web, dengan pengalaman opsional dalam Node.js dan komunikasi berbasis WebSocket.
14 Hours
Testimonials (5)
Saya suka bagaimana Gunnar menulis hampir semua kode dengan cepat saat kami melakukannya, tetapi ada banyak materi yang telah disiapkan di google drive yang dapat saya rujuk setelah pelatihan. Kode yang ditulis Gunnar berdasarkan contoh data yang saya berikan sebelumnya juga sangat berguna dan juga membuat pelatihan relevan dengan kumpulan data kami sendiri.
Ranvir - Schroders Personal Wealth
Course - Visual Studio Code
Machine Translated
Topics that were discussed, lots of live code examples, trainers attitude towards group
Weronika - ATOS PGS sp. z o.o.
Course - Reactive Programming with Angular RxJS
Though an online training, the interactivity with the trainer was remarkable and was always available to provide valuable sources to complement the training. I am very satisfied.
Nuno Marques - MULTICERT, S.A.
Course - Functional Reactive Programming with Java 9 and RxJava
Trainer's enthusiasm around the subject
Matthew Fowles - AGRO Merchants Whitchurch Limited
Course - Web Application Development in PHP
Pacing, depth, and explanations were all superb. It's clear Scott is an expert on the subject and learning from him was super enjoyable.
