2

I am working on a webrtc comminucation app, as part of this app I need to make changes (resize, change background, blue background ,...) to the webcam image before sending it to the subscribers ...

This is my solution for now :
1 - set stream to a in memory video element
2 - when play starts start a loop with settimeout to repeat No.3
3 - render video on canvas
4 - capture canvas stream

So far so good.
But when the tab is inactive/hidden/invisible the settimeout is throttled to 1 loop per second :( ...

Only other solution I have found is to use MediaStreamTrackProcessor , It works but lacks the browser support that I need (Firefox, Safari,...)

I tried using webworkers but can't sent a stream to worker and can't capture a stream inside a worker neither :(

So Any way to send MediaStream or its frames(continuously) to webworker ? Or Is there anyway (cross browser) to get frames from MediaStream continuously(so I won't need settimeout) ?

Exlord
  • 5,009
  • 4
  • 31
  • 51
  • 2
    The best way would be to [use a TransformStream](https://w3c.github.io/mediacapture-transform/#video-processing) but we're far from "cross browser" status here. So for the time being you can actually use your worker as a timer (currently Workers aren't affected by throttling), or you can use an AudioScheduledSourceNode (not a script processor) which onended will also not be throttled. See this old answer of mine for a demo: https://stackoverflow.com/questions/40687010/canvascapturemediastream-mediarecorder-frame-synchronization/40691112#40691112 – Kaiido May 31 '22 at 02:28
  • @Kaiido Yeah I found the worker timer thingy on another SO answer, using that for now – Exlord May 31 '22 at 04:24

0 Answers0