J'ai réussi à afficher le flux RTSP d'une caméra dans monitor, mais je n'ai pas conservé cette solution trop gourmande en bande passante à mon goût.
De plus, la conversion du flux par FFMPEG (dans mon cas) prend trop de ressources pour un pi, trop de frames sont perdues.
J'ai plutôt cherché du côté des snapshots, ces images qu'on peut récolter à la volée grâce à une API de la caméra.
Après tout c'est comme ça que c'est affiché dans Domoticz à première vue.
Le résultat fonctionne plutôt bien.
Évidemment le nombre d'images par seconde dépend de la vitesse du réseau, de celle de l'ordinateur qui affiche monitor et de celle de la caméra.
Mais même sur un smartphone en 3G c'est utilisable.
Si vous souhaitez utiliser cette modification, voici la marche à suivre.
Je vous conseille de lire une première fois en entier ce qui suit, puis de vous lancer.
On se situe dans le répertoire qui contient monitor, d'habitude c'est /home/pi/domoticz/www/monitor/
1. Modifier /home/pi/domoticz/www/monitor/js/frontpage.js
Autour de la ligne 15, on trouve l'appel à quelques fonctions.
Ajoutez l'appel à la fonction GetSnapCams qu'on créera un peu plus loin.
- snapcam1.PNG (13.1 Kio) Consulté 12361 fois
- snapcam2.PNG (7.34 Kio) Consulté 12361 fois
juste avant function SceneToggle, insérer GetSnapCams.
Le point d'insertion devrait être à la ligne 1553.
Cette nouvelle fonction introduit un nouveau type de toggle, Snapcam.
On l'utilisera dans /home/pi/domoticz/www/monitor/js/frontpage.settings.js pour traiter les snapshots de notre caméra.
Code : Tout sélectionner
function GetSnapCams()
{
// for( var ii = 0, len = $.PageArray.length; ii < len; ii++ ) {
var ii = 0, len = $.PageArray.length;
jsKata.nofreeze.forloop(
// the condition
function() { return ii < len - 1; },
// the incrementor
function() { ii++; },
// this is what will be executed
function fct() {
if ( $.PageArray[ii][1] === 'Snapcam' ) { //Special nummer, link in cell (test)
var vlabel= $.PageArray[ii][2]; // cell number from HTML layout
var src_1 = $.PageArray[ii][3]; // Local network
var src_2 = $.PageArray[ii][4]; // www
if(src_2 === '' || typeof src_2 === 'undefined'){
src_2 = [location.href.replace( "index.html", "" ).replace(/\/$/, ''),'/icons/offline.jpg'].join('');
}
$(['#',vlabel].join('')).html(['<canvas id="video-canvas" class=\'camera\'></canvas>'].join(''));
var canvas = document.getElementById('video-canvas'),
context = canvas.getContext('2d'),
imageObj = new Image(),
imageSrc = src_1 + "&",
unique = new Date();
var img_width = canvas.width;
var img_height = canvas.height;
console.log('context.drawImage(imageObj, 0, 0, ' + img_width + ', ' + img_height + ');');
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0, img_width, img_height);
unique = new Date();
imageObj.src = imageSrc + unique.getTime();
};
imageObj.onerror = function(){
console.log('on error: '+this.src);
this.src = src_2 + "&" + unique.getTime();
console.log('on error: '+this.src);
};
imageObj.src = imageSrc;
$(['#',vlabel,' canvas'].join('')).click(function(){
var elem = document.getElementById("popup_camera");
var height = window.getComputedStyle(elem,null).getPropertyValue("height");
var width = window.getComputedStyle(elem,null).getPropertyValue("width");
console.log('canvas dimension according to css. height=' + height + ' - width=' + width);
$('#popup_camera').html(['<canvas id="video-canvas2" width="' + width + '" height="' + height + '"></canvas>'].join(''));
var canvas = document.getElementById('video-canvas2'),
context = canvas.getContext('2d'),
imageObj = new Image(),
imageSrc = src_1 + "&",
unique = new Date();
var img_width = canvas.width;
var img_height = canvas.height;
console.log('Zoom context.drawImage(imageObj, 0, 0, ' + img_width + ', ' + img_height + ');');
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0, img_width, img_height);
unique = new Date();
imageObj.src = imageSrc + unique.getTime();
};
imageObj.onerror = function(){
console.log('on error: '+this.src);
this.src = src_2 + "&" + unique.getTime();
console.log('on error: '+this.src);
};
imageObj.src = imageSrc;
lightbox_open('camera', 25400);
});
if ($(['#desc_',vlabel].join('')).length > 0) {
$(['#desc_',vlabel].join('')).empty();
}
}
});
}J'ai utilisé celui de https://javascript-minifier.com/, ça a très bien fonctionné.
Il vous suffit de récupérer le code compacté et le mettre dans le répertoire de /home/pi/domoticz/www/monitor/js/ sous le nom frontpage.min.js
Pour ceux qui ne voudraient pas se lancer dans la modif de sources, je joins ici le fichier modifié d'après la version de monitor sous Github actuellement et datée du 30 mai 2017. Si vous avez modifié le source /home/pi/domoticz/www/monitor/js/frontpage.js, enregistrez le aussi avec celui qui est comprimé, pour des raisons de cohérence.
Le voici aussi pour ceux qui ne veulent pas toucher les sources.
3. Modifier le fichier /home/pi/domoticz/www/monitor/js/frontpage_settings.js comme vous le faites d'habitude pour une caméra, mais utilisez le toggle Snapcam à la place de camera.
Les autres paramètres sont identiques, l'un pour le flux LAN, l'autre pour le flux WAN. Bien sûr, charge à vous d'utiliser l'API qui permet d'obtenir un snapshot.
Ça ressemble à ceci sur une caméra Foscam :
Code : Tout sélectionner
http://<ip de la caméra>:<port>/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=<nom utilisateur>&pwd=<mot de passe>Vider le cache devrait éviter de perdre trop de temps à savoir pourquoi ça ne marche pas.
Vous pouvez vous arrêter là si vous êtes satisfaits.
Évidemment, comme à l'origine, un popup avec l'image agrandie apparaît quand on clique dessus.
Perso, ma caméra affichant l'image en 16:9, la déformation me gênait dans monitor qui affiche en 640/480.
Si vous souhaitez jouer sur le format, il faut tripoter le fichier /home/pi/domoticz/www/monitor/css/global.css et chercher à la ligne 305 #popup_camera.
Attention #popup_camera est référencé plusieurs fois, celui qui est intéressant est celui de la ligne 305.
- snapcam3.PNG (9.33 Kio) Consulté 12361 fois
- snapcam4.PNG (6.78 Kio) Consulté 12361 fois
Voilà, c'est terminé.
