在Firefox中缓慢地将视频绘制到画布上

时间:2018-10-17 08:12:55

标签: javascript performance firefox canvas video

在Chrome和Firefox中尝试这种小提琴。
https://jsfiddle.net/lvl5hm/xosan6w9/29/
在Chrome中,将视频绘制到画布大约需要0.5-2ms,但是FF由于某种原因需要20-40,这非常疯狂。
有什么可以帮助我提高FF性能的东西吗?

const canvas = document.getElementById('canvas')
canvas.width = 500
canvas.height = 300

const ctx = canvas.getContext('2d')

const video = document.createElement('video')
video.src = 'https://static.beeline.ru/upload/images/business/delo/newmain/main.mp4'
video.muted = true
video.loop = true
video.oncanplay = () => {
    video.play()
}

const frameCounterElement = document.getElementById('frameCounter')
let duration = 0
setInterval(() => {
    frameCounterElement.innerHTML = duration.toFixed(2) + 'ms to render'
}, 400)

function loop() {
    const startTime = performance.now()
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
    duration = performance.now() - startTime

    requestAnimationFrame(loop)
}

loop()

0 个答案:

没有答案