Exemple de détection de mouvements webcam et reconnaissance d'objets

**xor AX AX** · 07/08/2023, 11h00

Bonjour,

Je suis en train de m'amuser un peu à coder :

afficher le flux vidéo d'une webcam dans Firefox
faire une détection de mouvement
afficher le nom de l'objet qui a déclenché le mouvement

Je n'ai rien inventé mais juste mis en oeuvre des choses existantes :

tensorflow pour la reconnaissance d'objets
diff-cam-engine.js pour la détection de mouvement

Le code n'est pas terrible (junkCode).

index.html

Code html :

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="site.css" rel="stylesheet">
	</head>
	<body>
		<script src="diff-cam-engine.js"></script>
		<script src="site.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
		<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
		<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@1.0.0"> </script>
		<script>main();</script>
	</body>
</html>

site.css

Code CSS :

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
body {
	margin: 170px 20px 20px;
	text-align: center;
}
 
.wrapper {
	display: inline-block;
	position: relative;
	width: 640px;
	height: 480px;
	background-color: #000;
}
 
img {
	position: absolute;
	right: 10px;
	top: -160px;
}
 
.knocked-over {
	transform: rotate(450deg);
	transition: transform 1s;
}
 
video {
	position: absolute;
	left: 0;
	top: 0;
	width: 640px;
	height: 480px;
	transform: scaleX(-1); /* flip video, like a mirror */
}
 
.motion-box {
	//display: none;
	position: absolute;
	border: 4px solid #fff;
	transition: all .1s;
}

site.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
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
let _model=undefined;
let _debug=1;
let _motionBox=document.querySelector("#motionBox");
 
let scale = 10;	// capture resolution over motion resolution
let isActivated = false;
let isTargetInSight = false;
let isKnockedOver = false;
let lostTimeout;
 
class $$page
{	constructor()
	{	this.frag=document.createDocumentFragment();
	 	this.parent=undefined;
	}
	add({tag="",id="",text="",border="",width="",height="",classes=""})
	{	let elem=document.createElement(tag);
		if(id!="") elem.id=id;
		if(text!="") elem.textContent=text;
		if(border!="") elem.style.border="10px solid red";
		if(width!="") elem.width=width;
 		if(height!="") elem.height=height;
	 	if(classes) elem.className=classes;
	 	if(this.parent==undefined)
		{	this.frag.appendChild(elem);
		 	this.parent=elem;
		}
	 	else
		{	this.parent.appendChild(elem);
		}
	}
	render()
	{	document.body.appendChild(this.frag);
	}
}
 
function initSuccess()
{	DiffCamEngine.start();
}
 
function initError()
{	alert('Something went wrong.');
}
 
function startComplete()
{	setTimeout(activate, 500);
}
 
function activate()
{	isActivated = true;
	debug("activated");
}
 
function capture(payload)
{	if (!isActivated || isKnockedOver)
	{	return;
	}
	let box=payload.motionBox;
	if (box)
	{	// video is flipped, so we're positioning from right instead of left
		let right=box.x.min*scale+1;
		let top=box.y.min*scale+1;
		let width=(box.x.max-box.x.min)*scale;
		let height=(box.y.max-box.y.min)*scale;
		let videoElem=document.querySelector("#video");
		let motionElem=document.querySelector("#motionBox");
		motionElem.style.position="absolute";
		motionElem.style.right=right+"px";
		motionElem.style.top=top+"px";
		motionElem.style.width=width+"px";
		motionElem.style.height=height+"px";
		motionElem.style.border="2px solid red";
		motionElem.style.visibility="visible";
/*		Modèle mobilenet
		_model.classify(payload.imageData).then(predictions =>
		{	for(let i=0;i<predictions.length;i++)
			{	debug("Predictions: ",predictions[i].className+"=>"+predictions[i].probability);
			}
		});
*/
		// Modèle coco-ssd
		_model.detect(payload.imageData).then(predictions =>
		{	for(let i=0;i<predictions.length;i++)
			{	if(predictions[i].score>.85)
				{	debug("Predictions: ",predictions[i].class+"=>"+predictions[i].score);
				}
			}
		});
		if (!isTargetInSight)
		{	isTargetInSight=true;
			debug("seen");
		}
		else
		{	//debug("fire");
		}
 
		clearTimeout(lostTimeout);
		lostTimeout = setTimeout(declareLost, 2000);
	}
/*
	// video is flipped, so (0, 0) is at top right
	if (payload.checkMotionPixel(0, 0))
	{	knockOver();
	}
*/
}
 
function declareLost()
{	isTargetInSight = false;
 	document.querySelector("#motionBox").style.visibility="hidden";
 	debug("target lost");
}
 
function knockOver()
{	isKnockedOver = true;
	clearTimeout(lostTimeout);
	document.querySelector("#motionBox").style.visibility="hidden";
	debug("knock over");
}
 
