Discussion :

[grunk]

Bonjour à tous,

J'ai un script assez simple qui met à jour une image sur une page web en allant chercher une image donnée par une caméra et ce à intervalles réguliers.
J'obtiens ainsiune vidéo à un framerate relativement bas.

La méthode de mise à jour de l'image est la suivante :

Code :

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

1
2
var monImage = $('idimageachanger') // utilisation de prototype
monImage.src = 'includes/createImage.php?cam=0&unique='+new Date()*Math.random();

L'appel de la page php est répétée via un setTimeout toute les 83ms pour obtenir 12ips.

Sous IE pas vraiement de problème mais sous Firefox la mémoire n'est pas libérée entre chaque image et je me retrouve très rapidement avec une RAM saturée et un pc qui swap :/

Ma méthode de mise à jour d'image est elle mauvaise ? Y'a t'il plus légr pour le système ?
Comment puis je éviter cette envolée de la conommation mémoire sous Firefox (et Opéra)
Merci pour vos réponses

Edit : j'ai également essayer d'uttiliser setAttribute("src", mapage.php) mais c'est pas mieux

[sachav]

Avez-vous fait un setTimeout tres court pour appeler la fonction qui change l'image ?
Vous pouvez faire quelque chose comme :

Code :

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

1
2
3
4
5
6
7
 
function switchImg() {
var monImage = $('idimageachanger') // utilisation de prototype
monImage.src = 'includes/createImage.php?cam=0&unique='+new Date()*Math.random();
setTimeout("switchImg()",15);
}
window.onload=switchImg;

[grunk]

Bonjour,
Oui le setTimeout est très cours (83ms) et même avec votre méthode Firefox utilise de plus en plus de mémoire.
Ce qui m'intrigue c'est qu'il consomme environ 1Mo a chaque refresh de l'image alors que cette dernière ne fait que 10ko.

Dans le doute j'ai essayer un timeout très long mais le problème reste le même. En revanche avec IE aucun problème la cosommation mémoire reste stable.

[sachav]

Bonjour,

