Sélectionner une page
Données d’une box domotique Eedomus dans une page PHP

Données d’une box domotique Eedomus dans une page PHP

Dans ce second article de la série , je veux afficher une température stockée dans ma box domotique Eedomus + à mon tableau de bord (en PHP, sur Raspberry Pi).

Cet article a été complété le 8 mai 2017.

De quoi je pars ?

d’une page index.php servie par un Raspberry Pi, comme indiqué dans le premier article  de cette série.

l’API de la box Eedomus

Elle est bien documentée ici : API eedomus.

Obtenir une clé d’API Eedomus

Dans https://secure.eedomus.com/, cliquer sur configurer puis « mon compte ».

  1. Cocher la case « autoriser l’API via http » et « sauver ».
  2. Cliquer sur « consulter vos identifiants »

API Eedomus - 1

On obtient ainsi les valeurs de api_user et api_secret qui nous permettront de nous connecter. On accède aussi à un formulaire qui va nous permettre de construire la requête.

Faire une requête pour un capteur spécifique

J’utilise le formulaire précédent puis je copie la requête HTTP obtenue :

API Eedomus - 2

La requête est de type (remplacer api_user et api_secret) :

http://api.eedomus.com/get?api_user=xxx&api_secret=yyy&action=periph.caract&periph_id=166280

Lorsque je la tape dans un navigateur internet, j’obtiens la chaîne JSON suivante :

{ "success": 1, "body":{"periph_id": "166280", "name": "Nest - Température Couloir RdC", "last_value": "24.5", "last_value_text": "", "last_value_change": "2016-08-15 15:50:55"}}

Pour lire cette donnée dans mon fichier PHP, je me suis inspirée de l’exemple donné à la fin du document  API eedomus.

J’ai intégré le code suivant à ma page index.php :

<h3>Autres informations</h3>

		<?php include 'eedomus.php';?>

		<!-- nest temperature ID 166280 -->
		<p>couloir : <?php echo al_get_eedomus_value( 166280, 'last_value' ) ; ?> °C</p>

Et dans le fichier eedomus.php , j’ai intégré une fonction al_get_eedomus_value  :

<?php

// définition des variables
$api_user = 'xxx'; // a récupérer sur votre compte eedomus
$api_secret = 'yyy'; // a récupérer sur votre compte eedomus

/******************************************************************
* appel de l'API eedomus en PHP pour récupérer une donnée
*
* $id = 166280
* $val = 'last_value'
* retournera la température actuellement mesurée par le thermostat Nest
*
*****************************************************************/ 

function al_get_eedomus_value( $id, $val ) {
	
	global $api_user ;
	global $api_secret ;
	
	// construction de l'URL de l'API
	$url = "http://api.eedomus.com/get?action=periph.caract";
	$url .= "&api_user=" . $api_user;
	$url .= "&api_secret=" . $api_secret;
	$url .= "&periph_id=" . $id;

	// appel de l'API
	$result = file_get_contents($url);

	// on controle le résultat
	if (strpos($result, '"success": 1') == false)
	{
	  echo "Une erreur est survenue : [".$result."]";
	}
	else
	{
	  $result = json_decode( $result, true ) ; // true transforme $result en un array
	  $retour = $result['body'][$val];
	  return $retour ;
	}	
	
}

Le résultat est maintenant affiché sur mon tableau de bord :

Affichage PHP de capteur via l'API Eedomus

Mais les données ne sont mises à jour que si je rafraichis le tableau de bord manuellement.

Mettre à jour automatiquement les données de la page PHP

Cette question sur StackOverflow explique comment recharger une page toutes les 30 secondes. Il suffit d’ajouter <meta http-equiv= »refresh » content= »30″ />  en haut de la page PHP.

Comme 15 minutes = 900 secondes, j’ai intégré la ligne  <meta http-equiv= »refresh » content= »900″ /> en haut de ma page PHP. Le haut contient donc maintenant :

<!DOCTYPE html>
<html lang="fr">

<head>
	<meta charset="utf-8">
	<title>Nautilus</title>
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<link href="A-style.css" rel="stylesheet" media="all" type="text/css"> 
	<meta http-equiv="refresh" content="900" />
</head>

Complément (8 mai 2017)

J’ai affiné le contenu de ma page php pour avoir automatiquement la liste des périphériques de l’eedomus. C’est un préalable à un tableau de bord qui lirai automatiquement toutes les données de l’eedomus.

Obtenir la liste des périphériques

Dans le code ci-dessous, la fonction eedomus_url génère les url correctes pour :

  • vérifier qu’on se connecte correctement à la box Eedomus ;
  • Obtenir la liste des périphériques de la box Eedomus ;
  • Lire la valeur d’un périphérique donné de la box Eedomus

la fonction ald_decode_french  permet de lire correctement des textes encodés en français, avec des caractères spéciaux.

	<?php
	
	function eedomus_url( $action, $user_id, $pw ) {
		/* 
		* eedomus_url( "&action=auth.test", $ee_apiuser, $ee_passwd ) construit
		* https://api.eedomus.com/get?api_user=USER&api_secret=SECRET&action=auth.test
		* eedomus_url( "&action=periph.list", $ee_apiuser, $ee_passwd ) construit
		* https://api.eedomus.com/get?api_user=USER&api_secret=SECRET&action=periph.list		
		* eedomus_url( "&action=periph.caract&periph_id=156595", $ee_apiuser, $ee_passwd ) construit
		* https://api.eedomus.com/get?api_user=USER&api_secret=SECRET&action=periph.caract&periph_id=156595
		*
		* ces 3 url renvoient bien une info en Json, en provoenance de l'eedomus dans un navigateur
		*/
		
		$eedomus_get = "https://api.eedomus.com/get?api_user=" ;
		$eedomus_get .= $user_id ;
		$eedomus_get .= "&api_secret=" ;
		$eedomus_get .= $pw ;
		$eedomus_get .= $action ;

		return $eedomus_get ;
	}

	$ee_test = eedomus_url( "&action=auth.test", $ee_apiuser, $ee_passwd ) ; 
	$ee_list = eedomus_url( "&action=periph.list", $ee_apiuser, $ee_passwd ) ; 
	$ee_156595 = eedomus_url( "&action=periph.caract&periph_id=156595", $ee_apiuser, $ee_passwd ) ; 

	function ald_decode_french( $string ) {
		
		$contents = utf8_encode( $string ); 
		$results = json_decode( $contents ); 
		return $results ;
		
	}

