Course Outline
Managing Media Devices
1. Managing Browser Permissions via navigator.permissions
- Accessing hardware:
- Webcam
- Microphone
- Optional permissions:
- Geolocation
- Notifications
- Clipboard (read/write)
- Querying permissions and checking status
- Understanding limitations and browser compatibility
2. Reading Media Devices with navigator.mediaDevices
- Enumerating devices
- Managing device changes
3. Ensuring Cross-browser Compatibility
- API implementation:
- navigator.permissions.query()
- navigator.mediaDevices.enumerateDevices()
- getUserMedia()
- Strategies for Safari fallback
4. Media Device Handling
- Device initialization: getUserMedia(constraints)
- Configuring media device constraints
- Starting and stopping media streams
- Handling device changes
5. Recording Devices with MediaRecorder
- Starting and stopping streaming and recording
- Downloading .webm files
- Real-time waveform preview
Optional Add-ons:
- Saving audio in .wav format using ScriptProcessorNode
- Visualizing audio FFT spectrum
- Displaying volume levels in decibels
- Implementing voice recognition with webkitSpeechRecognition
Establishing Peer Connections
1. Signaling Servers
- Options for bidirectional channels:
- WebSocket
- Socket.io
- SignalR
- Defining message structures
- Developing a simplified WebRTC client
- Executing a complete signaling flow
2. Video Chat Implementation via WebRTC
- Architecture: Node.js combined with ws
- WebRTC client setup using RTCPeerConnection
- Conducting local end-to-end testing
Optional Features:
- Call termination (closing connections and stopping media)
- Group calling capabilities (multi-user rooms)
- Simple token-based authentication
3. Screen Sharing
- Utilizing getDisplayMedia()
- Architectural design and configuration options
4. Session Description Protocol (SDP)
- Overview and content details
- Reading and interpreting SDP data
- Managing codecs:
- Audio and Video codecs
- Negotiation and control mechanisms
- Implementing fallback strategies
5. Analyzing WebRTC Statistics with getStats()
- Understanding statistics types
- Interpreting statistical data
- Monitoring live bitrate and jitter via charts
- Strategies for quality adaptation
6. Comprehensive Topic Coverage
- Hands-on use-case
Requirements
This course is designed for frontend and full-stack developers, technical architects, and engineers tasked with building browser-based real-time communication features such as video chat, screen sharing, or audio streaming. Participants are expected to have a working knowledge of JavaScript and web technologies, with optional experience in Node.js and WebSocket-based communication being beneficial.
Testimonials (3)
I really enjoyed learning about AI attacks and the tools out there to begin practicing and actively using for security testing. I took a lot of knowledge away which I didn't have at the beginning and the course met what I hoped it would be. My favorite part shown from the training was Comet Browser and was amazed at what it could do. Definitely something will be looking into more. Overall it was a great course and enjoyed learning all OWASP GenAI Top 10.
Patrick Collins - Optum
Course - OWASP GenAI Security
Hands-on, exercises, in-person helping and questioning.
Jose Paulos - INESC TEC
Course - Tailwind CSS
That every technical lesson came with multiple practical exercises to nail down the concepts.
