[Stefan1]

Hi,
I am trying to get a frame from a video and store it as a variable so that I can draw that image onto a canvas every 100ms for a while. As far as I know the only way to do this is:

context.drawImage( video, x, y, witdh, height );
frame = context.getImageData( x, y, width, height );

and then later do:

context.putImageData( frame, x, y );

However this gives me the following error:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

I am working locally without using a webserver. I understood this error is because it only allows to get image data if the image is on the same domain and since I am working locally I don't have a domain so the browser assumes the document and images are on different domains.

I need this to work locally (without a webserver of any kind). Is there anyway to avoid this problem without giving warning messages to the user? Or is there another way to achieve what I want?

Thanks in advance
Stefan

[web_loone08]

Look into Canvas CORS; to allow you to get image data from a foreign origin.

CORS Enabled Image

I am not sure, if this is achievable locally, but I am sure; if you do some reading up on this; you can find the details about that.

[Stefan1]

Thanks.
Unfortunately it turns out that it does not work locally.

So there is no other way, possibly without getImageData, to get a frame from a video and displaying it for like 10 seconds on a canvas while other things are added and removed from that canvas (so that the frame from the video needs to be drawn over and over again)?

I want to draw that frame every 30 ms orso, but somehow I need a handle/variable to store it in, so I can say I want to print that particular frame.

[web_loone08]

Why don't you just embed the video; within a page, locally and why do you need to even do this locally? I am just wondering what the purpose of doing this is. If it's about money; you do know there are free web hosting sites/servers out there... right?

[Stefan1]

The thing is i'm making an assignment and don't know whether it will be graded on their local pc or on a server.

I do embed the video but I need to take frames from that embeded video and show them on a canvas for some time while the canvas is being cleared every so many miliseconds. In the meanwhile I am redrawing the videoframes and other elements.

[web_loone08]

I am not sure if you can use jQuery or not; for your school project, but if you can..., then check this example out. This HTML5 video url is cross domain / cross origin and is embedded in this page; yet it works just fine. Have a look at it and see what you think:
http://jsbin.com/ujovu4. And if you cannot use jQuery; it looks pretty simple to convert to normal JavaScript.

Edit: Just tested offline/locally and it works just fine.

[Stefan1]

Hey thanks for the replies

I took a look at that example but this uses drawImage() to draw a frame from a playing video onto the screen every 33 ms orso. I noticed before that drawImage doesn't have this crossOrigin problem. I guess because it doesn't let you store the image data, it just draws it right away without doing anything with it.

I need to store the image data for a while so that I can redraw that same frame later on. In this example a different frame is taken from the video everytime drawImage is called.

I think I'll just let go of the idea that I'm having, as it doesn't seem possible without using a webserver. I appreciate the effort though!

Grtz Stefan

[web_loone08]

You could use the example I provided you and incorporate it with your code; to save the images. You would need to create another canvas to clone and/or save the first canvases image. I think I would at least try something like that. You cannot just give up, in web development; just because there are barriers..., you have to find away around them; even if the path is narrow (that's my two cent ). Good luck, which ever way; that you decide to go.

[Stefan1]

Hehe, you're right. Though I don't have too much time for just this problem as it is just for a minor part of the assignment :-).