Get frames of a video on a web-page

Question

There is a video of a diamond represented as a sequence of images. Here is the link: http://beta.jamesallen.com/#!/loose-diamonds/Round-cut/0.70-carat-K-color-SI1-clarity-Very-Good-cut-sku-163685 . If asked about credentials, you can use fsgs2k@gmail.com / hello as login / password.

The video is displayed inside a canvas element by some tricky JS. I'm not experienced enough to go though this controlling JS. What I want is:

• Find out at what frame rate this video is shown. Is it 25 fps?
• Get the underlying image sequence.

I need your help with these tasks.

Answer 1

You have the resource folder displayed in the <canvas> element :

<canvas id="diamond_s1" class="diamondCanvas" style="display: block;" 
setfolder="Sets/Diamond/$number/sets/" width="473" height="375"></canvas>

You have to get that folder path, and then you should be able to make requests to the urls you can see in the tab Network of Chrome that contains the previous dir and ends with set[number].txt

These url return the whole video frame by frame encoded as bsae64 data-image. You'll get a lot of data:image/jpeg;base64, followed by the base64 image. That's the image frame you have to get and convert in jpeg via simple base64 decoding

You'll have to figure out in which order they're taken, but the json gives you some insights about that