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

Описание и применение

Пошаговый рабочий процесс отладки потоков живых камер в браузере, включающий проверку ACL, монтирование плеера и управление сессией.

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.