Si j’utilise la fonction ald_decode_french  sans la partie ‘utf8_encode’, le résultat est vide car les accents provoquent des erreurs. Ci-dessous, dans l’image, à gauche on a le résultat de <pre><?php print_r ( file_get_contents( $ee_list ) ) ; ?> </pre>  et à droite le résultat de <pre><?php print_r ( ald_decode_french( file_get_contents( $ee_list ) ) ); ?> </pre> . Les accents sont correctement restitués dans la version de droite.

Utilisation de utf8_encode pour des accents dans du Json

Et maintenant ?

Je vais maintenant voir comment un Raspberry Pi peut transmettre une valeur mesurée à l’Eedomus. Ce sera l’objet du prochain article de cette série . Ensuite, je pourrai utiliser le présent tutoriel pour l’afficher sur mon tableau de bord.

Données de Wunderground dans une page PHP

Données de Wunderground dans une page PHP

Aujourd’hui, je veux lire des données issues d’une station météo proche de chez moi via l’API wunderground. Je souhaite qu’elles s’affichent automatiquement dans mon tableau de bord domotique (une page PHP servie par un Raspberry Pi).

De quoi je pars ?

J’ai réglé un Raspberry Pi pour servir une page PHP qui affiche le flux de deux caméras de surveillance (voir l’article Récapitulatif : Raspberry Pi, motion et deux caméras).

Maintenant, je veux ajouter des données issues de capteurs externes ou non. Je commence par insérer des données issues d’une station météo externe, via l’API de wunderground.

Une API ?

J’ai suivi le très bon cours en ligne sur les API de Emily REESE, sur OpenClassRoom ici.

Une API, ou  « Application Programming Interface », est une interface entre un utilisateur et une application. Un menu constitue l’API d’un restaurant par exemple. En informatique, lorsqu’on parle d’API, on parle en général d’API REST (cf sur wikipedia). Elles utilisent des instructions HTTP.

En général les requêtes HTTP à des API REST obtiennent une réponse en JSON (cf  sur wikipedia).

L’API de wunderground

Wunderground est un site qui met à disposition des informations météos. Les personnes qui possèdent une station météo peuvent lui communiquer des données. On a ainsi accès à des données très locales.

J’ai identifié une station locale à Plonéour-Lanvern. Je veux en extraire des données.

Je me suis créé un compte sur Wunderground et j’ai généré une clé API : voir cet article en français pour savoir comment faire.

Avec la console apigee intégrée à wunderground ici, j’ai pu déterminer que la requête est sous la forme :

http://api.wunderground.com/api/APIkey/conditions/q/pws:Station-ID.json

avec APIkey qui est ma clé API (elle ressemble à « b8e924a8f008b81e« ) et Station-ID est égale à « IPLONOUR3 » pour la station qui m’intéresse. On obtient l’ID de la station en cliquant  sur le nom de la station (flèche rouge dans la copie d’écran ci-dessous). j’accède alors à une page dont l’adresse est https://www.wunderground.com/personal-weather-station/dashboard?ID=IPLONOUR3#history. J’ai donc l’ID.

ID d'une station sur Wunderground

Faire une requête en PHP

Je me suis inspirée de cette question sur StackOverflow pour créer ma requête.

Si je met http://api.wunderground.com/api/APIkey/conditions/q/pws:IPLONOUR3.json (remplacer APIkey par votre clé API) dans un navigateur web, j’obtiens en retour une chaîne JSON :

{
  "response": {
  "version":"0.1",
  "termsofService":"http://www.wunderground.com/weather/api/d/terms.html",
  "features": {
  "conditions": 1
  }
	}
  ,	"current_observation": {
		"image": {
		"url":"http://icons.wxug.com/graphics/wu2/logo_130x80.png",
		"title":"Weather Underground",
		"link":"http://www.wunderground.com"
		},
		"display_location": {
		"full":"Ploneour-Lanvern, France",
		"city":"Ploneour-Lanvern",
		"state":"",
		"state_name":"France",
		"country":"FR",
		"country_iso3166":"FR",
		"zip":"00000",
		"magic":"34",
		"wmo":"07201",
		"latitude":"47.900333",
		"longitude":"-4.287129",
		"elevation":"60.00000000"
		},
		"observation_location": {
		"full":"Rue François de Châteaubriand, Plonéour-Lanvern, ",
		"city":"Rue François de Châteaubriand, Plonéour-Lanvern",
		"state":"",
		"country":"FR",
		"country_iso3166":"FR",
		"latitude":"47.900333",
		"longitude":"-4.287129",
		"elevation":"206 ft"
		},
		"estimated": {
		},
		"station_id":"IPLONOUR3",
		"observation_time":"Last Updated on August 15, 3:01 PM CEST",
		"observation_time_rfc822":"Mon, 15 Aug 2016 15:01:45 +0200",
		"observation_epoch":"1471266105",
		"local_time_rfc822":"Mon, 15 Aug 2016 15:04:53 +0200",
		"local_epoch":"1471266293",
		"local_tz_short":"CEST",
		"local_tz_long":"Europe/Paris",
		"local_tz_offset":"+0200",
		"weather":"Clear",
		"temperature_string":"79.9 F (26.6 C)",
		"temp_f":79.9,
		"temp_c":26.6,
		"relative_humidity":"48%",
		"wind_string":"Calm",
		"wind_dir":"NE",
		"wind_degrees":50,
		"wind_mph":0.6,
		"wind_gust_mph":"5.0",
		"wind_kph":1.0,
		"wind_gust_kph":"8.0",
		"pressure_mb":"1018",
		"pressure_in":"30.06",
		"pressure_trend":"0",
		"dewpoint_string":"59 F (15 C)",
		"dewpoint_f":59,
		"dewpoint_c":15,
		"heat_index_string":"81 F (27 C)",
		"heat_index_f":81,
		"heat_index_c":27,
		"windchill_string":"NA",
		"windchill_f":"NA",
		"windchill_c":"NA",
		"feelslike_string":"81 F (27 C)",
		"feelslike_f":"81",
		"feelslike_c":"27",
		"visibility_mi":"N/A",
		"visibility_km":"N/A",
		"solarradiation":"--",
		"UV":"-1","precip_1hr_string":"-999.00 in ( 0 mm)",
		"precip_1hr_in":"-999.00",
		"precip_1hr_metric":" 0",
		"precip_today_string":"0.00 in (0 mm)",
		"precip_today_in":"0.00",
		"precip_today_metric":"0",
		"icon":"clear",
		"icon_url":"http://icons.wxug.com/i/c/k/clear.gif",
		"forecast_url":"http://www.wunderground.com/global/stations/07201.html",
		"history_url":"http://www.wunderground.com/weatherstation/WXDailyHistory.asp?ID=IPLONOUR3",
		"ob_url":"http://www.wunderground.com/cgi-bin/findweather/getForecast?query=47.900333,-4.287129",
		"nowcast":""
	}
}

