Course Outline
Managing Media Devices
1. Managing Browser Permissions via navigator.permissions
- Accessing hardware components:
- Webcam
- Microphone
- Optional permissions:
- Geolocation
- Notifications
- Clipboard (read/write)
- Querying permission statuses
- Limitations and browser compatibility considerations
2. Accessing Media Devices with navigator.mediaDevices
- Enumerating devices
- Managing device change events
3. Ensuring Cross-browser Compatibility
- API implementation:
- navigator.permissions.query()
- navigator.mediaDevices.enumerateDevices()
- getUserMedia()
- Strategies for Safari compatibility
4. Handling Media Devices
- Initializing devices: getUserMedia(constraints)
- Setting media device constraints
- Controlling media stream start and stop
- Handling dynamic device changes
5. Recording Media with MediaRecorder
- Controlling streaming and recording states
- Downloading .webm files
- Displaying real-time waveform previews
Optional Enhancements:
- Exporting to .wav format using ScriptProcessorNode
- Visualizing audio FFT spectrum
- Displaying volume levels in decibels
- Integrating voice recognition via webkitSpeechRecognition
Peer Connections
1. Setting Up Signaling Servers
- Options for bidirectional channels:
- WebSocket
- Socket.io
- SignalR
- Structuring messages
- Implementing a simplified WebRTC client
- Executing a complete signaling flow
2. Enabling Video Chat via WebRTC
- Architecture: Node.js combined with ws
- WebRTC client implementation using RTCPeerConnection
- Conducting local end-to-end testing
Optional Features:
- Ending calls (closing connections and stopping media)
- Facilitating group calls (multi-user rooms)
- Implementing simple token-based authentication
3. Implementing Screen Sharing
- Utilizing getDisplayMedia()
- Architectural approaches and options
4. Understanding the Session Description Protocol (SDP)
- Overview and key components
- Reading and interpreting SDP data
- Managing codecs:
- Audio & Video
- Negotiation and control
- Fallback strategies
5. Monitoring WebRTC Statistics with getStats()
- Types of available statistics
- Interpreting statistical data
- Creating live charts for bitrate and jitter
- Strategies for quality adaptation
6. Practical Application
- Hands-on case studies
Requirements
This course is tailored for frontend and full-stack developers, technical architects, and engineers who are building browser-based real-time communication features such as video conferencing, screen sharing, or audio streaming. Participants are expected to possess a solid understanding of JavaScript and web technologies, with any prior experience in Node.js or WebSocket-based communication being advantageous.
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.
