<iframe>을 소스로 사용 clmtrackr

Question

예를 clmtrackr here으로 작업하고 있습니다. 나는 태그를 사용하고,이 결과가 반환하고 반대로 코드에 대한 비디오 소스 (같은 <iframe>를 사용하는 것을 시도하고있다

예제 코드를 :.

<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> 

는 사람이 아직이 시도 가지고 ? 어떤 도움이 많이 주시면 감사하겠습니다!

감사합니다,

대부분의 경우

Answer 1

,이 때문에 브라우저/DOM.

,691에 내장 된 보안 조치의 수 없습니다

clmtrackr은 동영상 파일의 픽셀에 액세스해야하며이를 수행하려면 <video> 요소에 직접 액세스해야합니다.이 경우에는 iframe 내부에 있습니다. 이를 수행하려면 DOM 요소에 도달해야합니다. iframe을 사용하여 동영상 요소를 찾고 clmtrackr에 전달해야합니다. 그러나 iframe이 외부 페이지와 동일한 도메인에서 게재되지 않는 한 그렇게 할 수 없습니다.

아마도 iframe이 내 사이트에서 오는 경우 동영상 파일의 소스 URL에 액세스 할 수있는 방법이 있으며 직접 요소를 만들 수 있습니다. 그렇다면 iframe이 필요 없습니다. YouTube와 같은 다른 동영상 호스팅 사이트에 액세스하려고한다고 가정합니다.

iframe 내부의 비디오 요소에 액세스 할 수 있거나 비디오 파일의 URL을 추론하고 자신의 요소를 만들 수 있다고해도 clmtrackr은 해당 비디오 파일이 다음과 같은 경우에만 픽셀에 액세스 할 수 있습니다. 다시 한 번 같은 도메인에서 왔습니다. 이것은 또 다른 보안 조치입니다. 여기 http://jbuckley.ca/2012/02/cross-origin-video/

과 : 는 https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

불행하게도, 몇 비디오 호스팅 서비스는 CORS 헤더와 동영상을 제공 여기에 설명 된대로 비디오, CORS 헤더와 함께 제공되는 경우

는 예외입니다.