1
各ビデオフレームを処理し、結果をキャンバスに描画することでHTML5ビデオを操作することを試みています。以下の例では、すべてのRGBコンポーネントの値が< 32であるソースピクセルは無視されます。HTML5 canvas.getImageData（）は、ビデオフレームにdrawImage（）を呼び出した後、モバイルデバイス上でSECURITY_ERR：DOM Exception 18をスローします。
デスクトップブラウザ（chrome）では正常に動作しているようですが、HTML5対応モバイルブラウザ（iPadまたはPlaybook）でページを表示しようとすると、bc.getImageData（）はDOM例外18をスローします。 しかし、ビデオフレームをバックキャンバスに描画するコード行を削除した場合（つまり、37行目 - bc.drawImage（v、0、0、w、h）;）、例外は発生しなくなりました。
drawImage（）を呼び出してビデオを渡すと、何らかの理由でキャンバスのorigin-clearフラグがfalseに設定されているという疑いがあります。これは可能ですか？ Aは一例を主催
は、ここで見つけることができます：http://petermares.com/samples/tvtest/
すべてのフィードバックをいただければ幸いです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<title>Transparent Video Test</title>
<script>
document.addEventListener('DOMContentLoaded', function()
{
var v = document.getElementById('v');
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
var back = document.createElement('canvas');
var backcontext = back.getContext('2d');
var img = new Image();
img.src = "./background.jpg";
var cw,ch;
v.addEventListener('play', function()
{
v.style.visibility = 'hidden';
cw = v.clientWidth;
ch = v.clientHeight;
canvas.width = cw;
canvas.height = ch;
back.width = cw;
back.height = ch;
draw(v,context,backcontext,cw,ch,img);
},false);
},false);
function draw(v,c,bc,w,h,img)
{
if(v.paused || v.ended) return false;
// First, draw it into the backing canvas
bc.drawImage(v,0,0,w,h);
c.fillStyle = "white";
c.fillRect(0, 0, w, h);
c.drawImage(img, 0, h/2-img.height/2);
try
{
// Grab the pixel data from the backing canvas
try
{
var idata = bc.getImageData(0,0,w,h);
}
catch (e)
{
alert("bc.getImageData(): " + e);
return;
}
var data = idata.data;
// grab the pixel data from the target canvas
try
{
var tdata = c.getImageData(0, 0, w, h);
}
catch (e)
{
alert("c.getImageData(): " + e);
return;
}
var rdata = tdata.data;
// Loop through the pixels, turning them grayscale
for(var i = 0; i < data.length; i+=4)
{
// source pixel
var rs = data[i];
var gs = data[i+1];
var bs = data[i+2];
var as = data[i+3];
// target pixel
var rt = rdata[i];
var gt = rdata[i+1];
var bt = rdata[i+2];
var at = rdata[i+3];
if (rs < 32 && gs < 32 && bs < 32)
{
rs = rt;
gs = gt;
bs = bt;
}
data[i] = rs;
data[i+1] = gs;
data[i+2] = bs;
data[i+3] = as;
}
idata.data = data;
// Draw the pixels onto the visible canvas
try
{
c.putImageData(idata,0,0);
}
catch (e)
{
alert("c.putImageData(): " + e);
return;
}
}
catch (e)
{
alert("Main loop" + e);
return;
}
// Start over!
setTimeout(draw,20,v,c,bc,w,h, img);
}
</script>
<body>
<video id="v" autoplay loop="loop" webkit-playsinline>
<source src="video/compressed.ogv" type="video/ogg" />
<source src="video/compressed.mp4" type="video/mp4" />
</video>
<canvas id="c">
</canvas>
<style>
#c {
position: absolute;
top: 0%;
left: 0%;
}
#v {
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 -500px;
}
</style>
</body>
</html>