Problems with HTML5 canvas context drawImage or getImageData in Safari / Lion?_问答_开发者

Problems with HTML5 canvas context drawImage or getImageData in Safari / Lion?

开发者 https://www.devze.com 2023-03-25 10:35 出处：网络

Is anyone else having problems with using video with canvas in Safari on Lion? I have code that works fine in Chrome 12 and Safari 5.1 on Snow Leopard. I have tested the same code in Safari 5.1 on Li

相关专题：canvas video

Is anyone else having problems with using video with canvas in Safari on Lion?

I have code that works fine in Chrome 12 and Safari 5.1 on Snow Leopard. I have tested the same code in Safari 5.1 on Lion (later build #) and Chrome 12 on Lion. Works fine in Chrome, doesn't work in Safari.

Here's the code:

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 = cont开发者_运维百科ext1.getImageData(0, 0, canvas1.width, canvas1.height);
context2.putImageData(frame, 0, 0);

I hear the audio in Safari, but see no video. In Chrome I see the video and hear the audio (same file).

I'm having similar issues with Safari 5.1 / Lion (10.7.1) when doing canvasContext.drawImage() calls that reference video elements. Also happens on the Webkit nightly. Calling drawImage() with image elements doesn't seem to be affected.

To compare, in both Chrome 14 and Firefox 7 I'm getting a consistent 60FPS, whilst Safari 5.1 really struggles to get over 10FPS, if even that. Audio seems to playback without issue.

I get similar results on two separate machines here: 2010 MBP and iMac respectively. Both on Lion.

Another 2011 MBP we have that is on Safari 5.0.3 / Snow Leopard 10.6.6 doesn't exhibit the problem and plays the video back at a solid 60FPS.

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>

Other canvas + video examples I've found at Safari's dev library also seem to be unusually slow. http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/PuttingVideoonCanvas/PuttingVideoonCanvas.html

I'm seeing a similar problem in an app I am developing.

Using Robin Pyon's sample code, I get about 7FPS in Safari under Lion 10.7.3. Worse yet, the actual canvas image only updates every few seconds. It appears that the canvas is only grabbing the nearest key frame in the video.

However, if you remove the extension from the video file and update the code accordingly

video.src = 'video/sintel';

The frame capture runs at 60FPS. I even had a 720p movie running at 60FPS. Bizarre.

I would love a fix for this. Dropping the file extension is an ok work-around, but has side-effects that are not desirable. In particular it effects your ability to seek rapidly in the video.