March 8th, 2013, 07:03 AM
GetImageData - crossOrigin error
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:
and then later do:
context.drawImage( video, x, y, witdh, height );
frame = context.getImageData( x, y, width, height );
However this gives me the following error:
context.putImageData( frame, x, y );
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
March 8th, 2013, 02:44 PM
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.
March 8th, 2013, 07:32 PM
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.
March 8th, 2013, 10:03 PM
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?
Last edited by web_loone08; March 8th, 2013 at 10:06 PM.
March 9th, 2013, 10:07 AM
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.
March 9th, 2013, 09:04 PM
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:
Edit: Just tested offline/locally and it works just fine.
Last edited by web_loone08; March 9th, 2013 at 09:09 PM.
March 10th, 2013, 05:58 AM
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!
March 10th, 2013, 09:28 PM
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.
Comments on this post
March 11th, 2013, 01:20 PM
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 :-).