Pouvez-vous m'envoyer tout votre code ?
(Et si possible, l'URL des images en "live" qui marche ?)
Je supose que ceci est pour faire un systeme de telesurveillance, n'est-ce pas?

Merci.

[grunk]

Pour la partie du code gérant la vidéo la voici, en revanche je ne peut pas afficher les images sur le web pour le moment :/

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
function createNewPic(idCam,idImg)
{
	var nbCamera  = cameraDispo.length // Camera dispo / tableau JS venant de PHP
// Si la caméra n'est pas déjà selectionnée
	if($('cam_'+idCam+'_etat').value == 0) 
	{
 
		// Pour le nombre total de caméras connectées
		for(var i=0;i<nbCamera;i++)
		{
			if(cameraDispo[i]==idCam) // Si on est sur la camera cliquée
			{
				// Passage à l'état selectionnée
				$('cam_'+idCam+'_etat').value = 1;
				nbCameraAffichees++;
 
				if($('cadre').value==0) // Méthode bourrin pour régler le pb du mode 1x (A revoir un jour...ou pas)
					placeCamera[0]= 255;
 
				for(var j=0;j<placeCamera.length;j++)
				{
					if(placeCamera[j]==255) // Si on trouve une case à 255 on place alors la camera à cet endroit
					{
						placeCamera[j]= idCam;
						// Génération d'une nouvelle image
						if($('cadre').value==0)
							monImage      = $(idImg);
						else
							monImage      = $(idImg+j);
						setTimeout(function(){displayVideo(idCam,monImage)},1000);
						break;
					}
				}
				updateAffCam();
			}
			if(cameraDispo[i]!=idCam && $('cadre').value==0)
			{
				// Passage à l'état non selectionnée
				$('etat_'+cameraDispo[i]).value = 0;
				for(var j=0;j<cameraStart.length;j++)
				{
					if(placeCamera[j]==cameraDispo[i]) // Si on trouve une case à 255 on place alors la camera à cet endroit
					{
						placeCamera[j]= 255;
					}
				}
				updateAffCam();
			}
		}
		//$('listeCamera').value = placeCamera.join(','); // On linéarise la tableau js dans la page html pour le récup en php par la suite
	}
	// Sinon la caméra est déjà selectionnée
	else
	{		
		// Passage à l'état non selectionnée
		$('cam_'+idCam+'_etat').value = 0;
		nbCameraAffichees--;
		for(var j=0;j<32;j++)
		{
			if(placeCamera[j]==idCam) // Si on trouve une case à 255 on place alors la camera à cet endroit
			{
				placeCamera[j]= 255;
				if($('cadre').value==0)
					monImage      = $(idImg);
				else
					monImage      = $(idImg+j);
				imageTemp     = new Image();
				imageTemp.src = 'images/select_cam.jpg';	// On affiche l'image de selection
				monImage.src  = imageTemp.src;
				clearTimeout(Timer);
				monImage = null;
				imageTemp = null;
				break;
			}
		}
		updateAffCam();
	}		
}
 
/**
 * Génération vidéo par appel successif d'image
 * @param {int} idCam Id de la caméra à afficher
 * @param {objet} image dont la source va être changée
 */
function displayVideo(idCam,monImage)
{
	//clearTimeout(Timer);
	//imageTemp     = new Image();
	monImage.src = 'includes/createImage.php?act=1&cam='+idCam+'&unique='+new Date()*Math.random();	// partie aléatoire pour éviter le cache du navigateur
	//monImage.src  = imageTemp.src;
	setTimeout(function(){displayVideo(idCam,monImage)},1000);
}
/*
 * Mise à jour de l'affichage des nom de cam
 */
function updateAffCam()
{
	var nbCamera  = cameraDispo.length;
	for(var i=0;i<nbCamera;i++)
	{
		if($('cam_'+cameraDispo[i]+'_etat').value==1) // Si on est sur la camera cliquée
		{
			// Changement de la class d'affichage
			Element.removeClassName('cam_'+cameraDispo[i],'bg_menu_cam_off');
			Element.addClassName('cam_'+cameraDispo[i],'bg_menu_cam_on');
		}
		else
		{
			Element.removeClassName('cam_'+cameraDispo[i],'bg_menu_cam_on');
			Element.addClassName('cam_'+cameraDispo[i],'bg_menu_cam_off');
		}
	}
}
 
/**
 * Insertion d'une caméra dans la mosaique
 * @param {int} idCam id de la caméra à afficher
 */
function insertCam(idCam)
{
	var typeCadre = $('cadre').value;	// Type d'affichage (1x,4x,10x ...)
	var etatCam   = $(idCam+'_etat').value;
	var nbCam     = cameraDispo.length;
	var idCamera = idCam.substring((idCam.lastIndexOf("_")+1));
 
	if(typeCadre == 0) // Cadre 1x
	{
		if(nbCameraAffichees<1)
			createNewPic(idCamera,'img_1x');
		else
		{
			nbCameraAffichees =0;
			createNewPic(idCamera,'img_1x');
		}
	} // Fin type cadre 1x
 
/*
 * Dessin du mode 1x
 */
function do1x()
{
	if(placeCamera[0]==255)
		var imageCam = 'images/select_cam.jpg';
	else
		var imageCam = 'includes/createImage.php?act=1&cam='+placeCamera[0]+'&unique='+new Date()*Math.random();
 
	var tab1x = '<img id="img_1x" src="'+imageCam+'" width="728" height="570" />';
	$('affichage').innerHTML = tab1x;
}

Pour plus de clareté :
L'interface se compose d'une liste de caméra et au clic sur une de ces caméra son image s'affiche.
Au départ la fuite mémoire est très faible (quelque ko) mais au bout de 30 sc à une minute j'atteinds allégrement les 1Mo/s , un peu comme si FF cumulait le poids de toutes les images mise à jour (15ko par image).

J'ai lu pas mal d'article sur les fuites mémoires du à FF mais je n'ai pas trouver de cas de figure correspondant à mon problème.

Merci