#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2005
    Posts
    418
    Rep Power
    20

    GetImageData - crossOrigin error


    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:
    Code:
    context.drawImage( video, x, y, witdh, height );
    frame = context.getImageData( x, y, width, height );
    and then later do:
    Code:
    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
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,188
    Rep Power
    184
    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.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2005
    Posts
    418
    Rep Power
    20
    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.
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,188
    Rep Power
    184
    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.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2005
    Posts
    418
    Rep Power
    20
    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.
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,188
    Rep Power
    184
    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.
    Last edited by web_loone08; March 9th, 2013 at 09:09 PM.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2005
    Posts
    418
    Rep Power
    20
    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
  14. #8
  15. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,188
    Rep Power
    184
    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

    • Stefan1 agrees
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2005
    Posts
    418
    Rep Power
    20
    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 :-).

IMN logo majestic logo threadwatch logo seochat tools logo