Les données qui m’intéressent sont :

  • « current_observation » -> « display_location » -> « city »
  • « current_observation » -> « temp_c »
  • « current_observation » -> « relative_humidity »
  • « current_observation » -> « wind_gust_kph »
  • « current_observation » -> « forecast_url »

En PHP, j’ajoute le code suivant à mon fichier index.php :

	<section class="capteurs">

		<h3>wunderground</h3>
		<?php

		// http://stackoverflow.com/questions/20044579/how-to-get-a-value-from-wunderground-json
		$json_string = file_get_contents("http://api.wunderground.com/api/APIkey/conditions/q/pws:IPLONOUR3.json");
		$parsed_json = json_decode($json_string);
		$location = $parsed_json->{'current_observation'}->{'display_location'}->{'city'};
		$temp_c = $parsed_json->{'current_observation'}->{'temp_c'};
		$humidity = $parsed_json->{'current_observation'}->{'relative_humidity'};
		$wind_gust_km = $parsed_json->{'current_observation'}->{'wind_gust_kph'};
		$forecast_url = $parsed_json->{'current_observation'}->{'forecast_url'};
		
		echo "A ${location} : ${temp_c} °C, ${humidity} HR, rafales à ${wind_gust_km} km/h - <a target='_blank' href='${forecast_url}'>prévisions</a>. \n";

		?>
	</section>

Et maintenant mon tableau de bord affiche la température, l’humidité, la vitesse des rafales de vent et un lien vers les prévisions météo locales :

Affichage PHP de données via l'API Wunderground

Et maintenant ?

Je vais maintenant intégrer une donnée issue de ma box domotique Eedomus. Ce sera l’objet du second article de cette série .

Récapitulatif : Raspberry Pi, motion et deux caméras

Récapitulatif : Raspberry Pi, motion et deux caméras

Les 5 précédents articles de cette série explorent différents aspects de la gestion de caméras de surveillance sur Rasberry Pi et la diffusion des flux vidéos sur une page web. Cet article en fait la synthèse.

L’objectif :

A partir d’une Raspberry Pi B+, installer motion réglé correctement pour :

  • gérer deux caméras de surveillance IP ;
  • collecter les vidéos et images générées sur détection de mouvement avec aussi peu de faux positifs que possible ;
  • afficher les flux vidéos en temps réel sur une page web accessible sur le réseau local.

Préparation du Raspberry Pi

  • Installer Raspbian Jessie Lite – voir l’article Mise en service d’un Raspberry Pi
  • Régler le Pi pour fonctionner correctement en wifi sur une adresse fixe 192.168.1.104 (nom nautilus) – voir l’article Raspberry Pi : connexion internet en wifi et/ou IP fixe

Pour moi toutes ces étapes réalisées correspondent à l’image de carte sd « jessie-lite-wifi fixe-103-2016-07-16.img « , dans le répertoire « Downloads\2016-07 Pi Images « . Il me suffit de régler l’adresse wifi et le nom du Pi comme suit :

  • Connecter le Pi en ethernet, sans dongle wifi ;
  • Editer /etc/dhcpcd.conf   et modifier l’adresse IP attribuée ;
  • Taper raspi-config  puis modifier Hostname (advanced options) et changer le nom vers « nautilus ». 
  • Mettre le dongle wifi sur le Pi puis taper « reboot  » pour redémarrer.

Ensuite se reconnecter en wifi et mettre le Pi à jour :

  • apt-get update
  • apt-get upgrade
  • rpi-update

Enlever la connexion ethernet et taper « reboot  » pour redémarrer.

uname -a  nous indique la version du système d’exploitation en fonctionnement.

Le résultat, le 14/08/2016 est 4.4.17+ #901 Fri Aug 12 17:48:40 BST 2016 armv6l GNU/Linux  .

df -h  montre qu’on utilise 17% de la carte SD de 8 Go.

Installer motion

apt-get install -y libjpeg62-turbo libjpeg62-turbo-dev  libavformat-dev  libavcodec-dev  libavutil-dev libc6-dev zlib1g zlib1g-dev
apt-get install motion

Régler motion pour mes deux caméras

Il me faut 3 fichiers de configuration (droits d’accès 664, propriétaires motion / video) puisque j’ai deux caméras (cf l’article une caméra IP avec une vieille tablette android ?) :

  • /etc/motion/motion.conf  pour tous les éléments communs aux deux caméras ;
  • /etc/motion/thread0.conf  pour la caméra ‘Foscam’ ;
  • /etc/motion/thread1.conf  pour la caméra ‘galaxy’ ;

J’exécute donc les commandes suivantes pour créer les fichiers, et donner les bons droits :

chown -R root:root /etc/motion/
touch /etc/motion/thread1.conf
touch /etc/motion/thread0.conf
chown root:motion /etc/motion/thread0.conf
chown root:motion /etc/motion/thread1.conf
chmod -R 664 /etc/motion/
chmod 755 /etc/motion/
Nota : on trouve de nombreux tutoriels dans lesquels les droits de /etc/motion sont en 664 mais ça ne fonctionne pas dans mon cas.
Faire une copie de motion.conf au cas où :
cp /etc/motion/motion.conf /etc/motion/motion.conf.OLD

créer certains fichiers et donner les droits d’accès

Exécuter chaque ligne de commande non commentée :

# /usr/bin/motion : 755
chmod 755 /usr/bin/motion

#/var/lib/motion/ ne sert pas

#var/run/motion (pour motion.pid)
mkdir /var/run/motion
touch /var/run/motion/motion.pid
chown -R motion:motion /var/run/motion/
chmod 755 /var/run/motion/
chmod 644 /var/run/motion/motion.pid

# thread2.conf (foscam) : /home/jf/motion/log/foscam
# thread1.conf (tablette) : /home/jf/motion/log/galaxy
mkdir /home/jf/motion
mkdir /home/jf/motion/galaxy
mkdir /home/jf/motion/foscam
touch /home/jf/motion/motion-log.log
chown -R root:motion /home/jf/motion/
chown motion:motion /home/jf/motion/motion-log.log
chmod -R 644 /home/jf/motion/
chmod 777 /home/jf/motion/
chmod 775 /home/jf/motion/foscam/
chmod 775 /home/jf/motion/galaxy/
Attention, les fichiers créés avec touch via Cygwin sur mon PC sont en mode sauts de ligne Windows. Il faut les passer en saut de ligne UNIX (/home/jf/motion/log/motion-log.log et /var/run/motion/motion.pid).

éditer les fichiers de configuration

Dans etc/motion/motion.conf  les lignes suivantes sont modifiées ou décommentées :

process_id_file /var/run/motion/motion.pid 
logfile /home/jf/motion/log/motion-log.log
v4l2_palette 8
width 640
height 480

netcam_keepalive on

# Number of motion thread to show in SDL Window (default: 0 = disabled)
sdl_threadnr 0 

text_double on
target_dir /home/jf/log/

# Restrict stream connections to localhost only (default: on)
stream_localhost off

webcontrol_port 8080  #must be in motion.conf, not in a thread.

# Restrict control connections to localhost only (default: on)
webcontrol_localhost off

# Output for http server, select off to choose raw text plain (default: on)
webcontrol_html_output on

thread /etc/motion/thread0.conf
thread /etc/motion/thread1.conf

Attention : il faut bien vérifier que thread0.conf et thread1.conf ont des sauts de ligne UNIX.

etc/thread0.conf  règle la configuration pour la caméra devant la maison (évidemment il faut modifier USER et PWD ainsi que l’adresse IP pour que ça corresponde à la caméra) :

# caméra FOSCAM devant la maison
# thread0.conf

videodevice /dev/video0
netcam_url http://USER:PWD@192.168.X.X:80/videostream.cgi?user=USER&pwd=PWD

############################################################
# Régler sensibilité aux mouvements pour cette caméra extérieure

threshold 3000
threshold_tune off
noise_level 32
noise_tune off
despeckle_filter EedDl
smart_mask_speed 10
lightswitch 25
minimum_motion_frames 3

############################################################

# Target base directory for pictures and films
target_dir /home/jf/motion/log/foscam

snapshot_filename f-%v-%Y%m%d%H%M%S-snapshot
picture_filename f-%v-%Y%m%d%H%M%S-%q
movie_filename f-%v-%Y%m%d%H%M%S
timelapse_filename f-%Y%m%d-timelapse

############################################################

stream_port 8081

etc/thread1.conf  règle la configuration pour la caméra créée sur la vieille tablette samsung selon l’article une caméra IP avec une vieille tablette android ? :

#caméra Galaxy tab dans la maison

videodevice /dev/video1

netcam_url http://192.168.X.X:8090/video

############################################################

threshold 3000
threshold_tune off
noise_level 32
noise_tune off
despeckle_filter EedDl
smart_mask_speed 10
lightswitch 25
minimum_motion_frames 3

############################################################

# Target base directory for pictures and films
target_dir /home/jf/motion/log/galaxy

snapshot_filename g-%v-%Y%m%d%H%M%S-snapshot
picture_filename g-%v-%Y%m%d%H%M%S-%q
movie_filename g-%v-%Y%m%d%H%M%S
timelapse_filename g-%Y%m%d-timelapse

############################################################

stream_port 8082

Démarrer motion comme un service

Dans /etc/default/motion, modifier la ligne suivante (passer à yes) : 

start_motion_daemon=yes

Redémarrer le Pi avec reboot.

http://192.168.1.104:8082/ et http://192.168.1.104:8081/ affichent les deux flux vidéos sur un navigateur local.

Si ça ne fonctionne pas, modifier /etc/init.d/motion  comme indiqué dans cet article, en y ajoutant la ligne sleep 30 . Pour moi, ça fonctionne sans.

réglage motion comme un service

Pour déboguer, on peut souhaiter savoir quel est l’utilisateur du service motion :

ps -aef | grep motion

Dans mon cas, ça montre deux utilisateurs (1ère colonne) : motion et root.

motion-user

A ce stade, si on tape 192.168.1.104:8081 ou 192.168.1.104:8082 dans un navigateur du réseau local, on voit les flux vidéos en temps réel. 

Supprimer les anciens fichiers image et vidéo 

 Comme dans l’article Supprimer les fichiers vidéo et image de plus de deux jours sauf que le script bash est modifié pour tenir compte des deux répertoires de stockage d’image :
  • créer le fichier cameradeletecron.sh dans le répertoire /home/jf/motion et lui donner les droits d’acès 764
  • Dans ce fichier, mettre les lignes suivantes :
#!/bin/bash

# /home/jf/motion/camera–delete–cron.sh

# efface les fichiers avi et jpg de plus de deux jours 
find /home/jf/motion/foscam -maxdepth 1 -name '*.avi' -type f -mtime +2 -exec rm {} \;
find /home/jf/motion/foscam -maxdepth 1 -name '*.jpg' -type f -mtime +2 -exec rm {} \;
 
find /home/jf/motion/galaxy -maxdepth 1 -name '*.avi' -type f -mtime +2 -exec rm {} \;
find /home/jf/motion/galaxy -maxdepth 1 -name '*.jpg' -type f -mtime +2 -exec rm {} \;
  •  Dans le cron, via crontab -e, insérer les lignes suivantes :
#env
SHELL=/bin/bash
HOME=/home/jf
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
 
* 1 * * * bash /home/jf/motion/camera-delete-cron.sh
  • Redémarrer le Pi avec reboot.

Visualiser les flux vidéos sur une page PHP

  • Installer apache et PHP – voir l’article Un serveur Web sur mon Raspberry Pi.
  • dans le répertoire /var/www/html , créer une page index.php  qui affiche les deux flux vidéos et y ajouter un fichier A-style.css .
  • supprimer index.html

index.php contient :

<!DOCTYPE html>
<html lang="fr">

<head>
	<meta charset="utf-8">
	<title>Nautilus</title>
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<link href="A-style.css" rel="stylesheet" media="all" type="text/css"> 
</head>

<body class="pi-dashboard">

	<H1>Tableau de bord maison 192.168.1.104 (nautilus)</h1>
	 
	<section class="video-surveillance">

		<img name="Galaxy-Tab" class="stream" src="https://192.168.1.104:8082/?action=stream" width="600" height="450" alt="Live Feed" title="Galaxy Tab GT-P6210" />

		<img name="Foscam-FI8905W" class="stream" src= "http://192.168.1.104:8081/?action=stream" width="600" height="450" title="Foscam FI8905W"/>
		
	</section>
	
	<section class="capteurs">

		<h3>Autres informations</h3>
		<p>A venir...</p>
		
	</section>
 
</body>
</html>

A-style.css contient :

body {
 padding: 0.3%;
 font-family: Georgia, "Times New Roman",
 Times, serif;
 color: purple;
 background-color: #d8da3d ;
 width: 95%;
 text-align: center;
}

section.video-surveillance {
 display: flex; /* or inline-flex */
 justify-content: space-around;
 display: inline-block;
}
 
h1 {
 font-family: Helvetica, Geneva, Arial,
 SunSans-Regular, sans-serif ;
 margin-top: 1em;
}

img.stream {
 padding: 1%;
}


@media only screen and (min-width: 800px){
 
 section.video-surveillance {
 flex-direction: row ;
 }
 
 img.stream {
 max-width: 45% ;
 height: auto;
 }

}

@media only screen and (max-width: 800px){
 
 section.video-surveillance {
 flex-direction: column ;
 }
 
 img.stream {
 max-width: 95%;
 height: auto;
 }
 
}

A ce stade, la page php s’affiche lorsqu’on tape « nautilus » dans un navigateur local (192.168.1.104 dans une tablette)et les deux flux vidéos s’affichent en streaming.

df -h  montre qu’on utilise maintenant 19% de la carte SD de 8 Go.

Mode opératoire pour créer des supports de cours en ligne

Mode opératoire pour créer des supports de cours en ligne

Je crée un cours (une formation) en ligne pour mon site professionnel. Je me rends compte que ce n’est pas si simple que ça de créer des vidéos à partir de powerpoint (2010) et d’un enregistrement de ma voix. J’ai déjà exposé les grands principes dans un article précédent (créer une vidéo à partir d’un Powerpoint (2010)). Ici je met en ligne mon mode opératoire précis. Ca servira au moins à m’en souvenir la prochaine fois !

Etape 1. Créer le Powerpoint.

Rien à dire de spécial là dessus.

Etape 2. Ecrire le texte qui sera ensuite dit

Etape 2. Ecrire le texte qui sera ensuite ditJe le met dans les commentaires, en caractères de taille 14.

Au fur et à mesure, je crée le résumé que je met sur la diapo et chaque fois que je résume une idée je passe à la ligne dans les commentaires.

(Cliquer sur l’image pour la voir en plus grand).

Etape 3. Préparer les changements de vue

Etape 3. Préparer les changements de vueLorsque je dirai mon texte il faudra que je cliques sur le diaporama pour changer de page ou faire afficher les animations correspondants à ce que je dis.

Je crée donc les animations et j’indique « CLIC » dans le texte pour me souvenir que c’est à faire à ce stade.

(Cliquer sur l’image pour la voir en plus grand).

Etape 4. Créer l’aide visuelle pour dire le texte

ppt-video-3J’imprime en pdf le diaporama en mode pages de commentaire.

C’est ce document qui me servira de script pour dire le texte.

(Cliquer sur l’image pour la voir en plus grand).

Etape 5. s’entraîner et vérifier

J’ai connecté un deuxième écran à mon PC. Je pourrais aussi utiliser un vidéoprojecteur en le réglant pour qu’il ne duplique pas l’écran de l’ordinateur.

J’ouvre le pdf du texte à dire dans le deuxième écran.

Je démarre le diaporama dans le premier écran.

Je dis le texte une ou deux fois pour vérifier que les clics vont bien, que mon texte va bien. Si nécessaire je modifie le diaporama et je crée un nouveau pdf du texte à dire.

Etape 6. Dire le texte dans le powerpoint

J’utilise un micro Yeti (ici sur amazon). Il est cher mais permet de régler la direction du son. C’est très utile dans certaines circonstances. Je le connecte en USB à mon ordinateur et je vérifie que le bouton mute est désactivé (la LED rouge est fixe lorsqu’il peut enregistrer, clignotante lorsqu’il est sourd / mute).

Nota : la façon de faire un enregistrement sonore et minuter les animations est décrite dans le premier article sur les vidéos à partir d’un Powerpoint.

Je fais un premier test vite fait pour m’assurer que le micro est bien réglé :

  • j’enregistre quelques phrases puis j’arrête l’enregistrement ;
  • Je lis la diapo en mode diaporama. Si le son est bon, j’efface l’enregistrement et je procède maintenant à la version définitive.
  • je commence à la première diapo, en enregistrant à la fois le son et le minutage.
  • Lorsque j’ai fini la première diapo, j’arrête l’enregistrement.
  • Je me place sur la deuxième diapo et je choisis « démarrer l’enregistrement à partir de la diapositive actuelle ».
  • Et ainsi de suite jusqu’à la fin du diaporama. Evidemment, il est prudent de faire des sauvegardes intermédiaires.

Etape 7 : vérifier puis transformer en vidéo

J’enregistre en qualité ‘Qualité HD & ordinateur’ puisque je vais ensuite la mettre en ligne via Viméo qui gérera la qualité en fonction de la bande passante de l’internaute.