function debug(text,...data)
{	if(_debug==1)
	{	if(data.length!=0)
		{	console.debug(new Date().toLocaleTimeString([],{hour:'2-digit',minute:'2-digit',second:'2-digit',fractionalSecondDigits:3})+" -> "+text,data);
		}
		else
		{	console.debug(new Date().toLocaleTimeString([],{hour:'2-digit',minute:'2-digit',second:'2-digit',fractionalSecondDigits:3})+" -> "+text);
		}
	}
}
 
async function modelLoad()
{	//_model=await mobilenet.load();
	_model=await cocoSsd.load();
}
 
async function main()
{	let $page=new $$page();
	$page.add({tag:"div",classes:"wrapper"});
	$page.add({tag:"video",id:"video",classes:"wrapper"});
	$page.add({tag:"div",id:"motionBox",classes:"motion-box"});
	$page.render();
	document.querySelector('#video').autoplay=true;
	DiffCamEngine.init({video: document.getElementById('video'),captureIntervalTime: 50,includeMotionBox: true,includeMotionPixels: true,initSuccessCallback: initSuccess,initErrorCallback: initError,startCompleteCallback: startComplete,captureCallback: capture});
	//coSsd.load().then(model =>{_model=model;});
	await modelLoad();
}

NB : activer la console debug (F12) pour voir les évènements et données
Si cela peut intéresser qqn...

**mathieu** · 07/08/2023, 12h28

j'ai trouvé un code qui s'appelle "diff-cam-engine" à l'adresse suivante :
https://github.com/lonekorean/diff-cam-engine
c'est ce que vous utilisez ?

**xor AX AX** · 07/08/2023, 12h56

Oui, désolé je n'ai pas encore mis les références.

En fait, j'utilise cette lib pour la détection + ai pris comme base https://lonekorean.github.io/diff-ca...rret-security/ avec certaines modifications dont ja suppression de jQuery.

Pour tensorflow, j'ai utilisé https://codelabs.developers.google.c...t-detection/#0

**Archimède** · 07/08/2023, 13h39

Sympa, ça peut être utile...

**xor AX AX** · 08/08/2023, 08h11

Petit update :

le nom de l'objet détecté est affiché dans le rectangle de spot
le nom de l'objet est prononcé (text to speech)
nettoyage du code

site.css

Code CSS :

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
body
{	margin:170px 20px 20px;
	text-align:center;
}
#wrapper
{	display:inline-block;
	position:relative;
	width:640px;
	height:480px;
	background-color:#000;
}
.knocked-over
{	transform:rotate(450deg);
	transition:transform 1s;
}
#video
{	position:absolute;
	left:0;
	top:0;
	width:640px;
	height:480px;
	transform:scaleX(-1); /* flip video, like a mirror */
}
#motion-box
{	display:none;
	position:absolute;
	border:4px solid #fff;
	transition: all .1s;
}
#motionText
{	background-color:red;
	color:white;}

site.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
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
// Sources :
//		https://lonekorean.github.io/diff-cam-scratchpad/turret-security/
//		https://codelabs.developers.google.com/codelabs/tensorflowjs-object-detection/#0
//
// www.smartblob.eu
 
const SCALE=10;		// capture resolution over motion resolution
 
let _model=undefined;
let _debug=1;
let _isActivated=false;
let _isTargetInSight=false;
let _isKnockedOver=false;
let _lostTimeout;
let _lastClass=undefined;
 
class $$page
{	constructor()
	{	this.frag=document.createDocumentFragment();
	 	this.parent=undefined;
	}
	add({parent="",tag="",id="",text="",border="",width="",height="",classes=""})
	{	let elem=document.createElement(tag);
		if(id!="") elem.id=id;
		if(text!="") elem.textContent=text;
		if(width!="") elem.width=width;
 		if(height!="") elem.height=height;
	 	if(classes) elem.className=classes;
	 	if(this.parent==undefined)
		{	this.frag.appendChild(elem);
		 	this.parent=elem;
		}
	 	else
		{	if(parent=="")
			{	this.parent.appendChild(elem);
			}
			else
			{	this.frag.querySelector("#"+parent).appendChild(elem);
			}
		}
	}
	render()
	{	document.body.appendChild(this.frag);
	}
}
 
function initSuccess()
{	DiffCamEngine.start();
}
 
function initError()
{	alert('Something went wrong.');
}
 
function startComplete()
{	setTimeout(activate,500);
}
 
function activate()
{	_isActivated=true;
	debug("activated");
}
 
