Использование Canvas и Drawimage в функциях с видео - PullRequest
Новая
       7

Использование Canvas и Drawimage в функциях с видео

2 голосов
/ 07 февраля 2012

Я использую HTML5 canvas и функции DrawImage для отображения видео с низкой скоростью. tnt дал отличный совет, чтобы начать этот проект: Попытка использовать Canvas и DrawImage для отображения низкоскоростного видео при 90 градусах

Хотя решение tnt работало нормально, когда камера и угол известны во время загрузки с помощью функций загрузки, мне нужно иметь возможность выключать и включать видео между несколькими камерами и изменять другие параметры. Чтобы справиться с этим, требуется ряд отдельных функций, но я не смог сначала сделать setInterval для камеры, а затем передать постоянно меняющееся изображение в DrawImage. «cam_1.jpg» - это видео в приведенном ниже примере. Функции, показанные в теле загрузки ниже, также должны вызываться другими подпрограммами во время выполнения. Любой совет будет оценен. 

var cam = null;
var c = null;
var ctx = null;
var ra = 0;

function init() {
cam = new Image;
c = document.getElementsByTagName('canvas')[0];
ctx = c.getContext('2d');
}
 function draw(cam) {
       ctx.save();
       ctx.clearRect( 0, 0, 240, 320 );
       ctx.translate( 240, 0);
       ctx.rotate(1.57);
       ctx.drawImage(cam, 0, 0 );
       ctx.restore();
       }

function inter() {
setInterval(function(){cam.src = 'cam_1.jpg?uniq='+Math.random();},500);
}

</script></head><body onload = "init(),  draw(cam), inter()" >

Спасибо.

Ответы [ 2 ]

1 голос
/ 08 февраля 2012

@ tnt, вы предлагаете следующее?Спасибо: 

var cams = []; // an array to hold you cams!  

function addcam() {
  this.image = new Image;
  this.setting1 = 0;
  this.settingn = 0;
}

function draw(camnum){
cams[1] = addcam();
cams[1].image.src = "cam_1.jpg";
cams[1].setting1 = 2;
cam = new Image;
c = document.getElementsByTagName('canvas')[0];
ctx = c.getContext('2d');
}

function inter() {
setInterval(function(){'cam.src = ' +cams[1].image.src+ '?uniq='+Math.random();},500);
}  

function draw(cam) {
       ctx.save();
       ctx.clearRect( 0, 0, 240, 320 );
       ctx.translate( 240, 0);
       ctx.rotate( 1.57);
       ctx.drawImage(this, 0, 0 );
       ctx.restore();
}

</script></head><body onload = "draw(cam), inter()" >
1 голос
/ 07 февраля 2012

Я предлагаю вам использовать массив объектов;как то так: 

var cams = []; // an array to hold you cams!

function addcam() {
  this.image = new Image;
  this.setting1 = 0;
  this.settingn = 0;
}  

cams[1] = addcam();
cams[1].image.src = "cam1.jpg";
cams[1].setting1 = 2;

setInterval(function(){cam.src = '+cams[1].image.src+'?uniq='+Math.random();},500);
...