如何使用canvas标签在浏览器插件中显示解码后的h.264数据包？

Question

我不熟悉浏览器插件和firebreath。我试着建立一个插件，解码h264数据包，然后在浏览器html5上将视频帧显示为canvas标签。但是我测试了通过我的插件修改100x100画布像素，仅仅改变一个矩形的颜色就需要3-4秒。

下面是我的html代码的一部分

<canvas id="myCanvas" width="100" height="100"></canvas>

下面是我的javascript中body标记的一部分

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4) {
    imgData.data[i+0]=255;
    imgData.data[i+1]=0;
    imgData.data[i+2]=0;
    imgData.data[i+3]=255;
}
ctx.putImageData(imgData,0,0);

function delayFunctionTest() {
    console.log('test\n');
    plugin().changeImagePixel(imgData.data);
    ctx.putImageData(imgData,0,0);
}
setTimeout(function(){delayFunctionTest()}, 2000);
</script>

这是我的pluginapi.cpp

void sanypluginAPI::changeImagePixel(FB::JSObjectPtr& imageData)
{
    unsigned long i;

    for(i=0;i<imageData->GetProperty("length").convert_cast<unsigned long>();i+=4){
        imageData->SetProperty(i, 0);
        imageData->SetProperty(i+1, 100);
        imageData->SetProperty(i+2, 155);
        imageData->SetProperty(i+3, 255);
    }
}

上面的代码在控制台上显示“test”这个单词后，花了3-4秒来改变矩形的颜色。有没有办法加快浏览器插件中画布像素数据的更改过程？或者我幼稚的代码有什么问题吗？或者我的插件是不可能完成的？

Answer 1

没有办法直接访问画布像素数据；您最好的办法是(现在别碰我)对其进行base64编码，并将其作为字符串传递给javascript，然后对其进行解码。

是的，我知道。我知道呀。