How to get data from the canvas on which the frame from the video is drawn in Safari?

Question

JavaScript

There is a task - to draw a frame from the video and get the data of a particular pixel.
To get data I use:

context.drawImage(video, 0, 0, width, height);
context.getImageData(10, 10, 1, 1);

In chrome and firefox, everything works correctly - I get data by pixel.
getImageData(10, 10, 1, 1);does not work if run in safari - throws an error
SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent.
Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
The fact is that there is a header in the video access-control-allow-origin:*
. Is there another way to get data per frame from the video other than drawing it on canvas? And how can SecurityError
be bypassed in safari?

Answer 1

The answer is this: at the moment it is impossible to parse a video in safari from a different domain. There is a defect in Safari on this topic, which will be fixed with the release of iOS 10. So the only way out is to generate a screenshot on the server and transfer it as an image.
Useful links describing the defect:
https://openradar.appspot.com/24641824
https://forums.developer.apple.com/message/113161#...
https://bugs.webkit.org/show_bug.cgi? id=135379