Javascript 在视频中使用Canvas和Drawimage函数_Javascript_Html_Canvas_Video Streaming_Drawimage

Javascript 在视频中使用Canvas和Drawimage函数

javascript html canvas video-streaming

Javascript 在视频中使用Canvas和Drawimage函数,javascript,html,canvas,video-streaming,drawimage,Javascript,Html,Canvas,Video Streaming,Drawimage,我使用HTML5画布和DrawImage功能来显示低速率视频。tnt为启动该项目提供了极好的建议：虽然tnt的解决方案在加载时使用onload函数知道摄像机和角度时效果良好，但我需要能够在多个摄像机之间关闭和打开视频，并更改其他参数。要处理这个问题，需要一些单独的功能，但我无法先在相机上设置间隔，然后将不断变化的图像传递给DrawImagecam_1.jpg'是下面示例中的视频。下面body onload中显示的函数也必须在运行时由其他例程调用。如有任何建议，将不胜感激 var cam = n

我使用HTML5画布和DrawImage功能来显示低速率视频。tnt为启动该项目提供了极好的建议：

虽然tnt的解决方案在加载时使用onload函数知道摄像机和角度时效果良好，但我需要能够在多个摄像机之间关闭和打开视频，并更改其他参数。要处理这个问题，需要一些单独的功能，但我无法先在相机上设置间隔，然后将不断变化的图像传递给DrawImagecam_1.jpg'是下面示例中的视频。下面body onload中显示的函数也必须在运行时由其他例程调用。如有任何建议，将不胜感激

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()" >

var-cam=null；
var c=null；
var-ctx=null；
var-ra=0；
函数init（）{
cam=新图像；
c=document.getElementsByTagName（'canvas'）[0]；
ctx=c.getContext（'2d'）；
}
功能图（cam）{
ctx.save（）；
ctx.clearRect（0，0，240，320）；
ctx.translate（240,0）；
ctx.旋转（1.57）；
ctx.drawImage（cam，0,0）；
ctx.restore（）；
}
函数inter（）{
setInterval（function（）{cam.src='cam_1.jpg？uniq='+Math.random（）；}，500）；
}

谢谢。

我建议您使用对象数组；大概是这样的：

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);

@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()" >

var-cams=[]；//一个阵列来容纳你的摄像机！
函数addcam（）{
this.image=新图像；
此参数设置1=0；
此参数设置n=0；
}
函数绘图（camnum）{
cams[1]=addcam（）；
cams[1].image.src=“cam_1.jpg”；
凸轮[1]。设置1=2；
cam=新图像；
c=document.getElementsByTagName（'canvas'）[0]；
ctx=c.getContext（'2d'）；
}
函数inter（）{
setInterval（函数（）{'cam.src='+cams[1].image.src+'？uniq='+Math.random（）；}，500）；
}  
功能图（cam）{
ctx.save（）；
ctx.clearRect（0，0，240，320）；
ctx.translate（240,0）；
ctx.旋转（1.57）；
ctx.drawImage（this，0，0）；
ctx.restore（）；
}