0

I have been through many similar QnAs and articles. Overall it seems the only solution is to connect the userMedia stream to video then use a timer function to take snapshot from the video and put it on a canvas. Now manipulate the stuff on canvas and stream that.

The problem is the timer function. If I use setTimeout or requestAnimationFrame then the video stream becomes choppy or completely stops if the user moves away from the tab. I somehow worked around that using Web worker (using below code).

      (function () {
        let blob = new Blob([`
        onmessage = function(oEvent) {
          setTimeout(() => postMessage('tick'), oEvent[1]);
        };
        `],{type: 'text/javascript'});
        window.myTimeout = function (cb, t) {
          const worker = new Worker(window.URL.createObjectURL(blob));
          worker.onmessage = function(oEvent) {
            cb();
            worker.terminate();
          };
          worker.postMessage(['start', t]);
        };
      }());

However this works well on Chrome but on Safari (OSX) this fails completely. Safari seems to pause the JS engine completely. This issue does not happen if I stream userMedia directly.

AppleGrew
  • 9,302
  • 24
  • 80
  • 124
  • Seems related https://stackoverflow.com/questions/41768173/safari-javascript-settimeout-stops-when-minimized – A. Meshu Jul 22 '21 at 20:18
  • 1
    Timers get clamped when the tab is not in focus. You might want to try the new (still in origin trial) breakout box API described in https://web.dev/mediastreamtrack-insertable-media-processing/ – Philipp Hancke Jul 23 '21 at 05:27

0 Answers0