Afficher l'image en direct d'une caméra en plein écran depuis le dashboard

[pierre-gilles]

Pour information, afin de pouvoir être prêt au moment où je commencerais ce développement, j’ai commencé des spécifications fonctionnelles afin d’être sûr du besoin.

Fonctionnalité

L’objectif est de pouvoir voir le flux live vidéo (et audio?) d’une caméra depuis le tableau de bord de Gladys.

L’utilisateur peut cliquer sur un bouton sur la box « Caméra » pour afficher l’image en direct et en plus grand (mockup ci-dessous non contractuel), et accéder à un flux live.

Limites

Afin de ne pas surcharger les instances locales ( en terme d’usage CPU ), et Gladys Plus en distant ( ça coûte cher le streaming vidéo ), je propose les limites suivantes :

• Maximum 1 stream simultanée
• Max 5 minutes par stream ( retour au tableau de bord ensuite )
• Résolution de 480p, 720p ou 1080p, choisi par l’utilisateur selon sa configuration. Au vu « l’instance moyenne » de l’utilisateur Gladys, je ne pense pas que streamer aux 3 formats et faire de l’adaptatif selon la connexion internet du client est réaliste, ça serait trop consommateur en terme de ressources. On fera plus de tests ensemble lors d’une alpha privée je pense.

Roadmap

J’ai écris les specs techniques de mon côté, et pu faire un estimatif du temps de développement. C’est beaucoup moins que ce que je pensais, mais ça reste un développement qui coûte cher

Dès que j’ai finis tout ce que j’ai en développement, je pense que cette fonctionnalité est la prochaine « grosse » qui peut débarquer sur Gladys !

[lmilcent]

Les limites me semblent « équitables », surtout pour la limite des 5 minutes d’affichage.

Question concernant Gladys Plus : le fonctionnement pourrait-il être différent si on est en accès direct sur Gladys ?

Car passer par le « cloud » Gladys Plus, la limite se tient. Mais accéder en local, il n’y aura plus qu’un problème de CPU potentiel, mais pas d’impact réseau.

Soit :

• La limite des 5 minutes n’est pas active en mode « local »
• Une configuration du service « camera » permet de retirer cette limitation en local seulement (option non cochée par défaut)

Car je m’imagine bien vouloir potentiellement accéder pendant 10 minutes à 2 ou 3 caméra en direct s’il se passe quelque chose d’important à la maison (quitte à se connecter en VPN pour ne pas utiliser le cloud et avoir la limitation).

@pierre-gilles

• Résolution de 480p, 720p ou 1080p, choisi par l’utilisateur selon sa configuration. Au vu « l’instance moyenne » de l’utilisateur Gladys, je ne pense pas que streamer aux 3 formats et faire de l’adaptatif selon la connexion internet du client est réaliste, ça serait trop consommateur en terme de ressources. On fera plus de tests ensemble lors d’une alpha privée je pense.

Si le flux arrive en 1080p, Gladys va automatiquement « downgrade » la qualité ? Ce n’est pas trop consommateur en ressource ?

[pierre-gilles]

Pour l’instant je n’ai pas encore statué si j’allais développer cette fonctionnalité hors Gladys Plus, car c’est vraiment 2 développements différents qui fonctionneront différemment.

Là mon objectif en 2023 c’est vraiment de bétonner l’offre Gladys Plus pour la rendre attractive et être rentable sur le projet

@lmilcent

Car je m’imagine bien vouloir potentiellement accéder pendant 10 minutes à 2 ou 3 caméra en direct s’il se passe quelque chose d’important à la maison (quitte à se connecter en VPN pour ne pas utiliser le cloud et avoir la limitation).

L’idée est que Gladys Plus réponde au besoin, si les limites sont trop basses, alors on les change ! Si tu dois utiliser ton VPN, c’est que Gladys Plus fait pas le boulot ^^

1 caméra simultanée c’est pas assez ?

Quand je dis « 5 minutes », c’est juste qu’à la fin des 5 minutes il faut re-cliquer pour lancer le live, c’est pour éviter les utilisateurs qui laissent un onglet ouvert sans s’en servir, mais en soit si tu veux regarder 10 minutes d’affiler il faudra juste cliquer

@lmilcent

Si le flux arrive en 1080p, Gladys va automatiquement « downgrade » la qualité ? Ce n’est pas trop consommateur en ressource ?

Non, 1080p envoyé = 1080p affiché !

[guim31]

