ch.8 videobooth.js problem

[jpostdesign]

I'm following through the examples in the book, both are great by the way! And I'm running into a problem with Ch.8 videobooth. I looked on the wickedlysmart homepage for ways to contact your team, this seemed the most appropriate.

I was having an awful time getting the video and canvas effects working in real time. Only Chrome was playing the video in real time and updating the effects with the toggles at the same time. Firefox & Safari both had an issue where I would hit play, hear audio but no video would be updated, hit pause, then play again, then a single frame of video would be rendered with the effects. I'm hosting off localserver and experimented on my own website so file:// isn't the problem.

I think the problem is with requestAnimationFrame. When I reset to the old way of setTimeout, things seemed to work better. After fiddling around, I could only deduce that requestAnimationFrame needed some kind of intervall call, since it was only updating when I hit the pause and then the play button.

After some searching, I found a polyfill solution on gist at https://gist.github.com/paulirish/1579671 that smooths out the effect rendering in Firefox but still only renders every 10-15 frames on Safari.

Any ideas for an improved workaround? I think Safari and Chrome use the same WebKit engine, though I could be wrong.

I'm on a Mac osx 10.8.4, Firefox 22.0, Safari 6.0.5, Chrome 27.0.1453.116

Thank you again for putting up all these great examples and comments inside the code, they really help me learn a lot!

[bethrobson]

Hi,
Thanks for your comment! Yeah, Safari (at least my version) does not yet support requestAnimationFrame, so that causes the video to fail in Safari (if you look in the console you'll see the error when you try to play the video).

If you look in the code there is a line above requestAnimationFrame that uses a setTimeout with a 0 second delay. In other words, we're asking the browser to load the next frame as soon as it possibly can. The browser might still have trouble keeping up, but at least it should work. If you want to try it, just comment out the requestAnimationFrame line, and uncomment the setTimeout line. (I changed the code to switch it back to setTimeout for others in case they are trying it).

Looking at the polyfill, they are basically doing the same thing: setting a timeout to request the next frame instead, only getting a little fancier with the math they are using to compute the number of milliseconds to wait in the timeout.

I hope this helps!

[jpostdesign]

Hi, thank you for the reply!

Yes, the setTimout 0 method seems to be less problematic for right now. Until browsers have some kind of update for better or worse :)

Oddly enough, I can't test any more right now as I have a power outage, lol.

Thank you for switching the code back for any others, and thanks again for the quick reply and examples!

Sent from my iPhone
Sorry for any autocorrect typos :)

On Jun 28, 2013, at 2:35 PM, Elisabeth Robson notifications@github.com wrote:

Hi,
Thanks for your comment! Yeah, Safari (at least my version) does not yet support requestAnimationFrame, so that causes the video to fail in Safari (if you look in the console you'll see the error when you try to play the video).

If you look in the code there is a line above requestAnimationFrame that uses a setTimeout with a 0 second delay. In other words, we're asking the browser to load the next frame as soon as it possibly can. The browser might still have trouble keeping up, but at least it should work. If you want to try it, just comment out the requestAnimationFrame line, and uncomment the setTimeout line. (I changed the code to switch it back to setTimeout for others in case they are trying it).

Looking at the polyfill, they are basically doing the same thing: setting a timeout to request the next frame instead, only getting a little fancier with the math they are using to compute the number of milliseconds to wait in the timeout.

I hope this helps!

—
Reply to this email directly or view it on GitHub.