J’obtiens un fichier WMV d’environ 8 Mo pour 58 » de vidéo (en qualité internet et DVD, la même vidéo ferait 3 Mo.

Etape 8 : mettre la vidéo en ligne (sur VIMEO)

J’ai acheté un compte « plus » sur Vimeo, qui permet de gérer la confidentialité des vidéos mises en ligne. C’est très simple.

On peut mettre en ligne soit en faisant glisser le fichier dans la zone correspondante, soit, encore mieux, via dropbox (c’est beaucoup plus rapide puisque je ne monte qu’une seule fois le fichier sur internet).

Etape 9 : régler les paramètres de la vidéo (sur VIMEO)

Paramètres basic :

  • choisir la vignette

Paramètres Confidentialité :

  • Qui peut regarder cette vidéo : masquer cette vidéo sur vimeo.com (Cette vidéo peut être intégrée à d’autres sites mais ne peut pas être visionnée sur Vimeo.com)
  • Où est-ce que cette vidéo peut être intégrée ? : seulement sur les sites de mon choix (et saisir les noms de domaine)
  • Qui peut commenter cette vidéo : tout le monde
  • Que peuvent faire les gens avec cette vidéo : ne rien cocher (pas de téléchargement, pas d’ajout à une collection)

Paramètres collections

  • Album : cocher le bon album

Paramètres Intégration

  • Pré-réglage « cours – par défaut »

Paramètres intégration Vimeo

Paramètres Avancé :

  • Licence Creative Commons : aucune

Intégrer la vidéo sur une page WordPress

Le domaine d’intégration doit avoir été défini dans les paramètres de confidentialité.

Dans Viméo, cliquer sur « share » en haut à droite de la vidéo. Copier le lien et le coller directement dans l’éditeur visuel du contenu WordPress de destination

Et voilà, c’est fait !

Raspberry Pi : créer un serveur de musique avec mpd

Raspberry Pi : créer un serveur de musique avec mpd

J’ai de la musique digitalisée sur un disque dur. Je voudrais la partager dans toute la maison sans avoir à laisser un PC gourmand en route 24/24. Je crée donc un serveur de musique sur un Raspberry Pi disposant d’un disque dur externe. J’utilise mpd comme serveur.

Note du 11/1/2018 : ce serveur ne me plaisait pas vraiment car je ne trouvais pas d’application Android vraiment agréable pour le gérer. Et je ne voyais pas comment l’utiliser pour gérer des listes de lecture et des destinations différentes. J’ai donc repris le collier sur le sujet. J’ai créé d’autres articles de la série pour créer un serveur bien mieux, avec mini DLNA et UPnP.

Dernière MAJ : 11 janvier 2018

Comment fonctionne un serveur de musique ?

J’ai eu beaucoup de mal à comprendre quoi choisir…

Je me suis refusée à prendre des systèmes qui arrivent avec la distribution, je voulais apprendre quelque chose en installant un serveur par dessus une distribution Raspbian classique (Jessie Lite dans mon cas).

Lorsqu’on a de la musique sur un disque dur, il nous faut trois éléments pour pouvoir l’entendre quelque part :

  1. un serveur de musique, qui gère les fichiers, les indexe et les met à disposition ;
  2. un client, qui agit sur le serveur pour lui dire quoi jouer, créer des « playlists », lui dire où émettre les sons générés par la playlist.
  3. un « renderer » (je ne vois pas comment traduire ça), qui restitue la musique dans des haut-parleurs.

mpd tient lieu de serveur. Sur le même pi, on place un client (mpc) avec lequel on peut intéragir en ligne de commande. Et si on connecte le Pi contenant mpd à des haut-parleurs (ou à un ampli), c’est mpd qui assure la fonction de « renderer ».

Si je veux jouer de la musique à partir du même disque dur dans d’autres endroits, j’ai deux possibilités :

  1. lire le flux audio du premier Pi et le jouer sur l’équipement qui le lit. Par exemple, je peux l’écouter sur une tablette équipée de MPdroid, qui va tenir lieu de client, mais qui va aussi servir de renderer pour un éventuel flux audio.
  2. installer d’autres Pi équipés de mpd. Dans ce cas, il semblerait (je n’ai pas encore essayé) qu’il faut installer icecast sur le premier Pi et c’est icecast qui se charge de transmettre les fichiers au deuxième Pi.

Préparer le Raspberry Pi

J’utilise un Raspberry Pi B+, avec un dongle wifi Edimax EW-7811Un. Pour le préparer, suivre ces trois autres articles de ce site :

J’ai donc un Pi correctement installé, avec un disque dur externe monté sur le répertoire /media/iomega et partagé par samba.

Note du 2/1/2018 : je l’ai aussi fait sur un Pi 3 sans souci

Installer mpd

J’ai principalement utilisé les sources suivantes :

Installer le serveur mpd, le client mpc et le gestionnaire de son alsa-utils.

apt-get install mpd mc alsa-utils

Installer les codecs qui pourraient être utiles :

apt-get install lame flac faad vorbis-tools

Vérifier que le son sort du Raspberry Pi

brancher des haut-parleurs dans la prise jack audio du Pi. On utilise la carte audio (plutôt mauvaise sur le Pi version 1).

Selon cet article, en anglais, on teste un son comme ça :

aplay /usr/share/sounds/alsa/Front_Right.wav

Si aucun son ne sort, on vérifie que le driver audio Broadcom est bien présent

lsmod | grep snd_bcm2835

S’il y a quelque chose qui s’affiche, c’est bon. Sinon, il faut charger le driver avec

modprobe snd_bcm2835

Si la commande s’éxécute sans message d’erreur c’est que c’est bon.

Mais aucune des deux commandes suivantes ne produit de son dans mes hauts parleurs

speaker-test -t sine -f 440 -c 2 -s 2
aplay /usr/share/sounds/alsa/Front_Center.wav

Je force donc l’utilisation de la sortie analogique dans laquelle les haut-parleurs sont connectés. Sinon c’est la sortie HDMI qui est utilisée par défaut.

amixer cset numid=3 1

Je n’entend toujours rien. Je monte le volume des haut-parleurs et là c’est bon.

configurer mpd

Pour bien comprendre le contenu du fichier de configuration, voir The Music Player Daemon – User’s Manual.

mpd a en principe créé un utilisateur ‘mpd’, qui appartient au groupe ‘audio’.

Modifier la configuration de samba

Les utilisateurs du groupe ‘audio’ doivent pouvoir lire les contenus de /media/iomega/MULTIMEDIA/musique et écrire dans /media/iomega/MULTIMEDIA/mpd.

Dans etc/smb.conf etc/samba/smb.conf (modifié le 2/1/2018)

valid users = @users, @audio  #utilisateurs ayant le droit de lire = de groupes @group
read only = yes
write list = @users, @audio   # utilisateurs ayant droit d’écrire
browseable = yes
public = yes

Je pense que ça ne sert à rien de régler valid users  et write list  puisque j’ai défini public=yes .

Modifier la configuration de mpd

éditer /etc/mpd.conf pour que :

music_directory		"/media/iomega/MULTIMEDIA/musique"
playlist_directory	"/media/iomega/MULTIMEDIA/musique/mpd"
db_file			"/media/iomega/MULTIMEDIA/musique/mpd/mpd.db"
user			« mpd »
#group               	"audio"
auto_update     	"yes"

volume_normalization    "yes"

bind_to_address          "192.168.1.102"
port			 "6600"

audio_output {
	type		"alsa"
	name		"Ampli salon"
#	device		"hw:0,0"	# optional
#	mixer_type      "hardware"      # optional
#	mixer_device	"default"	# optional
#	mixer_control	"PCM"		# optional
#	mixer_index	"0"		# optional
}

auto_update permet une mise à jour automatique de la base de données lorsque les fichiers sont modifiés.

Le réglage de la sortie audio de type « alsa » est identique à la configuration par défaut. La seule différence est le nom de cette sortie (« ampli salon »), qui permet d’identifier les sorties dans les clients.

Note : Si j’utilisais une carte son usb, il faudrait changer la ligne device             « hw:0,0 » , probablement en mettant « hw:1,0 ».

Pour savoir quels sont les numéros de cartes audio, taper :

cat /proc/asound/modules

Ça dit quelque chose comme :

0 snd_bcm2835
1 snd_sub_audio

La carte audio du Pi (driver snd_bcm2835) est numérotée 0. La carte USB (ici driver snd_sub_audio) est n°1.

On peut le vérifier en connectant la carte USB aux haut-parleurs puis en tapant :

aplay -D plughw:1,0 /usr/share/sounds/alsa/Front_Right.wav

Si le volume est suffisant (assez élevé), on entend une voix qui dit « front » puis « right ».

Ca fonctionne avec une carte audio à 2.82 € pièce (livraison gratuite si au moins 3 achetées) achetée sur ce site chinois.

J’ai par erreur laissé le # devant group. Cette instruction n’est donc pas utilisée. Ca n’a pas gêné, sans doute car j’avais réglé le disque comme public avec samba.

Créer les répertoires, fichiers et droits d’accès nécessaires

Créer tous les répertoires ou fichiers listés dans etc/mpd.conf et qui n’existent pas. Ensuite, j’ai placé mon utilisateur windows (alwindows) dans le groupe audio, et l’utilisateur mpd dans le groupe users mais je ne suis pas certaine que ça soit indispensable.

adduser mpd users
adduser mpd audio
adduser alwindows audio

Régler les droits d’accès et les propriétaires de tout ce qui se trouve dans les répertoires utilisés par mpd et définis dans mpd.conf :

chown -R mpd:audio /media/iomega/MULTIMEDIA
chmod -R g+rwx /media/iomega/MULTIMEDIA

chown -R mpd:audio /var/log/mpd
chmod -R g+rwx /var/log/mpd

chown -R mpd:audio /run/mpd
chmod -R g+rwx /run/mpd

chown -R mpd:audio /var/lib/mpd
chmod -R g+rwx /var/lib/mpd

Redémarrer samba :

service smbd restart

lancer mpd

mpd

Si bug « « socket: Failed to bind to ‘192.168.1.102:6600’: Address already in use » arrêter mpd avec :

service mpd stop

Puis le redémarrer avec

mpd --no-daemon --stdout --verbose

On voit la base de données qui se met à jour. Ca défile de 19h45 à 19h53 pour 65 Go de musique.

En cas de problème, il peut être utile de lire le log /var/log/mpd/mpd.log

Normalement, pour lancer mpd comme un service, on tape :

/etc/init.d/mpd start

tester avec MPdroid

MAJ : MPdroid fonctionne correctement mais son interface utilisateur est vraiment compliquée. J’ai installé M.A.L.P. – MPD Client, et c’est plus simple à utiliser.

Il suffit de renseigner l’adresse du serveur (192.168.1.102) et du port (6600) et le client se lance sur une tablette android.

Ca fonctionne : de ma tablette je déclenche de la musique.

Ecouter des radios web avec mpd

Je me suis inspirée de Un serveur musical avec MPD et Installation de MPD sur un raspberry pi !.

Dans le répertoire déclaré en tant que « playlist_directory » lors de la configuration de mpd (« /media/iomega/MULTIMEDIA/musique/mpd »), créer un fichier radios.m3u , dans lequel on place les url des radios sous la forme :

#EXTM3U
#EXTINF:-1,Country
http://streaming.radionomy.com/NashvilleEdge

Les sites European radios  et flux Radio liste les adresses de streaming des radios.

Ensuite, régler le propriétaire et les droits d’accès de ce fichier :

chown -R mpd:audio /media/iomega/MULTIMEDIA/musique/mpd/radios.m3u
chmod -R g+rwx /media/iomega/MULTIMEDIA/musique/mpd/radios.m3u

Réglages et création d’un flux audio

Imaginons que j’aime bien la musique qui se joue dans le salon et que j’ai envie de l’écouter dans mon bureau. Dans ce cas, il me suffit d’écouter le flux audio issu du salon. Mpd peut être configuré pour générer un flux audio qu’on peut écouter avec un navigateur internet ou autre lecteur de musique capable de lire un flux internet. On peut même créer une radio web diffusée à l’extérieur. Mais bon, ce n’est pas ce que je veux faire !

Pour générer un flux audio, éditer etc/mpd.conf et régler le « audio_output » de type « httpd » :

audio_output {
	type		"httpd"
	name		"flux httpd"
	encoder		"lame"			# optional, vorbis or lame
	port		"8000"
	bind_to_address "192.168.1.102"   		# optional, IPv4 or IPv6
	quality		"5.0"			# do not define if bitrate is defined
#	bitrate		"128"			# do not define if quality is defined
	format		"44100:16:1"
	max_clients "0"         # optional 0=no limit
}

redémarrer mpd avec service mpd restart .

Pour accéder au flux ainsi défini, on tape l’adresse suivante dans un navigateur (ou un lecteur capable de lire un flux réseau) :

  • http://192.168.1.102:8000/mpd.mp3 si on a réglé l’encodeur sur « lame »
  • http://192.168.1.102:8000/mpd.ogg si on a réglé l’encodeur sur « vorbis »

Mais cette adresse ne fonctionne que si l’on a lancé la génération d’un flux de streaming avec un client. J’ai utilisé Chimney, disponible gratuitement sur le « store » Windows 10 :

  • lancer la lecture de quelque chose ;
  • dans l’onglet général, cocher « stream to desktop » ;
  • dans l’onglet output, cochés les outputs « ampli salon » et « flux httpd » (ce sont les noms que j’ai défini dans mpd.conf) ;
  • dans l’onglet streaming, rien à faire si on n’a pas modifié le port par défaut (8000).

Ensuite, je peux ouvrir le flux audio, dans VLC ou un navigateur internet.

Utilisation de MPdroid

MPdroid est un client android pour mpd.

MAJ : MPdroid fonctionne correctement mais son interface utilisateur est vraiment compliquée. J’ai installé M.A.L.P. – MPD Client, et c’est plus simple à utiliser.

Une fois que le client est installé, il suffit de renseigner les éléments suivants :

  • Hôte : 192.168.1.102
  • Port : 6600
  • Hôte streaming : 192.168.1.102
  • Port streaming : 8000
  • Mot de passe : rien
  • Suffixe url streaming : mpd.mp3
  • Notification persistante : pas coché

Utilisation de VLC (sur PC) pour lire le flux audio

Pour créer un lien rapide vers le flux, on ouvre le flux une première fois à la main, en indiquant http://192.168.1.102:8000/mpd.mp3 dans Média / ouvrir un flux réseau. On lance la lecture.

Ensuite, dans Média / Enregistrer la liste de lecture, on enregistre, par exemple sous le nom salon-stream.xspf  .

Celà crée un fichier (que l’on peut éditer avec notepad++ par exemple) :

<?xml version="1.0" encoding="UTF-8"?>
<playlist xmlns="http://xspf.org/ns/0/" xmlns:vlc="http://www.videolan.org/vlc/playlist/ns/0/" version="1">
	<title>Liste de lecture</title>
	<trackList>
		<track>
			<location>http://192.168.1.102:8000/mpd.mp3</location>
			<title>flux httpd</title>
			<extension application="http://www.videolan.org/vlc/playlist/0">
				<vlc:id>2</vlc:id>
				<vlc:option>network-caching=1000</vlc:option>
			</extension>
		</track>
	</trackList>
	<extension application="http://www.videolan.org/vlc/playlist/0">
			<vlc:item tid="0"/>
	</extension>
</playlist>

Et voilà, un simple clic et j’accède au flux audio sur mon ordinateur Windows.

Et maintenant ?

Je peux explorer l’intérêt de disposer d’UPnP comme expliqué dans cet article de « lesbonscomptes.com » ou avec un media player spécifique tel que proposé ici sur GitHub.

Il faut aussi que je trouve un client sous Windows 10 plus agréable que Chimney.