API ArcadeISSUE #5 of 23

media devices · getUserMedia

ApiaVSLegacy Larry

Apia saysgetUserMedia requests camera and microphone access, returning a MediaStream.

navigator.mediaDevices.getUserMedia({ video: true, audio: true }) prompts for permission and resolves to a MediaStream you can show in a <video> (video.srcObject = stream) or feed to WebRTC/recording. Requires HTTPS and a user gesture. Always stop tracks (track.stop()) when done to release the camera light.

Power-ups you unlock

getUserMedia({video,audio}) → MediaStream
Show via video.srcObject = stream
HTTPS + permission + user gesture required
Stop tracks when done to release devices

Legacy Larry attacks — common mistakes

Forgetting HTTPS (API unavailable)
Never stopping tracks (camera stays on)
Not handling permission denial

Boss battleSketch requesting the camera and showing it in a <video>.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre>const stream = await navigator.mediaDevices.getUserMedia({ video: true });
videoEl.srcObject = stream;
// later: stream.getTracks().forEach(t => t.stop());</pre></body></html>

▶ Open the interactive comic issue

‹ Webrtc · Peer-To-Peer Media Notifications · The Browser Notification Api ›