Я занят экспериментированием с видео HTML5, обрабатывая каждый видеокадр и рисуя результат на холсте. В приведенном ниже примере просто игнорируются любые исходные пиксели, где все компоненты RGB имеют значение <32; </p>
Кажется, что он отлично работает в моем настольном браузере (chrome), но когда я пытаюсь просмотреть страницу с помощью мобильного браузера с поддержкой HTML5 (iPad или Playbook), bc.getImageData () выдает исключение DOM 18.
Однако, если я удалю строку кода, которая рисует видеокадр на заднем холсте (то есть строка 37 - bc.drawImage (v, 0, 0, w, h);), исключение больше не возникает.
У меня есть подозрение, что по какой-то причине флаг origin-clear canvas устанавливается в false, как только я вызываю drawImage () и передаю видео. Возможно ли это?
Пример размещения можно найти здесь: 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>