comment afficher dans une page web un flux vidéo issu d'une camera ip?

Impossible d'afficher le flux vidéo d'une caméra IP sur ma page web de mon serveur!

Le problème exposé dans ce sujet a été résolu.

Bonjour, ;) le sujet semble avoir été traité plusieurs fois, mais il y a longtemps et les choses ont pas mal bougées. (renforcement sécurité, disparation d’Abode flash player,…)

Du coup tout ce que j’ai essayé à échoué! :(

J’ai une caméra IP h264 (donc mp4 je suppose) dont je voudrais afficher la vidéo dans une page web.

Premier point depuis le navigateur web Pale moon (Chrome ou Edge je peux me connecter mais le plugin n’est pas pris en compte surement Adob Flash player…) j’arrive bien à accéder à mon flux vidéo.

Pour ce faire je tape l’adresse ip locale de la caméra : 192. 168.1 .2 puis une page s’affiche et me demande l’utilisateur et le mot de passe : User : admin, pas de mot de passe. Une fois logé la vidéo s’affiche.

Je voudrais donc faire la même chose sur une page web de mon serveur!

J’ai essayé ce code (partie correspondant à l’essai d’affichage):

                                     <section class="streaming">
 
<img src= "http://admin:|@192.168.1.2/?action=stream" width="640" height="480" title="Rucher "/>
</section>

Bien entendu rien ne s’affiche(ni depuis Pale Moon ni Google mais en regardant du côté de Google j’ai ce message : https://www.chromestatus.com/feature/5669008342777856

j’ai du coup essayé sans le admin:|@ mais cela ne fonctionne pas non plus.

j’ai essayé pleins d’autres méthodes mais sans aucun succès c’est pour cela que je me tourne vers vous! Mes recherches (Google) m’ont donné pleins de pistes mais les post étaient plutôt ancien et je n’ai pas réussi à les faire fonctionner… Si quelqu’un a la solution? Merci :ange:

Ok, donc tu tentes de faire une authentification dans l’URL.

La syntaxe est : https://USER:PASSWORD@reste_de_lURL. Donc tu devrais retirer ton | car je ne comprends pas ce qu’il fait là.

Arrives-tu à lire le flux vidéo depuis VLC ?

Une solution serait de gérer l’authentification depuis ton serveur. Qu’utilise tu commes serveur ? (Si tu en utilises un)

+2 -0

Bonjour, en réponse à Qwerty j’ai essayé ceci :(pas tous en même temps bien entendu!)

<video controls width="250">

    <source src="http://admin@192.168.1.2/" type="video/mp4">
 <source src="http://user:admin@192.168.1.2/" type="video/mp4">
 <source src="http://admin:@192.168.1.2/" type="video/mp4">

<source src="http://192.168.1.2/" type="video/mp4">

</video>

A part le beau lecteur, pas de vidéo :( Merci

En réponse à Ache: mon adresse IP n’est pas sécurisé elle de type http://… (pas https) En fait ma page web à partir de laquelle je voudrais afficher ma caméra est sur un Raspberry PI, il me sert de base de données MariaDb et de serveur.Je viens d’essayer avec VLC en tentant d’ouvrir un flux réseau avec ceci : rtsp://192.168.1.2/mp4 VLC me demande le nom d’utilisateur je mets admin pas de mdp mais pas de lecture de vidéo… il ne semble rien se passer. il est vrai que je ne connais aps le type de sortie de ma caméra, j’ai essayé mp4, M4P, M4B, M4R, M4V, M4A, DIVX, EVO, F4V, FLV. sans plus de succés!

Merci

+1 -0

Comme tu risques d’être bloqué⋅e par l’erreur “Drop support for embedded credentials in subresource requests.”.

C’est pour ça que je te recommandais de laisser le serveur s’en occuper. Utilises-tu nginx ou apache (ou autre ?) comme seveur web ?

Pour VLC, tu peux essayer ça:

https://tutoriels.domotique-store.fr/content/72/290/fr/lire-un-flux-video-reseau-avec-vlc-media-player.html

+0 -0

Oups j’ai modifié mon post précédent pour l’essai de vlc j’ai suivi un autre post que le tien, mais je viens d’essayer avec ton tutoriel (c’est idem): je peux rentrer rtsp://admin:@192.168.1.2 ou rtsp://@192.168.1.2 puis VLC me demande d’entrer l’utilisateur (admin) et le mot de passe (rien) mais dans tous les cas je n’ai pas de vidéo qui s’affiche, j’ai essaye avec le rajout de :554 (:80 ou :88 me met un message d’erreur) J’ai même essayé avec une caméra onvif (zoom et rotation) je n’arrive aps à lire depuis vlc… Pour le serveur j’ai apache. Merci

Non mais reprenons aux bases.

Tu veux la vidéo depuis la page Web. Pour l’instant tu y as accès depuis une page web bizarre et vielle.

Tu devrais déjà essayé d’analyser cette page et comment tu peux en extraire la vidéo. Par-exemple en analysant le flux réseau. Car si tu ne connais pas la méthode d’accès, tenter d’y accéder directement depuis une page web que tu crées, tu prends le problème à l’envers.

En premier tu détermines un moyen d’extraire le flux vidéo, de deux tu le fais depuis une page Web.

+0 -0

oui mais là encore moins de succès, je ne vais pas jusqu’à la demande de nom de l’utilisateur et du mdp… J’ai juste ce genre de message : Votre média d’entrée ne peut être ouvert: VLC ne peut pas ouvrir « htpp://admin:@192.168.1.2 ». Vérifier les messages du journal pour plus de détails. idem avec htpp://192.168.1.2 ou htpp://192.168.1.2:80 ou htpp://192.168.1.2:554,…

La vielle page comme tu dis qui nécessite Adobe Flash Player (plus disponible) fonctionne uniquement (et encore à moitié puisque la vidéo est figée sur une seule image fixe) avec le navigateur pale Moon!

Je suppose que cette page est générée par la caméra elle-même (genre de page d’accueil pour se loger puis visionner la vidéo) mais ce qui est assez bizarre c’est que j’ai plusieurs caméras de marque différentes et c’est toujours plus ou moins la même page qui s’affiche) Pour ce qui est de l’analyse de cette page (je suppose la console de développement F12 dans Chrome) voici ce qui pourrais être le plus parlant (mais pas à moi…)

/*
 *  author: duchangjiang	
 */


eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('4 3(h) {    k n=$(8[h].l).c();    e(!7)    {        n.i(\'m\',6);        n.i(\'d\',5);    }     2    {        n.i(\'m\',a);        n.i(\'d\',9);        }    n.i(\'g-j\',\'0\');    n.i(\'g-f\',\'0\');      1(b[h]);}',62,24,'0px|clearInterval|else|fake|function|g_H|g_W|g_bigView|g_channelStatu|g_playViewH|g_playViewW|g_setInterval|getLast|height|if|left|margin|nChannel|setStyle|top|var|vfID|width|wrap'.split('|'),0,{}))
var OneView= new Array(6);
OneView[0]="<div id='";
OneView[1]="' style='border:0;width:100%;height:100%;position:absolute;'><object classid='CLSID:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' id='mo'"
+"width='100%' height='100%' codebase='http://www.apple.com/qtactivex/qtplugin.cab'>"
+"<param name='src' value='back.GIF'/><param name=\"allowFullScreen\" value=\"true\"/>  <param name='qtsrc' value='rtsp://"+g_address+":"+g_port+"/user="+g_user+"&password="+g_passWord+"&channel=";

OneView[2]="&stream=";
OneView[3]=".sdp?real_stream--rtp-caching=100'/>   <param name='autoplay' value='true'/>"
+"<param name='autohref' value='True'/><param name='target' value='myself '/>  <param name='href' value='javaScript:void(0)' />"
+"<param name='loop' value='false'/><param name='wMode' value='transparent'/><param name='controller' value='false'/>   <param name='scale' value='tofit'/>"
+"<embed src='back.GIF' name='movie1' qtsrc='rtsp://"+g_address+":"+g_port+"/user="+g_user+"&password="+g_passWord+"&channel=";
OneView[4]="&stream=";
OneView[5]=".sdp?real_stream--rtp-caching=100' controller='false'  width='100%' "
+" height='100%' loop='false' scale='tofit' wmode='Transparent' autoplay='true' kioskmode='true'"
+" enablejavasript='true' href='javaScript:void(0)' target='Myself' allowfullscreen=\"true\"  bgcolor='black' plugin='quicktimeplugin' "
+" type='video/quicktime' pluginspage='http://www.apple.com/quicktime/'>   </embed></object></div>";

function ChannelSatu(nv)
{
	this.vID="";
	this.vfID="";
	this.streamStyle=2;
	this.playing=false;	
	this.nView=0;
}
function ViewSatu() {
    this.vbPlaying=false;
    this.nchannel=0;
    this.bigestSize=0;
}
var g_channelStatu=new Array();
var g_viewStatu=new Array();
var g_setInterval=new Array();

for(var i=0;i<=g_channelNumber;i++)
{	
    g_channelStatu[i+1]=new ChannelSatu(i);    
    g_viewStatu[i+1]=new ViewSatu();
    g_setInterval[i+1]=0;
}

var g_clicked=g_channelNumber;
var g_bigView=false;
var g_nSplit=1;
var g_playViewH=1;
var g_playViewW=1;
var g_H=1;
var g_W=1;
var g_4H=1;
var g_4W=1;
var g_9H=1;
var g_9W=1;
var g_16H=1;
var g_16W=1;
var g_25H=1;
var g_25W=1;
var g_36H=1;
var g_36W=1;
var g_64H=1;
var g_64W=1;


function inSetPlay(nChannel,nStream) {
    var inH="";
    var vid="v"
	vid+=nChannel.toString();
    inH=OneView[0]+vid+OneView[1]+nChannel+OneView[2]+nStream+OneView[3]+nChannel+OneView[4]+nStream+OneView[5];
    g_channelStatu[nChannel].vID=vid;
    
    var wrap=$(g_channelStatu[nChannel].vfID).getLast();      
    
     
  eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('  t.o(\'s\',d+0);    t.o(\'g\',c+4);    t.o(\'j-p\',\'-1\');     t.o(\'j-i\',\'-2\');      t.o(\'l\',\'6\');      t.m(h);            e[k]=n("9("+k+")",3);            q a=$(b[k].r).f();    $(a).o(\'7-8\',\'5\');  ',62,30,'1000|10000px|3000px|50|800|Transparent|absolute|background|color|fake|first|g_channelStatu|g_playViewH|g_playViewW|g_setInterval|getFirst|height|inH|left|margin|nChannel|position|setHTML|setInterval|setStyle|top|var|vfID|width|wrap'.split('|'),0,{}))
	
} 

function StartRealPlay(numbChannel,nStream) 
{
	if(g_channelStatu[numbChannel].playing&&nStream!=g_channelStatu[numbChannel].streamStyle)
	{
		StopPlayReal(numbChannel);     
	}
	if(g_viewStatu[g_clicked].vbPlaying)
	{
		var sub='';
		var main='';
		main="main";
        main+=g_viewStatu[g_clicked].nchannel.toString();
        $(main).removeClass($(main).className);
		$(main).addClass('noMainPlay');    
        
        if(g_viewStatu[g_clicked].nchannel<=(g_channelNumber-g_DigChannel))    
		{
			sub="sub"
            sub+=g_viewStatu[g_clicked].nchannel.toString();	
			$(sub).removeClass($(sub).className);
			$(sub).addClass('noSubPlay');
		}
		StopPlayReal(g_viewStatu[g_clicked].nchannel);
	}
	inSetPlay(numbChannel,nStream);
	adjustLargeSize(g_clicked,g_playViewH); 
	g_viewStatu[g_clicked].nchannel=numbChannel;
	g_viewStatu[g_clicked].vbPlaying=true;
	return true;
}

function StopPlayReal(numbChannel) {
	
	if(g_channelStatu[numbChannel].playing)
	{
        $(g_channelStatu[numbChannel].vID).remove();    
        g_viewStatu[g_channelStatu[numbChannel].nView].nchannel=0;
        g_viewStatu[g_channelStatu[numbChannel].nView].vbPlaying=false;
        g_viewStatu[g_channelStatu[numbChannel].nView].bigestSize=0;
        g_channelStatu[numbChannel].playing=false;
    }
    return true;
}


function subClick(ob,channel) 
{   
    
	if($(ob).hasClass('noSubPlay'))
    {        
        var vf="vf";
        vf+=g_clicked.toString();
        g_channelStatu[channel].vfID=vf;
	
        if(StartRealPlay(channel,1))
        {	
            
            $(ob).removeClass($(ob).className);
            $(ob).addClass('subPlay');
            g_channelStatu[channel].playing=true;            
            g_channelStatu[channel].streamStyle=1;
            g_channelStatu[channel].nView=g_clicked;      
            var main='main';
            main+=(channel).toString();
			if($(main).hasClass('mainPlay'))
			{
			
                $(main).removeClass($(main).className);
                $(main).addClass('noMainPlay');
			}
        }
	}
	else
	{
        if(StopPlayReal(channel))
        {
            $(ob).removeClass($(ob).className);
            $(ob).addClass('noSubPlay');
            g_channelStatu[channel].playing=false;
            g_channelStatu[channel].streamStyle=2;			
        }
        
	}
}
function mainClick(ob,channel) {
    if($(ob).hasClass('noMainPlay'))
    {
		
        var vf="vf";
        vf+=g_clicked.toString();       
        g_channelStatu[channel].vfID=vf;
        if(StartRealPlay(channel,0))
        {
			
            $(ob).removeClass($(ob).className);
            $(ob).addClass('mainPlay');
            g_channelStatu[channel].playing=true;
            g_channelStatu[channel].streamStyle=0;
			g_channelStatu[channel].nView=g_clicked;
			var sub='sub';
			sub+=(channel).toString();
			if($(sub).hasClass('subPlay'))
			{
                $(sub).removeClass($(sub).className);
                $(sub).addClass('noSubPlay');
			}
			
        }
	}
	else
	{
        if(StopPlayReal(channel))
        {
            $(ob).removeClass($(ob).className);
            $(ob).addClass('noMainPlay');
            g_channelStatu[channel].playing=false;
            g_channelStatu[channel].streamStyle=2;
			
        }
        
	}
}
function clickV(v)
{
	var t="vf";
	t+=v.toString();
	$(t).setStyle('border','thin solid #00ffaa');
	
	if(g_bSafari)
	{
	    if(v!=g_clicked)
	    {
            t="vf";
		    t+=g_clicked.toString();     
		    $(t).setStyle('border','thin solid #000000');     
		    g_clicked=v;
	    }
	}
}

function dbClickV(v) {

	if(g_bigView)
	{
		for(var i=1;i<=g_nSplit;i++)
		{
			var vfid='vf';        
			if(i==v)
			{                
				vfid='vf';
				vfid+=v;
				$(vfid).setStyle('width',g_W);
				$(vfid).setStyle('height',g_H); 
					var wrap=$(vfid).getLast();
                wrap.setStyle('width',g_W);
                wrap.setStyle('height',g_H);
				
			}
			else
			{
				vfid+=i;
				$(vfid).setStyle('margin-top','0');		
					$(vfid).setStyle('width',g_W);
				$(vfid).setStyle('height',g_H); 
					var wrap=$(vfid).getLast();
                wrap.setStyle('width',g_W);
                wrap.setStyle('height',g_H);				
			}
			
		}
		g_bigView=false;
	}
	else
	{
	/*alert(g_nSplit);*/
		for(var i=1;i<=g_nSplit;i++)
		{
			var vfid='vf';
			if(i==v)
			{
			    /*alert("this");*/
			    
				vfid='vf';
				vfid+=v;
				$(vfid).setStyle('width',g_playViewW);
				$(vfid).setStyle('height',g_playViewH); 
			    var wrap=$(vfid).getLast();
                wrap.setStyle('width',g_playViewW);
                wrap.setStyle('height',g_playViewH);
                /*alert(g_playViewW);*/
			    
					if(g_viewStatu[i].vbPlaying)
					{
					    if(adjustLargeSize(i,g_playViewH))
					    {
						    inSetPlay(g_viewStatu[i].nchannel,g_channelStatu[g_viewStatu[i].nchannel].streamStyle);    

						}
					
					}
			}
			else
			{
				
				vfid+=i;
				$(vfid).setStyle('margin-top','-10000px');
			}
			
		}
		g_bigView=true;
		
		
	}  
}
function getDisplaViewHtm(w,h,nView,bRemove) {
	if(bRemove)
	{
	
		for(var i=1;i<=g_nSplit;i++)
		{
			var vf='vf';
			vf+=i;
			if(i>nView)
			{
			    $(vf).setStyle('margin-top','-10000px');
			}
			else
			{
			    $(vf).setStyle('margin-top','0px');			
			}
		}
		g_H=h;
		g_W=w;
		g_nSplit=nView;
		rePaint();
		return;
	}
	
	var lastOne=$('playView').getLast();    
    if(lastOne)
    {

            for(var i=1;i<=nView;i++)
            {
                var vf='vf';
                vf+=i;
                $(vf).setStyle('margin-top','0px');
            }    
        
		g_H=h;
        g_W=w;
        g_nSplit=nView;
        rePaint();
        return;
    }
    else
    {
        var htm='';
        if(g_bSafari)
        {
		    var inSet="<div style='width:100%;height:100%;position:absolute;background-color:Transparent;border:0;top:0px;z-index:10;'></div>"
			+"<div style='width: 100%; height: 100%;position:relative;border:0;'>"
			+"</div></div>";		
		}
		else
		{
		    var inSet="<div style='width: 100%; height: 100%;position:relative;border:0;'>"
			+"</div>";				
		}

		for(var i=1;i<=nView;i++)
        {
            g_viewStatu[i+1]=new ViewSatu();
            htm+="<div id='vf"+i+"' onclick='clickV("+i+")' ondblclick='dbClickV("+i+")' style='width: "+w+"px; height:"+h+"px;position:relative;'>"+inSet;    
        }
		g_H=h;
		g_W=w;
		g_nSplit=nView;
		
		return htm;    
    }
    
}

function inSetWindow(numb) {
    g_bigView=false;
    var inHtml="";
    var bRemove=false;
    var lastOne=$('playView').getLast();    
    if(lastOne)
    {
        
		if(numb-g_nSplit>0)
		{
			
		}
		else if(numb-g_nSplit<0)
		{
			bRemove=true;                                                     
			
		}                          
    }
	
	
    switch(numb)
    {
	case 1:
        {
			inHtml=getDisplaViewHtm(g_playViewW,g_playViewH,1,bRemove);   
            break
        }
	case 4:
        {
			
            inHtml=getDisplaViewHtm(g_4W,g_4H,4,bRemove);   
            break
        }
	case 9:
        {
            inHtml=getDisplaViewHtm(g_9W,g_9H,9,bRemove);
            break
        }
	case 16:
        {
            inHtml=getDisplaViewHtm(g_16W,g_16H,16,bRemove);
            break
        }
	case 25:
        {
            inHtml=getDisplaViewHtm(g_25W,g_25H,25,bRemove);
			break
        }
	case 36:
        {
            inHtml=getDisplaViewHtm(g_36W,g_36H,36,bRemove);
            break
        }
	case 64:
        {
            inHtml=getDisplaViewHtm(g_64W,g_64H,64,bRemove);
            break
        }
	default: 
		{
			break;
		}
		
    }	
	
    if(lastOne==null)
    {          
        $("playView").setHTML(inHtml);  
    }  
	clickV(1);  
    g_clicked=1; 
}
window.addEvent('domready',function(){
	resizeM();
	if(g_bSafari)
	{
	AutoPromt();
	switch(g_channelNumber) {
	case 1:
		{
			
			
			$('xp2').style.display="none" ;
			$('xp3').style.display="none" ;
			$('xp4').style.display="none" ;
			$('xp5').style.display="none" ;
			$('xp6').style.display="none" ;
			inSetWindow(1); 
			break;                
		}
	case 2:
	case 3:
	case 4:
		{
			$('xp3').style.display="none" ;
			$('xp4').style.display="none" ;
			$('xp5').style.display="none" ;
			$('xp6').style.display="none" ;			
			inSetWindow(4); 
			break;                
		}
	case 5:
	case 6:
	case 7:
	case 8:
	case 9:
		{
			$('xp4').style.display="none" ;
			$('xp5').style.display="none" ;
			$('xp6').style.display="none" ;		
			inSetWindow(9); 
			break;                
		}                
	case 10:
	case 11:
	case 12:
	case 13:
	case 14:
	case 15:
	case 16:
		{
			$('xp5').style.display="none" ;
			$('xp6').style.display="none" ;			
			inSetWindow(16); 
			break;                
		}
	case 17:
	case 18:
	case 19:
	case 20:
	case 21:
	case 22:
	case 23:
	case 24:
	case 25:
		{
			$('xp6').style.display="none" ;			
			inSetWindow(25); 
			break;                
		}
	case 26:
	case 27:
	case 28:
	case 29:
	case 30:
	case 31:
	case 32:
	case 33:
	case 34:
	case 35:
	case 36:
	case 37:
	case 38:
	case 39:
	case 40:
	case 41:
	case 42:
	case 43:
	case 44:
	case 45:
	case 46:
	case 47:
	case 48:
	case 49:
	case 50:
	case 51:
	case 52:
	case 53:
	case 54:
	case 55:
	case 56:
	case 57:
	case 59:
	case 60:
	case 61:
	case 62:
	case 63:
	case 64:
		{
			g_clicked = 36;
			inSetWindow(36);				
			break;    
			
		}
	default: break;
		
		
	}	
	}
	else
	{			                                  
			inSetWindow(1); 
	}
	var shtml='';
	var titles=new Array();
	titles[0]="main"
		titles[1]="sub"
		
		//alert(g_channelNumber);
		//alert(g_DigChannel);
		//ǿ�� g_DigChannel = 0;
		g_DigChannel = 0;
		for(var i=0;i<g_channelNumber;i++)
		{
		var j=i+1;
		    if  (i<g_channelNumber-g_DigChannel) {
		    
			
			shtml+="<li ><a title='"+titles[0]+"' id='sub" + j + "' class='noSubPlay' onclick='subClick(this," + j+")' ></a>" 
				+"<a title='"+titles[1]+"' id='main" + j + "' class='noMainPlay' onclick='mainClick(this,"+j+")'></a>"
				+"<div style='float:left;'><span id='CHname"+j+"'  style='position:absolute;width:auto;height:auto;margin-left:8px;'>CAM</span></div></li>";
				}
				else
				{
	shtml+="<li ><a title='"+titles[0]+"' id='sub" + j + "' class='noSubPlay' onclick='subClick(this," + j+")' ></a>" 
				+"<a title='"+titles[1]+"' id='main" + j + "' class='noMainPlay' onclick='mainClick(this,"+j+")'></a>"
				+"<div style='float:left;'><span id='CHname"+j+"'  style='position:absolute;width:auto;height:auto;margin-left:8px;'>CAM</span></div></li>";
				
	//        shtml+="<li >" 
	//			    +"<a title='"+titles[1]+"' id='main" + j + "' class='noMainPlay' onclick='mainClick(this,"+j+")'></a>"
	//			    +"<div style='float:left;'><span id='CHname"+j+"'  style='position:absolute;width:auto;height:auto;margin-left:8px;'>CAM</span></div></li>";	
				}
		}
		
		$("cl").innerHTML=shtml;
		translate();
		
        		
});

function resizeM() {
    var clientW=document.documentElement.clientWidth;
	var clientH=document.documentElement.clientHeight;
	if(clientH<590)
	{
    	clientH=590;
	}
/*	alert(g_playViewW);*/
	g_playViewH=clientH-31-29-3-33-13-8;
	g_playViewW=(clientH*64/53);
	g_playViewW=Math.floor(g_playViewW);
	g_playViewH=Math.floor(g_playViewH);
	$('playView').setStyle('width',g_playViewW);
	$('playView').setStyle('height',g_playViewH);	
	

	$('mb').setStyle('width', g_playViewW+6+280);
	$('mb').setStyle('height', clientH-31-15-2);
	$('drb2').setStyle('width',g_playViewW+3);
	$('funcBar').setStyle('width',g_playViewW+3);	
	$('mbabwrap').setStyle('height',clientH-30-47); 	 
	
	
	g_4H=(g_playViewH-4)/2;
	g_4W=(g_playViewW-4)/2;	
	g_9H=(g_playViewH-6)/3;
	g_9W=(g_playViewW-6)/3;	
	g_16H=(g_playViewH-8)/4;
	g_16W=(g_playViewW-8)/4;	
	g_25H=(g_playViewH-10)/5;
	g_25W=(g_playViewW-10)/5;	
	g_36H=(g_playViewH-12)/6;
	g_36W=(g_playViewW-12)/6;	
	g_64H=(g_playViewH-16)/8;
	g_64W=(g_playViewW-16)/8;
	
	switch(g_nSplit)
	{
	case 1:
		{
			g_H=g_playViewH;
			g_W=g_playViewW;
			break;
		}
	case 4:
		{
			g_H=g_4H;
			g_W=g_4W; 	        
 	          break; 	    
		}
	case 9:
		{
			g_H=g_9H;
			g_W=g_9W; 	        
 	          break; 	    
		}
	case 16:
		{
			g_H=g_16H;
			g_W=g_16W; 	        
 	          break; 	    
		}
	case 25:
		{
			g_H=g_25H;
			g_W=g_25W; 	        
 	          break; 	    
		}
	case 36:
		{
			g_H=g_36H;
			g_W=g_36W; 	        
 	          break; 	    
		}
	case 64:
		{
			g_H=g_64H;
			g_W=g_64W;        
 	          break; 	    
		}
	}
	
}
function rePaint() {
    for(var i=1;i<=g_nSplit;i++)
    {
        var vfid='vf';
        vfid+=i;   
        $(vfid).setStyle('width',g_W);
        $(vfid).setStyle('height',g_H);  
        if(g_viewStatu[i].vbPlaying!=true)
        {   			
            var first=$(vfid).getFirst();
            $(first).setStyle('background-color','#C0C0C0');

        } 
        else
        {
            if(i==g_clicked&&g_bigView)
            {
                 var wrap=$(vfid).getLast();                
                wrap.setStyle('width',g_playViewW);
                wrap.setStyle('height',g_playViewH);                
                continue;
            }
            else
            {
             var wrap=$(vfid).getLast();
            wrap.setStyle('width',g_W);
            wrap.setStyle('height',g_H);
            }
        }		
    }     
	
}

window.addEvent('resize' ,function () {
	
	resizeM();
	rePaint();
	
});

function adjustLargeSize(nView,nSize) {



    if(nSize>g_viewStatu[nView].bigestSize)
    {
        g_viewStatu[nView].bigestSize=nSize; 
        return true;
    }  
   
    return false;
    
 
}
var  g_n=1;
var  aa=0;
var g_playStyle=0;
function playAll() {


    if(g_playStyle==0)
    {
        var buttonID='main';
        buttonID+=g_n;
        g_clicked=g_n;      
        if($(buttonID).hasClass('noMainPlay'))
        {
            mainClick(buttonID,g_n);
        }
        
    }
    else
    {
               var buttonID='sub';
                buttonID+=g_n;
                g_clicked=g_n;
                if($(buttonID).hasClass('noSubPlay'))
                {
                    subClick(buttonID,g_n);       
                }
                
    }
    
    if(g_n>=g_channelNumber||(g_playStyle==1&&g_n>=g_channelNumber-g_DigChannel))//��·��
    {
        clearInterval(aa);         
        g_clicked=1;
        
        g_n=1;
        aa=0;
        clickV(1);
        return;
    }
    g_n++;
}
function IsLANIP() {

     var t=new Array();
     t=g_address.split('.');
 	if ((t[0] == 192 && t[1]== 168) ||
	(t[0] == 172 && t[1] >= 16 && t[1]<= 31) ||
	(t[0] == 0 || t[0]== 10)
	)
	{
		return true;
	}
	return false;
    
}
function startPlayAll() {//*************************************************startPlay****************************************
    if(IsLANIP())
    {
        $('mainAll').checked='checked';
    }
    else
    {
         $('subAll').checked='checked';    
    }
    $('hi').setStyle('margin-top','300px');     
}

function closeHi() {
    $('hi').setStyle('margin-top','-1999px');
}

function ClickHi() {
    if($('mainAll').checked==true)
    {
        g_playStyle=0;
        aa=setInterval("playAll()",50)//ʱ����
    }
    else
    {   g_playStyle=1;
        aa=setInterval("playAll()",50);
    }
    clickV(1);
    closeHi();
}

function StopPlayAll()
{    
    
        if(aa!=0)        
        {
            clearInterval(aa);         
            g_clicked=1;        
            g_n=1;
            aa=0;
        }
       for(var i=1;i<=g_channelNumber;i++)
       {
            if(i<=g_channelNumber-g_DigChannel)
            {          
                var main='main';main+=i;
                var sub='sub';sub+=i;
                $(sub).removeClass($(sub).className);
                $(sub).addClass('noSubPlay');
                $(main).removeClass($(main).className);
                $(main).addClass('noMainPlay');
                StopPlayReal(i);
                g_channelStatu[i].playing=false;
                g_channelStatu[i].streamStyle=2;
            }
            else
            {
                var main='main';main+=i;                
                $(main).removeClass($(main).className);
                $(main).addClass('noMainPlay');
                StopPlayReal(i);
                g_channelStatu[i].playing=false;
                g_channelStatu[i].streamStyle=2;            
            }
       }
       clickV(1);
       
}
var ptzstate=0;
function ajaxFunction(req, param)
{
 var xmlHttp;
 
 try
    {
    xmlHttp=new XMLHttpRequest();
    }
 catch (e)
    {

   try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
   catch (e)
      {

      try
         {
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
      catch (e)
         {
         alert("�����������֧��AJAX��");
         return false;
         }
      }
    }
    
	if(g_viewStatu[g_clicked].vbPlaying)
	{
		if(req=="start")		
    	{
			xmlHttp.open("POST","dvrcmd",true); 			
    		xmlHttp.send("command=ptz_req&req="+req+"&param="+param+"&channel="+g_viewStatu[g_clicked].nchannel+"&stream="+g_channelStatu[g_viewStatu[g_clicked].nchannel].streamStyle);
			ptzstate = 1;		
		}
		else if(req=="stop" && ptzstate == 1) 
		{
			xmlHttp.open("POST","dvrcmd",true);     
    		xmlHttp.send("command=ptz_req&req="+req+"&param="+param+"&channel="+g_viewStatu[g_clicked].nchannel+"&stream="+g_channelStatu[g_viewStatu[g_clicked].nchannel].streamStyle);
			ptzstate = 0;		
			
		}
	}
}

switch(iLanguage)
{
    case 100:
    {
        document.write("<script src='English.js'><\/script>");
        break;
    }
    case 101:
    {
        document.write("<script src='SimpChinese.js'><\/script>");
        break;
    }
    default:
    {        
        document.write("<script src='English.js'><\/script>");
    }
    
    
}

function translate() {
for(var i=1;i<=g_channelNumber;i++)
        {
            var name='CHname';    
            name+=i;    
            $(name).setText(Translate.ch+i);
            var main='main'            
            main+=i;
            $(main).title=Translate.MFt;
            if(i<=g_channelNumber-g_DigChannel)
            {
                var sub='sub'
                sub+=i;            
                $(sub).title=Translate.SFt;
            }
            
        }
        
 $('xbb').setText(Translate.Zoom);
 $('xbj').setText(Translate.Focu);
 $('xgq').setText(Translate.Iris);	
 $('xp1').title=Translate.Split1;
 $('xp2').title=Translate.Split4;
 $('xp3').title=Translate.Split9;
 $('xp4').title=Translate.Split16;
 $('xp5').title=Translate.Split25;
 $('xp6').title=Translate.Split36;
 $('startPlayAll').title=Translate.PlayAll;
 $('stopPlayAll').title=Translate.StopPlayAll;
 $('mainAllText').setText(Translate.mainPlayAll);
 $('subAllText').setText(Translate.subPlayAll);
 $('playAllOk').setText(Translate.ok);
 $('playAllCancel').setText(Translate.Cancel);
 $('logout').setText(Translate.logout);
 $('autoPromptText').setText(Translate.autoPrompt);
 $('version').setText(Translate.version);

}

 

function Logout() {
      self.location='Login.htm';
}

   var gHashCookie = new Hash.Cookie('NetSuveillanceWebCookie',{duration: 30});
var settings = {
	autoPrompt:''
	}
	
function savesetting() 
{
    gHashCookie.extend(settings);
  
}
function getsetting(){
        	if (gHashCookie.get('autoPrompt')) {
		settings['autoPrompt'] = gHashCookie.get('autoPrompt');
	} else {
		settings['autoPrompt'] = '';
	}
	if(settings['autoPrompt']=="2") 
	{
	       $('hi').setStyle('margin-top','-1999px'); 
	       $('autoPrompt').checked=false;
	}
	else
	{
	    startPlayAll(); 
	    
	}
        
        
}
function AutoPromt() {

    getsetting();
}
function ClickAutoPromt() {
    if($("autoPrompt").checked)
    {        
        settings['autoPrompt'] =1;    
        savesetting();
    }
    else
    {
        settings['autoPrompt'] =2;    
        savesetting();
    }
    
}

function MessageBox() {
wrap="<div id='versionB' style='position:absolute;font-family: ����, Arial, Helvetica, sans-serif;color: #000000;width:300px;height:220px;margin:200px 0 0 50%;z-index:1000;background-color: RGB(255,255,255)'>"
        +"<div style='background-color: RGB(242,242,242);width:300px;height:30px;'>"
            +"</div>"
            +"<div style='width:300px;height:160px;'>"
                +"<div style='color: #000000;margin-top:10px;text-align:left;padding-left:20px;'>"
                +Versions.vidioIn+g_VideoInChannel+"<br/>"                
                +Versions.alarmIn+g_AlarmInChannel+"<br/>"
                + Versions.alarmOut+ g_AlarmOutChannel+"<br/>"
                +Versions.audioIn +g_AudioInChannel+"<br/>"
                +Versions.buildTime+g_mBuildTime+"<br/>"
                +Versions.version+g_SoftWareVersion+"<br/>"
                +Versions.serialNo+g_SerialNo+"<br/>"
                +"</div></br>"
                 +"<button onclick='$(\"versionB\").style.display=\"none\" ' style='cursor: pointer; width:75px;height:25px;color: #000000;'>"
                 +Versions.ok+"</button>"
            +"</div>"
            
            +"<div style='background-color: RGB(242,242,242);width:300px;height:30px;'>"
            +"</div>"
     +"</div>"
   $("MessageBox").setHTML(wrap); 
}
function Version() {
MessageBox();
}

Si cela peut être plus parlant pour quelqu’un! sauf peut-être que la page semble vouloir utiliser le plungin Apple Quicktime (et pas Adobe..) Déjà juste avec le PC je rame mais si en plus on passe sur Apple…

Bien entendu elle ne fonctionne pas puisque plus adobe flash player il faudrait redescendre à Chrome version 44…

Merci

+0 -0

Il faut déjà que tu trouves un moyen d’accéder à la vidéo alors.

L’analyse réseau de ton navigateur peut-aider mais sinon Wireshark est ton ami.

+0 -0

Je viens de télécharger Wireshark et rebooter ma machine! Le wiki est en anglais et à l’air plutôt costaud pour un débutant comme moi. J’ai branché une caméra et un Arduino sur le port Ethernet 3 de la LiveBox4. Mais Wireshark ne voit aucune activité sur cet Ethernet alors que je me connecte à la caméra, que je prends des photos avec et que mon Arduino envoi des mails… par contre sur l’Ethernet 2 il voit plein de trafic mais pas les IP des caméras qui sont dessus.. j’ai lancé un programme de visualisation de caméra (dessus j’ai mis caméra de test 192.168.1.88) elle est vue sur le port Ethernet 2 alors qu’elle est branchée au 3 avec mon pc (qui lui est branchée en Ethernet 1) voici par exemple une des lignes concernant ce sujet pour moi c’est du javanais! "8800","10.606795","192.168.1.88","192.168.1.11","TCP","94","80 → 61145 [PSH, ACK] Seq=140964 Ack=12 Win=3650 Len=40"

Ps: je peux accéder à mes caméras via l’application PC EseeCloud en rentrant directement l’adresse IP de la caméra (connexion locale et pas par le cloud ex: 192.168.1.88) le port(80), le nom d’utilisateur (admin) et le mot de passe(). Merci

+0 -0

pour moi c’est du javanais! "8800","10.606795","192.168.1.88","192.168.1.11","TCP","94","80 → 61145 [PSH, ACK] Seq=140964 Ack=12 Win=3650 Len=40"

C’est effectivement ce charabia qu’il va falloir comprendre pour réussir à lire ta caméra.

Tu as peut-être un manuel d’utilisation ? Car la rétro ingénieurie si Wireshark ne te dis rien risque d’être, délicate.

+0 -0

Non pas vraiment de manuel! Mais avec les logiciels pc(Eseecloud) ou Android (IP Pro) rien de compliquer adresse IP port 80 admin et éventuellement un mot de passe si on en mets un via le logiciel et onvif (si demandé)pour voir la caméra… De ce que j’ai vu dans Wireshark c’est l’adresse Ip de la caméra, le port pui sle reste je sais pas! J’ai réussi à filtrer par l’IP de la caméra mais cela donne pas grand chose d’intéressant l’adresse IP le port de la caméra le port de réception de la LiveBox la longueur,le protocole TCP,…

Merci Ps: je n’arrive pas à mettre de copie d’écran (image dans mes messages) est-ce normal? merci

+0 -0

J’ai réussi à filtrer par l’IP de la caméra mais cela donne pas grand chose d’intéressant l’adresse IP le port de la caméra le port de réception de la LiveBox la longueur,le protocole TCP,…

Pourtant dans ces paquets il y a forcément le flux d’image selon un certain format.

Ps: je n’arrive pas à mettre de copie d’écran (image dans mes messages) est-ce normal?

Euh, non ce n’est pas normal. Normalement c’est aussi simple qu’un glissé/déposé.

+0 -0

Ps: je n’arrive pas à mettre de copie d’écran (image dans mes messages) est-ce normal?

Euh, non ce n’est pas normal. Normalement c’est aussi simple qu’un glissé/déposé.

ache

Il faut juste attendre un peu que l’image se charge

Logiquement, si ta caméra a été achetée dans les 5 dernières années, elle ne devrait pas te demander Flash Player. Quelle est la version d’Apache que tu utilises ?

+0 -0

Le problème a été résolu (pas par moi!) en récupérant le flux rtsp

rtsp://192.168.1.2/ch0_0.264 qui fonctionne sur VLC.

Faut transformer le Pi en serveur vidéo http

Pour ça, faut installer motion et motioneye Dans l’interface de motioneye, il suffit de déclarer la caméra avec son url de flux vidéo (rtsp://192.168.1.88/ch0_0.264) Surtout indiqué de ne rien enregistrer sur la carte sd (par défaut, motioneye et motion enregistrent tout !)

Aller dans la partie 'url vidéo' de motioneye, il te dit quelle url il fournit pour la vidéo

Chez moi, mon Pi de test se nomme "piwifi" et la caméra est en 88

Donc dans motioneye, j’ai déclaré la caméra ip avec l’url rtsp://192.168.1.88/ch0_0.264

Et motioneye me donne en url de flux vidéo : http://piwifi:9081 (motioneye fait tampon entre la cam et toi) Alors, il y a un retard : ce qui se passe en vrai sur la cam, tu le vois en vrai 5 secondes plus tard facile, voir 10

Mais ça fonctionne

Voilà si dès fois cela peut aider quelqu’un d’autre!

Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte