web-dev-qa-db-fra.com

La meilleure approche pour obtenir le streaming RTSP dans un navigateur Web à partir d'une caméra IP?

Est-il possible d'obtenir les données de streaming RTSP dans le navigateur Web?

Voici quelques-unes de mes conclusions. Veuillez me corriger si je me trompe?

  1. Seul Mac OS et Safari prennent en charge la diffusion en direct RTSP.

  2. La vidéo HTML 5 ne prend pas en charge RTSP.

  3. Je peux utiliser le plugin VLC, mais je ne veux pas l'utiliser.

Possibilité de mélanger ffmpeg et websocket?

Supposons que ma caméra IP est connectée à Ethernet.

Sur la machine cliente:

  1. J'exécute ffmpeg pour obtenir les données du serveur (ie: IP)
  2. La machine cliente exécute websocket.
  3. Une fois que ffmpeg obtient les données du serveur RTSP, il décode et génère l'image brute de n'importe quel format (par exemple: yuv).
  4. Maintenant, je dois envoyer cette image au navigateur via websocket.

Question:

  1. C'est la bonne approche?
  2. Comment puis-je obtenir l'image décodée de ffmpeg dans le navigateur?

Je peux me tromper à différents endroits. Veuillez fournir vos commentaires.

ffmpegwebsocketactivexwebbrowser-controlrtsp
18
Whoami

Ici est une entrée de blog, ou un tutoriel si vous voulez, qui réalise quelque chose de très similaire.

Leur configuration légèrement différente, mais voici le résumé:

utilisez ffmeg pour convertir votre entrée en mpeg1video:

ffmpeg  -i rtsp://whatever -f mpeg1video -b 800k -r 30 http://localhost:8082/yourpassword/640/480/

Installer node.js avec stream-server.js script de jsmpeg et ws ws WebSocket package.

Pour afficher le flux, utilisez le stream-example.html et jsmpg.js depuis jsmpeg . Modifiez l'URL WebSocket dans stream-example.html à localhost et ouvrez-le dans votre navigateur préféré.

Mettre à jour an SO topic suggérer deux autres solutions de travail, avec la balise <video>: avec stream-m Java ou avec ffserver.

21
Alex Cohn

J'ai besoin de montrer un streaming dans différentes plates-formes et navigateurs. Pour ce faire, sans utiliser de plug-ins (pas sûr que cela fonctionne sur les smartphones et les tablettes), utilisez une approche très similaire à la vôtre. Une tâche ffmpeg crontab crée 3 images par seconde et stocke dans un répertoire. En utilisant Jquery, un appel ajax vers un php lit le répertoire et obtient le nom du fichier, pour changer l'image (en changeant seulement l'attribut 'src' de <img>), toutes les 330 ms. Pour résoudre le problème de stockage, utilisez une autre tâche crontab qui supprime les fichiers avec plus d'une minute. Ce n'est pas du vrai streaming, mais c'est un navigateur croisé, et résout assez bien le problème.

La tâche ffmpeg

ffmpeg -i "rtsp://path/to/cam" -s 320x240 -f image2 -vf fps=fps=3 cache/%04d.jpg

Exemple d'appel ajax

$.ajax({
        url: '_read_dir.php',
        type: 'POST',
        dataType: 'json'
    })
    .done(function(result) {        
        $("#img_cam").prop('src',"cache/" + result.img);            
    });

La tâche de contrôle du stockage

find /var/www/path/to/dir -mmin +1 -exec rm -f {} \;

L'espoir peut vous aider! :)

0
Rafael Basso