function capture(payload)
{	if (!_isActivated || _isKnockedOver)
	{	return;
	}
	let box=payload.motionBox;
	if (box)
	{	// video is flipped, so we're positioning from right instead of left
		let right=box.x.min*SCALE+1;
		let top=box.y.min*SCALE+1;
		let width=(box.x.max-box.x.min)*SCALE;
		let height=(box.y.max-box.y.min)*SCALE;
		let videoElem=document.querySelector("#video");
		let motionElem=document.querySelector("#motionBox");
		motionElem.style.position="absolute";
		motionElem.style.right=right+"px";
		motionElem.style.top=top+"px";
		motionElem.style.width=width+"px";
		motionElem.style.height=height+"px";
		motionElem.style.border="2px solid red";
		motionElem.style.visibility="visible";
/*		Modèle mobilenet
		_model.classify(payload.imageData).then(predictions =>
		{	for(let i=0;i<predictions.length;i++)
			{	debug("Predictions: ",predictions[i].className+"=>"+predictions[i].probability);
			}
		});
*/
		// Modèle coco-ssd
		_model.detect(payload.imageData).then(predictions =>
		{	for(let i=0;i<predictions.length;i++)
			{	if(predictions[i].score>.85)
				{	if(predictions[i].class!=_lastClass)
					{	_lastClass=predictions[i].class;
						debug("Predictions: ",predictions[i].class+"=>"+predictions[i].score);
						document.querySelector("#motionText").textContent=predictions[i].class+"=>"+predictions[i].score.toFixed(2)
						speech(predictions[i].class);
					}
				}
				else
				{	document.querySelector("#motionText").textContent="";
				}
			}
		});
		if (!_isTargetInSight)
		{	_isTargetInSight=true;
			debug("seen");
		}
		else
		{	//debug("fire");
		}
 
		clearTimeout(_lostTimeout);
		_lostTimeout=setTimeout(declareLost,2000);
	}
/*
	// video is flipped, so (0, 0) is at top right
	if (payload.checkMotionPixel(0, 0))
	{	knockOver();
	}
*/
}
 
function declareLost()
{	_isTargetInSight=false;
 	document.querySelector("#motionBox").style.visibility="hidden";
 	debug("target lost");
}
 
function knockOver()
{	_isKnockedOver=true;
	clearTimeout(_lostTimeout);
	document.querySelector("#motionBox").style.visibility="hidden";
	debug("knock over");
}
 
function debug(text,...data)
{	if(_debug==1)
	{	if(data.length!=0)
		{	console.debug(new Date().toLocaleTimeString([],{hour:'2-digit',minute:'2-digit',second:'2-digit',fractionalSecondDigits:3})+" -> "+text,data);
		}
		else
		{	console.debug(new Date().toLocaleTimeString([],{hour:'2-digit',minute:'2-digit',second:'2-digit',fractionalSecondDigits:3})+" -> "+text);
		}
	}
}
 
async function modelLoad()
{	_model=await cocoSsd.load();
}
 
async function main()
{	let $page=new $$page();
	$page.add({tag:"div",id:"wrapper"});
	$page.add({tag:"video",id:"video"});
	$page.add({tag:"div",id:"motionBox"});
	$page.add({parent:"motionBox",tag:"div",id:"motionText"});
	$page.render();
	document.querySelector('#video').autoplay=true;
	DiffCamEngine.init({video:document.getElementById('video'),captureIntervalTime:50,includeMotionBox:true,includeMotionPixels:true,initSuccessCallback:initSuccess,initErrorCallback:initError,startCompleteCallback:startComplete,captureCallback:capture});
	await modelLoad();
}
 
function speech(text)
{	speechSynthesis.speak(new SpeechSynthesisUtterance(text));
}
}

**xor AX AX** · 21/08/2023, 23h01

Bonjour,

J'ai modifié tout cela en enlevant dans l'immédiat la détection de mouvement.

Voici l'aspect de l'état actuel :

Nom : img01.png
Affichages : 323
Taille : 750,8 Ko

Nom : img01.png
Affichages : 323
Taille : 750,8 Ko

Tout n'est pas encore fonctionnel (choix de la caméra, effacement des logs).

1/3 gauche : flux caméra. On peut en faire une capture (bouton) qui sera envoyée au 1/3 centre. On peut aussi charger une image locale (bouton) qui sera envoyée au 1/3 centre
1/3 centre : on peut changer le modèle d'IA, lancer une analyse par l'IA sélectionnée (ici résultat sur une image trouvée sur le net) et sauvegarder l'image affichée
1/3 droit : log des actions effectuées

Mes questions :

cela intéresse-t-il quelqu'un (car je vais continuer à travailler sur cela) ?
si oui au 1. le forum n'est certainement pas le meilleur medium (singulier de media) pour suivre les évolutions du script. Quelle est la meilleure solution ?
voulez-vous (si oui au 1) que je publie le nouveau code correspondant (je ne veux pas polluer le forum)
il fait chaud chez vous ?

Mes excuses au modo car j'ai dû violer plusieurs règles du forum. J'ai trop de choses à gérer en même temps dont un passage (fantastique) de w*ndows à Linux Mint + la vie, l'univers et le reste.

*spoiler*
La réponse est 42

**mathieu** · 23/08/2023, 07h20

vous nous montrez vos travaux en javascript donc je pense que vous êtes complètement dans le bon forum pour cela.
ensuite si vous voulez nous partager votre code, je pense que vous devriez mettre votre code sur une plateforme spécialisée en indiquant une licence libre.

je pense particulièrement à github mais j'ai l'impression qu'ils sont entrain de glisser vers l'exagération sécuritaire avec le forçage de la double authentification par exemple. donc ça pourrait être intéressant d'étudier une alternative comme framagit :
https://docs.framasoft.org/fr/gitlab/

Exemple de détection de mouvements webcam et reconnaissance d'objets

JavaScript

Vue hybride

Partager

Partager