課程簡介

Day 1 – Media Devices Handling

1. Browser Permissions with navigator.permissions

  • Accessing hardware:
    • Webcam
    • Microphone
  • Optional permissions:
    • Geolocation
    • Notifications
    • Clipboard (read/write)
  • Permission querying and status
  • Limitations and browser compatibility
  • Hands-on use-case

2. Reading Media Devices with navigator.mediaDevices

  • Device enumeration
  • Handling device changes
  • Hands-on use-case

3. Cross-browser Compatibility

  • API usage:
    • navigator.permissions.query()
    • navigator.mediaDevices.enumerateDevices()
    • getUserMedia()
  • Safari fallback strategy
  • Hands-on use-case

4. Media Device Handling

  • Device initialization: getUserMedia(constraints)
  • Media device constraints
  • Starting and stopping media streams
  • Handling device changes
  • Hands-on use-case

5. Recording Devices with MediaRecorder

  • Start/stop streaming and recording
  • Download .webm file
  • Real-time waveform preview
  • Hands-on use-case

Optional Add-ons:

  • Save in .wav format using ScriptProcessorNode
  • Audio FFT spectrum visualization
  • Volume bar in decibels
  • Voice recognition with webkitSpeechRecognition

Day 2 – Peer Connection

1. Signaling Servers

  • Bidirectional channel options:
    • WebSocket
    • Socket.io
    • SignalR
  • Message structure
  • Simplified WebRTC client
  • Full signaling flow
  • Hands-on use-case

2. Video Chat via WebRTC

  • Architecture: Node.js + ws
  • WebRTC client: RTCPeerConnection
  • Local E2E testing
  • Hands-on use-case

Optional Features:

  • Call hang-up (close connection, stop media)
  • Group calling (multi-user rooms)
  • Token-based simple authentication

3. Screen Sharing

  • Use of getDisplayMedia()
  • Architecture and options
  • Hands-on use-case

4. Session Description Protocol (SDP)

  • Introduction and contents
  • Reading and interpreting SDP
  • Codecs:
    • Audio & Video
    • Negotiation and control
    • Fallback strategies
  • Hands-on use-case

5. WebRTC Statistics with getStats()

  • Types of statistics
  • How to interpret stats
  • Live bitrate/jitter charts
  • Quality adaptation strategies
  • Hands-on use-case

 

最低要求

This course is ideal for frontend and full-stack developers, technical architects, and engineers building browser-based real-time communication features like video chat, screen sharing, or audio streaming. Participants should have a working knowledge of JavaScript and web technologies, with optional experience in Node.js and WebSocket-based communication.
 14 時間:

客戶評論 (5)

課程分類