Safari/Lion에서 HTML5 캔버스 컨텍스트 drawImage 또는 getImageData에 문제가 있습니까?

사자가있는 사파리에서 비디오를 캔버스에 사용하는 데 문제가있는 사람이 있습니까?Safari/Lion에서 HTML5 캔버스 컨텍스트 drawImage 또는 getImageData에 문제가 있습니까?

Snow Leopard의 Chrome 12 및 Safari 5.1에서 잘 작동하는 코드가 있습니다. Safari 5.1의 Lion (이후 빌드 #) 및 Chrome 12 on Lion에서 동일한 코드를 테스트했습니다. Chrome에서 올바르게 작동하며 Safari에서 작동하지 않습니다. 내가 Safari에서 오디오를들을 수 있지만 비디오를 볼

var video = document.getElementById("video"); 
var canvas1 = document.getElementById("c1"); 
var canvas2 = document.getElementById("c2"); 
var context1 = canvas1.getContext("2d"); 
var context2 = canvas2.getContext("2d"); 

context1.drawImage(video, 0, 0, canvas1.width, canvas1.height); 
var frame = context1.getImageData(0, 0, canvas1.width, canvas1.height); 
context2.putImageData(frame, 0, 0);

여기에 코드입니다. Chrome에서는 동영상을보고 오디오 (동일한 파일)를 들었습니다.

출처

2011-08-02 Elisabeth

p.s. 나는 비디오 (4)와 프레임 너비와 높이 (벌금)와 frame.data.length (벌금)의 readyState를 점검했다. – Elisabeth

비디오 요소를 참조하는 canvasContext.drawImage() 호출을 수행 할 때 Safari 5.1/Lion (10.7.1)과 비슷한 문제가 있습니다. 야간에도 Webkit에서 발생합니다. 이미지 요소로 drawImage()를 호출해도 영향을받지 않습니다.

크롬 14와 파이어 폭스 7 모두에서 일관성있는 60FPS를 얻었지만 사파리 5.1은 10FPS 이상을 얻으려고 애쓴다. 오디오가 문제없이 재생되는 것 같습니다.

2010 년에는 MBP와 iMac이 각각 별개의 컴퓨터에서 비슷한 결과를 얻었습니다. 라이온 둘 다.

다른 2011 MBP는 Safari 5.0.3/Snow Leopard 10.6.6에 있지만 문제가 발생하지 않으며 단색 60FPS에서 비디오가 재생됩니다. 나는 사파리의 dev에 도서관에서 발견 한

http://dl.dropbox.com/u/15924676/sketch_67/index.html

<html> 
<head> 
<meta charset="utf-8"> 
<title></title> 
<style> 
    body { 
     background: #000; 
     margin: 0; 
     padding: 0; 
    } 
</style> 
</head> 
<body> 
<script src="js/libs/jquery-1.6.4.min.js"></script> 
<script src="js/mylibs/Stats.js"></script> 
<script> 
    var canvas, canvasContext, stats, video; 

    $(document).ready(function() { 
     // create stats 
     stats = new Stats(); 
     stats.domElement.style.position = 'absolute'; 
     stats.domElement.style.top = '0px'; 
     stats.domElement.style.zIndex = 100; 
     document.body.appendChild(stats.domElement); 

     // create canvas 
     canvas = document.createElement('canvas'); 
     canvas.width = 480; 
     canvas.height = 204; 
     canvasContext = canvas.getContext('2d'); 
     document.body.appendChild(canvas); 

     // create video 
     var video = document.createElement('video'); 
     video.autoplay = true; 
     video.src = 'video/sintel.mp4'; 

     setInterval(function() { 
      if (video.readyState === video.HAVE_ENOUGH_DATA) { 
       // draw video image to canvas context 
       canvasContext.drawImage(video, 0, 0, 480, 204); 
      } 

      // update stats display 
      stats.update(); 
     }, 1000/60); 

    }); 
</script> 
</body> 
</html>

다른 캔버스 + 비디오 예는 비정상적으로 느린 것 같다. http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/PuttingVideoonCanvas/PuttingVideoonCanvas.html

출처

2011-10-06 11:45:30

내가 개발중인 앱에서 비슷한 문제가 나타납니다.

Robin Pyon의 샘플 코드를 사용하면 Safari에서 10.7.3의 라이온으로 약 7FPS를 얻을 수 있습니다. 더욱이 실제 캔버스 이미지는 몇 초마다 업데이트됩니다. 캔버스는 동영상의 가장 가까운 키 프레임 만 잡고있는 것으로 보입니다. 코드를 비디오 파일의 확장자를 제거하고 업데이트 할 경우

그러나, 그에 따라

video.src = 'video/sintel';

프레임 캡처는 60 FPS에서 실행됩니다. 심지어 60FPS에서 720p 영화를 실행했습니다. 기괴한.

나는이 문제를 해결하고 싶습니다. 파일 확장명을 삭제하면 문제가 없지만 바람직하지 않은 부작용이 있습니다. 특히 그것은 비디오에서 빠르게 탐색 할 수있는 능력에 영향을줍니다.

출처

2012-05-04 04:34:10

Safari/Lion에서 HTML5 캔버스 컨텍스트 drawImage 또는 getImageData에 문제가 있습니까?

답변

관련 문제