Webcam freezing issue in Safari (iOS and OSX)

p5.js Libraries
1

Hi,

Experiencing a weird issue trying to run a facetracking sketch across platforms. In Chrome and Firefox the project works perfectly. In Safari (both desktop and mobile versions), however, the webcam sometimes refuses to update, getting stuck on a single frame. This typically happens right after the sketch has finished loading. The issue seems to happen most often when the sketch is loaded from the server for the first time; when the page is refreshed (and, i assume, the cached files are loaded), the problem does not occur as often.

Here’s the project: https://p5js-eyes.glitch.me

And here’s the source code: https://glitch.com/edit/#!/p5js-eyes?path=sketch.js%3A187%3A1

I’ve added a function that refreshes the webcam capture on click / touch, which sometimes repeats the issue, and sometimes causes the webcam to come back to life.

I’m not seeing any errors in the console when this freezing happens. Can anyone shed any light on how I might go about debugging this?

Thanks!

2

Following up,

Was able to resolve this by lowering the frameRate to 12. This snippet will detect whether the browser is Safari and then lower the framerate.

  var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));

   if(isSafari){ // fix to keep the video capture from locking up in safari
   console.log('safari fix');
     frameRate(12); // seems to make it work in safari
   }