Je me pose un peu les mêmes question que @lmilcent et je suis assez d’accord que niveau usage il serait intéressant de pouvoir regarder plusieurs flux en live.
Exemple chez moi j’ai deux caméras qui regardent l’avant de ma maison, j’en ai 2 car le champ de vision de chacune ne permet pas de tout couvrir et une caméra avec vue sphère toute déformée ne m’intéresse pas.

Chez moi j’ai l’habitude de checker en live les 2 caméras en même temps car en fait ça me permet un aperçu global et pas morceau par morceau.

Voilà pour mon retour car d’un point de vue développement je n’imagine pas ce qu’il en est de la taille des flux VS la taille des tuyaux VS la sécurisation des données…
Disons que dans un monde idéal plusieurs streams simultanés seraient les bienvenus ^^

Concernant la limite des 5min, serait-il faisable de ne revenir au dashboard qu’en cas d’inactivité de l’utilisateur ? (comme on le fait tous pour éviter une mise en veille de notre ordi en faisant bouger la souris).

[spenceur]

Hello je trouve les propositions vraiment tres intéressantes !
En revanche, je ne comprend pas le besoin de passer par la version payante de gladys pour accéder a une camera

Si je suis chez moi sur la tablette au mur je souhaite check fast une camera.
La tablette est tjrs sur gladys (local) et au clic sur limage j’affiche le live pendants x secondes.
Si je souhaite y accédez par le cloud, je passe par G+

Donc pour moi, il ne faut pas que ce dev soit only G+.

Pour moi tu as deux chantiers là,

• le live video dans gladys
• l’encryption de bout en bout dans loffre G+

Si un jour tu fais ce que tu voulais faire (plusieurs niveau d’abonnements), ceux qui souscris au flux live crypté de A a Z accède a leurs caméra via l’extérieur, les autres n’y accède pas et au clic tu propose de up vers le niveau x de l’abonnement pour accéder a cette fonctionnalité.

Quen penses tu?

[pierre-gilles]

J’ai commencé un premier POC de ce développement, ça marche vraiment bien !

J’ai rajouté un nouveau bouton pour passer en live (l’icône n’est pas figée) :

Petite vidéo démo :

Il y a une petite latence pour « attraper » le flux, je vais faire plein de tests pour réduire au max cette latence, après on y coupera pas il y en aura forcément une.

@spenceur

Si un jour tu fais ce que tu voulais faire (plusieurs niveau d’abonnements), ceux qui souscris au flux live crypté de A a Z accède a leurs caméra via l’extérieur, les autres n’y accède pas et au clic tu propose de up vers le niveau x de l’abonnement pour accéder a cette fonctionnalité.

Je vais y réfléchir

[AlexTrovato]

Et dire que j’allais commencer de mon côté sans même avoir vu tout ça, j’ai hâte devoir le code !

[pierre-gilles]

Salut à tous !

J’ai bien avancé sur la fonctionnalité aujourd’hui, et bonne nouvelle c’est 100% fonctionnel de mon côté, autant en local que via Gladys Plus. Je suis très content du rendu

Autant en local que via Gladys Plus, le streaming vidéo sera chiffré de bout en bout pour garantir votre vie privée.

Je vous avoue que j’ai pas mal galéré pour cette partie, car je voulais du vrai streaming chiffré de bout en bout ( Ce qui est assez différent d’un streaming chiffré uniquement ).

Pour chaque « session » de streaming, Gladys génère une clé de chiffrement unique qui sera détruite après la session. Quand vous streamez via Gladys Plus, l’instance locale la transmet au navigateur en chiffrant cette clé avec la clé publique du frontend, pour que celui-ci et seulement celui-ci ait connaissance de la clé de chiffrement.

Ce qu’il reste à faire

J’aimerais faire comme pour Enedis et fournir au plus vite une alpha privée à un premier batch de testeurs, surtout pour avoir des retours sur la partie Gladys Plus car j’ai des vrais besoins de tests « en réel » pour savoir si la latence est acceptable chez vous.

Avant de fournir cette alpha privée, je dois tester pas mal de cas afin que ce soit vraiment propre en terme d’UX.

Surtout, je dois m’assurer qu’il n’y ait pas de fuite de mémoire, car cette fonctionnalité est assez prone à laisser des flux tourner en arrière plan.

Dans le cas de Gladys Plus, il y a 3 streaming séparés, et donc si l’un se coupe, il faut que les autres se coupent aussi pour ne pas qu’il y ait des flux « fantôme » et inutile en arrière plan :

Tout le travail est donc de tester tous les cas possible (L’utilisateur quitte son navigateur, l’instance redémarre, etc…)

Je vous tiens au courant dès que j’ai plus de choses à vous montrer.

[guim31]

Très chaud pour tester ça ! C’est une fonctionnalité que j’attend avec impatience, tout bêtement car j’utilise parfois Gladys pour ouvrir mon portail, il s’agit juste d’une commande type impulsion, mais si je ne suis pas en face de mon portail rien ne m’indique vraiment si je viens de l’ouvrir / le stopper / le fermer.

Donc la vue en direct du portail serait une sécurité super intéressante pour moi !!

[pierre-gilles]

Salut à tous !

J’ai bossé à fond hier et aujourd’hui pour finir ce développement cette semaine, et c’est chose faite

Cette fonctionnalité est disponible en alpha privée. J’ai envoyé des invitations à un groupe limité d’utilisateurs pour l’instant, et selon les retours j’étendrais cette alpha.

Si vous êtes intéressé pour tester cette fonctionnalité en alpha (il faut savoir lancer une image Docker), mettez un message ici

[guim31]

Intéressé

[lmilcent]

intéressé !

[pierre-gilles]

Salut à tous !

J’ai travaillé sur les différents retours que j’ai eu lors de l’alpha privée.

Merci à @lmilcent @AlexTrovato @guim31 pour ces retours précieux

Amélioration UX

De manière générale, j’ai amélioré l’UX de la fonctionnalité, avec plus d’explications et des messages d’erreurs claires aux bons endroits :

Si le flux n’est pas un flux vidéo :

Le responsive a été amélioré sur mobile :

Lancement automatique du streaming

@guim31 a fait la demande d’un mode permettant de lancer automatiquement le flux en ouvrant le tableau de bord.

C’est désormais possible pour ceux qui le souhaitent :

Cette option est néanmoins désactivée par défaut car selon le nombre de caméras, votre configuration, celle-ci peut-être trop lourde pour votre instance ( si vous avez 4 caméras sur le tableau de bord, cela peut-être utile pour 1 caméra mais pas toute )

Sur Gladys Plus, selon l’usage je rajouterais peut-être des gardes fous car le streaming vidéo est très consommateur en ressources, et notamment en bande passante ce qui est coûteux !

[guim31]

Je suis fan !

[Mastho]

Mince ! J’ai raté ce fil de discussion ! Tu peux m’ajouter si jamais t’as encore besoin de tests

[pierre-gilles]

@Mastho c’est fait

[pierre-gilles]

Mauvaise nouvelle découverte lors de l’alpha, Safari sur iPhone n’est pas supporté par ce développement

Ce développement utilise l’API « MediaSource », qui n’est pas supporté par Safari iPhone:

Safari sur iPad OS 13 le supporte, ainsi que Safari sur MacOS on peut donc espérer que ça vienne vite dans les prochaines releases d’iOS

Les utilisateurs sur iOS verront donc ce message pour l’instant :

Sans vouloir troller, cette API est disponible sur Android depuis 2014 et sur plein d’autres navigateurs depuis un bout en temps (Je dis ça, pourtant je suis full Apple )

Je ne pense pas que ce soit un blocage technique, mais plus un blocage « concurrentiel » pour empêcher la concurrence de créer des players vidéos custom sur mobile. Espérons que ça change !

Edit: Mes recherches sur Twitter montre une réponse d’un ingénieur Apple qui travaille sur Webkit et qui dit que c’est bien une limitation technique, l’implémentation sur MacOS et iPadOS n’est pas satisfaisante selon eux et ils veulent faire mieux sur iOS :

[guim31]

Lancement des trolls Android / Apple dans 3…2…1…

[pierre-gilles]

Parlons un peu des limites de cette intégration côté Gladys Plus !

La bande passante et le stockage n’étant pas gratuit, il n’est naturellement pas possible de proposer du streaming de caméra en illimité côté Gladys Plus.

Si quelqu’un arrive avec 100 caméras en 4k qui tournent 24/24, à la fin du mois c’est la faillite du projet

J’ai donc mis pour l’instant une limite mensuelle en terme de bande passante, qui comprend la bande passante « entrante » et « sortante » de l’infrastructure Gladys Plus.

Je ne m’engage pas sur cette limite qui pourra changer en fonction de l’usage (vers le haut ou vers le bas)

A terme, selon l’usage on pourra réfléchir à différents plans Gladys Plus / ou des add-ons payants pour ceux qui veulent gérer un parc de caméra plus large.

Je sais que certaines entreprises de caméras font payer à la caméra, je ne sais pas encore si c’est ce que je ferais, mais ça peut-être une option

Si certains ont un retour d’expérience des pratiques qu’ils ont vu sur le marché par rapport à ça, je suis preneur !

Chez Reolink par exemple:

Chez Eviz: