I debug browser live cameras in this order: ACL, mount, then the network tab

Description and use

Step‑by‑step debugging workflow for live camera streams in browsers, covering ACL checks, player mounting, and session lifecycle management.

Live IP camera streams appear black or fail in web apps due to permission, mounting, or session lifecycle issues.

A repeatable, browser‑compatible debugging workflow that reduces time to identify ACL, mounting, and session lifecycle issues in live camera streams.

List cameras via tenant‑scoped API
User clicks Watch
POST /live to check role and capability
Handle 403/409/other errors
Receive session object
Mount player with player.mount(el).play()
Implement cleanup in unmount (destroy)
Use AbortController to cancel fetch on unmount
Check network panel order: POST status, media/websocket start, cancellation, race conditions
Test on Chrome, Safari iOS, Firefox
Use local mocks to simulate 403/409 and session responses
Pin player package and test teardown
Turn off console logs in production

I debug browser live cameras in this order: ACL, mount, then the network tab

List cameras from my API (tenant scoped).

Abort the fetch and destroy the player. One or the other is how races sneak through.