Course Outline
Handling Media Devices
1. Browser Permissions via navigator.permissions
- Accessing hardware:
- Webcam
- Microphone
- Optional permissions:
- Geolocation
- Notifications
- Clipboard (read/write)
- Querying permission status
- Limitations and browser compatibility considerations
2. Accessing Media Devices with navigator.mediaDevices
- Listing available devices
- Managing device changes
3. Cross-browser Compatibility
- API implementation:
- navigator.permissions.query()
- navigator.mediaDevices.enumerateDevices()
- getUserMedia()
- Strategies for Safari fallbacks
4. Managing Media Devices
- Initializing devices: getUserMedia(constraints)
- Defining media constraints
- Initiating and terminating media streams
- Responding to device changes
5. Recording with MediaRecorder
- Controlling streaming and recording start/stop
- Downloading recordings in .webm format
- Real-time waveform visualization
Optional Add-ons:
- Converting to .wav format using ScriptProcessorNode
- Visualizing audio FFT spectrum
- Displaying volume levels in decibels
- Voice recognition integration with webkitSpeechRecognition
Peer Connection
1. Signaling Servers
- Options for bidirectional channels:
- WebSocket
- Socket.io
- SignalR
- Structuring messages
- Building a simplified WebRTC client
- Completing the full signaling workflow
2. Video Chat via WebRTC
- Architecture: Node.js + ws
- WebRTC client implementation: RTCPeerConnection
- Local end-to-end testing
Optional Features:
- Ending calls (closing connections and stopping media)
- Group calling (support for multi-user rooms)
- Simple token-based authentication
3. Screen Sharing
- Utilizing getDisplayMedia()
- Architectural design and options
4. Session Description Protocol (SDP)
- Overview and components
- Interpreting SDP data
- Codecs:
- Audio and Video codecs
- Negotiation and control
- Implementation of fallback strategies
5. WebRTC Statistics via getStats()
- Understanding different types of statistics
- Interpreting statistical data
- Visualizing live bitrate and jitter
- Strategies for quality adaptation
6. All topics are
- Applied through hands-on use cases
Requirements
This course is tailored for frontend and full-stack developers, technical architects, and engineers who are creating real-time communication features for browsers, such as video chat, screen sharing, or audio streaming. Participants are expected to possess a solid understanding of JavaScript and web technologies, with prior experience in Node.js and WebSocket-based communication being advantageous but not mandatory.
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.
