web-dev-qa-db-fra.com

Meilleure pratique actuelle pour diffuser des vidéos en direct dans un navigateur Web?

Nous développons un produit de caméra IP qui diffuse des vidéos H.264/MPEG4/MJPEG via RTSP/UDP. Il a une interface Web, nous utilisons actuellement le plugin VLC Firefox pour permettre la visualisation du flux RTSP en direct dans le navigateur, mais Firefox abandonne la prise en charge des plugins NPAPI, c'est donc actuellement une impasse.

La caméra elle-même est un SoC ARM SoC (pensez au niveau Raspberry Pi) relativement peu puissant), nous n'avons donc pas de grandes ressources de rechange pour faire des choses comme transcoder des flux à la volée sur la carte.

Le but principal est de vérifier que le flux vidéo fonctionne correctement à partir de l'interface Web, donc diffuser un nouveau flux (ou le transcoder) dans un autre moteur de format/transport/streaming est moins souhaitable que de pouvoir lire le flux RTSP original directement . En utilisation régulière, la vidéo est diffusée via RTSP dans un serveur VMS, ce qui n'est pas susceptible d'être modifié.

Dans un monde idéal, la solution serait un navigateur croisé open source et se produirait à l'intérieur d'une balise HTML5, mais si cela fonctionne dans un ou plusieurs des navigateurs les plus populaires, nous la prendrons.

J'ai lu toutes sortes de choses ici et sur le Web sur le nouveau monde courageux de la balise vidéo HTML5, WebRTC, HLS, etc. et je n'ai encore rien vu qui ressemble à une solution sensée et complète qui n'implique pas une conversion/transcodage/re-streaming supplémentaire, souvent par un framework à moitié supporté ou un serveur supplémentaire au milieu qui n'est pas une solution viable.

Je n'ai pas encore trouvé de description appropriée de ce qui peut ou ne peut pas être nécessaire pour "convertir" notre flux en tout ce que html5-video-likes, que ce soit juste un wrapper légèrement différent autour du même flux vidéo de base ou s'il y en a beaucoup des frais généraux et tout est différent. De même, il n'est pas clair si la conversion pourrait être réalisée à bord ou peut-être même dans le navigateur en utilisant JS.

La raison du titre est que si nous devons changer la façon dont tout cela fonctionne, nous pouvons aussi bien viser à faire tout ce qui est considéré comme "meilleure pratique" et raisonnablement à l'épreuve du temps autant que possible plutôt que quelque fudge opportun qui pourrait ne pas travailler au-delà de la prochaine série de mises à jour du navigateur/du prochain communiqué de presse du W3C ...

Je trouve un peu décevant (mais peut-être pas surprenant) qu'en 2017, il ne semble pas y avoir de moyen sensé d'y parvenir.

Peut-être que "la pire des pratiques" serait une terminologie plus appropriée ...

htmlvideobrowservideo-streaminghtml5-video
11
John U

Il existe de nombreuses méthodes que vous pouvez utiliser qui ne nécessitent pas de transcodage.

WebRTC

Si vous utilisez RTSP, vous êtes en bonne voie pour envoyer vos flux via WebRTC.

WebRTC utilise SDP pour déclarer des flux et RTP pour le transport de ces flux. Il existe d'autres couches dont vous avez besoin pour configurer l'appel WebRTC, mais aucune d'entre elles ne nécessite un calcul particulièrement coûteux. La plupart ( tous?) Les clients WebRTC prendront en charge le décodage H.264, beaucoup avec une accélération matérielle dans le navigateur.

Le moyen le plus simple de démarrer avec WebRTC consiste à implémenter d'abord un client de navigateur à navigateur. Ensuite, vous pouvez aller plus loin avec votre propre implémentation.

WebRTC est l'itinéraire que je vous recommande. NAT traversée (dans la plupart des cas) et connectivité P2P sont intégrés, afin que vos clients n'aient pas à se souvenir des adresses IP. Fournissez simplement des services de signalisation et vos clients peuvent se connecter directement à leurs caméras à Fournissez des serveurs TURN, et ils pourront se connecter même si les deux extrémités sont pare-feu. Si vous ne souhaitez pas fournir de tels services, ils sont légers et peuvent fonctionner directement sur la caméra dans un mode comme vous avoir aujourd'hui.

MP4 fragmenté sur HTTP progressif avec <video> tag

Cette méthode est beaucoup plus simple que WebRTC, mais totalement différente de ce que vous faites actuellement. Vous pouvez prendre votre flux H.264 et l'envelopper directement dans un MP4 sans transcodage. Ensuite, il peut être joué dans un <video> tag sur une page. Vous devrez implémenter les bibliothèques appropriées dans votre code, mais voici un exemple FFmpeg qui sort vers STDOUT, que vous dirigeriez vers les clients:

ffmpeg \
  -i YOUR_CAMERA_HERE \
  -vcodec copy \
  -acodec copy \
  -f mp4 \
  -movflags frag_keyframe+empty_moov \
  -

Autres...

Dans votre cas, il n'y a aucun avantage supplémentaire à DASH. DASH est conçu pour utiliser des CDN basés sur des fichiers pour le streaming. Vous contrôlez le serveur, il est donc inutile d'écrire des fichiers ou de traiter des requêtes HTTP de la même manière qu'un fichier. Bien que vous puissiez certainement utiliser DASH avec des flux H.264 sans transcodage, je pense que c'est une perte de temps.

HLS est à peu près la même chose. Votre flux est compatible avec HLS, mais HLS est rapidement tombé en disgrâce en raison de son manque de flexibilité sur le codec. DASH et HLS sont essentiellement le même mécanisme ... écrire un tas de segments multimédias sur un CDN et créer une liste de lecture ou un manifeste indiquant où ils se trouvent.

10
Brad

Eh bien, je devais faire la même chose dans un Raspberry Pi 3. nous l'avons transcodé à la volée en utilisant ffmpeg sur le pi et utilisé https://github.com/phoboslab/jsmpeg pour diffuser mjpeg. puis joué sur le navigateur/l'application ionique.

var canvas = document.getElementById('video-canvas');
this.player = new JSMpeg.Player(this.button.url ,{canvas: canvas});

Nous gérions jusqu'à 4 flux simultanés avec un délai minimum <2-5 secondes sur notre Pis.

Mais une fois que nous sommes passés à React Native, nous avons utilisé le wrapper RN VLC sur les téléphones

0
rMili