Skip to content

Instantly share code, notes, and snippets.

@kfatehi

kfatehi/README.md

Last active December 19, 2015 18:58
Show Gist options
  • Save kfatehi/6002271 to your computer and use it in GitHub Desktop.
Save kfatehi/6002271 to your computer and use it in GitHub Desktop.
Download ZIP
Testing to see if we can blit from video to canvas and then extract pixel data in a CORS compliant way
Raw
README.md

So far it seems to me that CORS isn't properly implemented on the video tag on all browsers in that they still taint the canvas when blitted, preventing further extraction ... Or I'm doing something wrong.

Notes

The video source is 192.168.0.206/strawberries.mp4 -- my setup is an IIS 8 server set up at that URL with an h264 mp4 video

IIS CustomHeaders Documentation

http://www.iis.net/configreference/system.webserver/httpprotocol/customheaders

Misc CORS IIS/Video/Canvas Links

http://www.html5rocks.com/en/tutorials/cors/

https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image?redirectlocale=en-US&redirectslug=CORS_Enabled_Image

http://stackoverflow.com/questions/9192594/canvas-video-cors

http://stackoverflow.com/questions/12458444/enabling-cross-origin-resource-sharing-on-iis7

http://jbuckley.ca/2012/02/cross-origin-video/

http://www.w3.org/TR/html5/embedded-content-0.html#security-with-canvas-elements

Browser Bug Links

https://bugzilla.mozilla.org/show_bug.cgi?id=682299

https://code.google.com/p/chromium/issues/detail?id=173727

IIS 8 web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Headers" value="Accept-Encoding" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>
Raw
index.html
<html>
<head>
<title>CORS Test</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
var test = function () {
var video = $('video').get(0);
// video.setAttribute('crossOrigin','anonymous');
var c = $('canvas').get(0);
// c.setAttribute('crossOrigin','anonymous');
c.width = $(video).width();
c.height = $(video).height();
cxt = c.getContext('2d');
cxt.drawImage(video,0,0,c.width,c.height);
try {
c.toDataURL();
} catch (error) {
console.log(error);
}
}
setTimeout(test, 600);
</script>
</head>
<body>
<canvas crossorigin='anonymous'></canvas>
<video controls crossorigin='anonymous'>
<source src="http://192.168.0.206/strawberries.mp4" type="video/mp4">
</video>
<button onclick="test()">TEST</button>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment