Discussion :

[klaiko]

Bonjour à tous.

Je viens vers vous car je rencontre un léger problème de navigateur entre Firefox et Chrome.

Je suis en train de faire une page qui me permet d'atteindre plusieurs caméras ip qui ont toute une adresse ip fixe.
J’atteins donc les contrôles cgi de chaque caméras et pas le serveur http de chaque caméras.
Pour atteindre les caméras je passe par un ProxyPass ce qui me permet de n'ouvrir que un seul port plutôt qu'un port pour chaque caméra avec chaque fois une redirection.
Pour le moment je suis en local donc du coté du ProxyPass le travail s’effectue très bien et j'ai de très bon résultat de ce coté là.

J'accède aux caméras par un événement "click" qui va me changer l'attribut "src" dans une balise html <iframe>.

Ou cela ne fonctionne plus c'est lorsque je teste le navigateur Chrome, là j'ai toujours un affichage mais plus de boutons de contrôles ceux-ci ne fonctionnent plus alors qu'avec Firefox c'est ok.

Voici le code HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<form  id="formPosi" action="" method="">
   <input id="p1"  type="button" name="p1" value="1">
   <input id="p2"  type="button" name="p2" value="2">
   <input id="buttonstop" type="button" name="stop" value="Stop">
</form>
 
<div id="screen">
   <iframe id="iframe" src="" width="640" height="480" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Voici le code JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
var cam  = 0;
var move;
var posi;
 
var buttonCam1  = document.getElementById('button1');
var buttonCam2  = document.getElementById('button2');
var buttonStop   = document.getElementById('buttonstop');
 
/*Gestionnaire d'évènements*/
buttonCam1.addEventListener('click', afficheCam1); 
buttonCam2.addEventListener('click', afficheCam2);
buttonStop.addEventListener('click', afficheStop);
 
function afficheCam1(){
  iframe.setAttribute('src','/live/cam1/videostream.cgi?user=<?php echo $user; ?>&pwd=<?php echo $pwd; ?>');
  cam = 1;
}
function afficheCam2(){
  iframe.setAttribute('src','/live/cam2/videostream.cgi?user=<?php echo $user; ?>&pwd=<?php echo $pwd; ?>');
  cam = 2;
}
function afficheStop(){
  iframe.setAttribute('src','../../css/media/images/640x480.jpg');
  cam = 0;
}
 
/*Fonctions qui appelants les fonctions d'exécution de positions*/
function move_p1(){
      var posi = "p1";
      execute_move_posi1(cam,posi);
};
 
function move_p2(){
      var posi = "p2";
      execute_move_posi2(cam,posi);
};
 
/*Exécution des fonctions de Positions présélectionnées, reçoit deux arguments*/
function execute_move_posi1(cam,posi){
  if(cam != 0 && posi == "p1"){
    iframe.setAttribute('src','/live/cam'+ cam +'/decoder_control.cgi?command=31&user=<?php echo $user; ?>&pwd=<?php echo $pwd; ?>');
    iframe.setAttribute('src','/live/cam'+ cam +'/videostream.cgi?user=<?php echo $user; ?>&pwd=<?php echo $pwd; ?>');
  }
  else{
    afficheStop();
  }
}
function execute_move_posi2(cam,posi){
  if(cam != 0 && posi == "p2"){
    iframe.setAttribute('src','/live/cam'+ cam +'/decoder_control.cgi?command=33&user=<?php echo $user; ?>&pwd=<?php echo $pwd; ?>');
    iframe.setAttribute('src','/live/cam'+ cam +'/videostream.cgi?user=<?php echo $user; ?>&pwd=<?php echo $pwd; ?>');
  }
  else{
    afficheStop();
  }
}

A partir de la ligne n°42 du code JS cela ne fonctionne plus avec Chrome avec deux setAttribute() mais avec Firefox ça passe. Là je ne comprend pas pourquoi !
Pouvez-vous s'il vous plaît m'aider car je ne vois vraiment pas ce qui empêche Chrome d'appliquer la ligne 42 et 43 à la suite de l'autre ?

Je vous remercie bien.

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

iframe.src='/live/cam1/videostream.cgi?user=<?php echo $user; ?>&pwd=<?php echo $pwd; ?>';

[klaiko]

Quel rapidité ! je suis étonné, merci.

Je viens de tester votre réponse comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
function execute_move_posi2(cam,posi){
  if(cam != 0 && posi == "p2"){
    iframe.src='/live/cam4/decoder_control.cgi?command=33&user=<?php echo $user; ?>&pwd=<?php echo $pwd; ?>';
    iframe.src='/live/cam4/videostream.cgi?user=<?php echo $user; ?>&pwd=<?php echo $pwd; ?>';
  }
  else{
    afficheStop();
  }
}

Avec Firefox ça fonctionne très bien.

Par contre avec Chrome ça ne fonctionne pas.

Ensuite j'ai testé avec Chrome le code suivant lorsque je lui envoi une commande 33 qui est celle de présélection 2 par défaut sur la plupart des caméras ip:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function execute_move_posi2(cam,posi){
  if(cam != 0 && posi == "p2"){
    iframe.src='/live/cam4/decoder_control.cgi?command=33&user=<?php echo $user; ?>&pwd=<?php echo $pwd; ?>';
  }
  else{
    afficheStop();
  }
}

Résultat: lorsque je suis via le http de la caméra, j'ai bien un mouvement qui s'effectue vers la position présélectionnée mais dans l'iframe je n'ai rien puisque la deuxième ligne est supprimée.

On dirait que Chrome ne veut pas exécuter deux à la suite de l'autre.

[SpaceFrog]

le temps qui s'ecoule entre l'interprétation de deux lignes de js est inférieur au millième de seconde ...
tu ne vois que le seconde src ...

[klaiko]

Merci Spacefrog.

C'est exactement ce que je me suis dis aussi. Il exécute le premier puis directement le deuxième méthode "src" à la volée.
C'est ce que je constate dans le débogueur de Chrome, il zap totalement le premier "src" !
Sans être certain je pense que le problème viendrait de la rapidité d’exécution des différents moteurs JS.

Pour résumé:
Avec Firefox il prend le premier "src" en compte et pendant le mouvement le deuxième "src" est également prit en compte ce qui me donne un affichage durant le mouvement.
Avec Chrome il n'y a que le deuxième "src" prit en compte donc aucun mouvement.

Ne faudrait-il pas augmenter la latence entre le premier et le second "src" ?
Ce serait vraiment un paradoxe alors que l'on demande une vitesse d'exécution toujours de plus en plus rapide.

Merci

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
iframe.src='/live/cam4/decoder_control.cgi?command=33&user=<?php echo $user; ?>&pwd=<?php echo $pwd; ?>';
 
setTimeout( function(){  iframe.src='/live/cam4/videostream.cgi?user=<?php echo $user; ?>&pwd=<?php echo $pwd; ?>';}, 5000);

[klaiko]

Voilà j'ai testé avec un timeout de 20ms et ça passe très bien sur Firefox, Chrome et Opéra.
Je n'ai plus de problème, Chrome exécute bien la première instruction puis la deuxième.
Je signale comme résolu.

Je vous remercie encore pour votre aide Spacefrog.

[NoSmoking]

Bonjour,
il y a surement moyen de le faire également sur le onload de l'<iframe>.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
oFrame.onload = function(){
  this.src = reference_de_la_nouvelle_page;
  this.onload = {}; // Important : ne pas oublier de supprimer l'action
};

[klaiko]

NoSmoking j'ai testé votre solution et ça fonctionne aussi avec Chrome.
Ce que je constate avec ces deux solutions le ( Timeout et oFrame.onload = function() ) c'est que pour fonctionner il faut faut des fois que lui envoi un double click.
Parfois la caméra arrive directement à la bonne position mais parfois elle n’effectue qu'un seule mouvement avant d'y arriver.

Je vais continuer à chercher de ce coté et je vous remercie de votre aide.