Taking screenshot of html5 video in cordova based iOS app

Question

I am creating a cordova based iOS app and using the following code to capture a screenshot of a html5 video player at particular durations:

var canvas = document.createElement('canvas');
canvas.width = 80;
canvas.height = 70;
var ctx = canvas.getContext('2d');

ctx.fillRect(0, 0, canvas.width, canvas.height); 
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

The code works fine when run in a browser, however when run in the Xcode simulator and on an iPad, the last line of code can't be executed:

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

Would appreciate any suggestions to why it only works in the browser.

Answer 1

I would suspect you may run into CORS issues here if the video is not served from the same server as the page. In this case the browser will throw a security error which can be seen in the console.

If so, you need to either

1. move the video file to the same server as the page
2. or enable CORS usage for the external server (file:// is considered a different origin if that is used).
3. or use a proxy page on the same server as the page to load the external video

For the 2. option you will need access to modify the server configuration. If you don't have access and cannot make the owner reconfigure it for CORS usage the only option left is to load the video through a proxy page.

This is a bit broad to answer here on SO as there are many possible options depending on type of platform you're using. But in essence the proxy page will take the url as an argument and start loading it and then forward the data it loads to your page requesting the data.

There is no way around CORS restrictions though but to fulfill one of the options listed above.