Using <iframe> as source with clmtrackr - iframe

Question

I am working with the example for clmtrackr here. I am trying to use an <iframe> as a source of video for the code (as opposed to using a tag, and doing this returns no results.
The example code :
<div id="container">
<video id="video" width="368" height="288" autoplay="" loop="">
<source src="./media/franck.ogv" type="video/ogg">
</video>
<canvas id="canvas" width="368" height="288"></canvas>
</div>
<script>
var videoInput = document.getElementById('video');
var ctracker = new clm.tracker();
ctracker.init(pModel);
ctracker.start(videoInput);
function positionLoop() {
requestAnimationFrame(positionLoop);
var positions = ctracker.getCurrentPosition();
// do something with the positions ...
// print the positions
var positionString = "";
if (positions) {
for (var p = 0;p < 10;p++) {
positionString += "featurepoint "+p+" : ["+positions[p][0].toFixed(2)+","+positions[p][1].toFixed(2)+"]<br/>";
}
document.getElementById('positions').innerHTML = positionString;
}
}
positionLoop();
var canvasInput = document.getElementById('canvas');
var cc = canvasInput.getContext('2d');
function drawLoop() {
requestAnimationFrame(drawLoop);
cc.clearRect(0, 0, canvasInput.width, canvasInput.height);
ctracker.draw(canvasInput);
}
drawLoop();
</script>
Has anyone attempting this yet? Any help would be much appreciated!
Thank you,

Answer 1

In most cases, this is not possible because of security measures built into the browser/DOM.
clmtrackr needs to access the pixels of the video file, and to do that, it needs direct access to the <video> element, which in your case is inside the iframe. In order to do that, you would need to reach into the DOM elements inside the iframe to find the video element and pass it to clmtrackr. However, it is not possible to do that unless the iframe is being served from the same domain as the outside page.
Presumably, if the iframe is coming from your own site, then you already have a way to access the source URL of the video file and can create your own element. Then you don't need the iframe. So I'm assuming you're trying to access another video hosting site, like YouTube.
Now, to be thorough, even if you could access the video element inside the iframe or if you could somehow infer the url of the video file and create your own element, clmtrackr cannot access the pixels unless that video file is, once again, coming from the same domain. This is another security measure.
The exception is if the video is served with CORS headers, as described here:
http://jbuckley.ca/2012/02/cross-origin-video/
and here:
https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
Unfortunately, few video hosting services serve their videos with CORS headers.