Le rendu flux MJpeg en html5
J'essaie de rendre le flux MJpeg en HTML5 à l'aide de la balise img.
Quand je suis en cours d'exécution suivants, tout fonctionne très bien, le sens, la vidéo commence à jouer jusqu'à la fin de la vidéo:
<img src="http://[some ip]:[port]/mjpg">
Ma question est comment puis-je obtenir le flux image par image.
Pour chaque image, je veux la faire, faire quelque chose (appel ajax vers le serveur) puis afficher l'image comme une image.
Grâce.
OriginalL'auteur Lior Ohana | 2013-10-13
Vous devez vous connecter pour publier un commentaire.
Vous pouvez le faire sans plusieurs reprises de faire des requêtes Http. Un seul suffira. Vous pouvez utiliser le chercher de l'api pour créer un ReadableStream, accès aux Lecteur et de garder la lecture du flux.
Une fois que vous avez le lecteur de continuer à lire des morceaux à partir du flux de manière récursive. Recherchez le SOI ( 0xFF 0xD8) dans le flux d'octets qui signale la fin de l'en-tête et le début du JPEG. L'en-tête contient la longueur de l'image en octets à lire. Lire que le nombre d'octets à partir de la partie et aucun des morceaux et de les stocker dans un Uint8Array. Une fois que vous avez
lire le cadre de la convertir en une goutte, de créer un UrlObject hors de lui et de l'affecter à la propriété src de votre img objet.
Continuer à le faire jusqu'à ce que la connexion est fermée.
Plug sans vergogne. Voici un lien vers un exemple de travail sur github.
OriginalL'auteur arun tom
Si vous diffusez de la source ne peut pas revenir en images sur une autre adresse (http://[ip]:[port]/cadre/XXX) alors vous pouvez utiliser le flux MJPEG analyseur sur le serveur. Par exemple, Paparazzo.js analyser les flux et retour unique jpeg. En fait il retourne uniquement la dernière image sans l'enregistrer précédente, mais il peut être changé.
Problème ne peut être résolu que dans le navigateur avec js sans certains plugins et le serveur.
OriginalL'auteur Alex
Si l'appareil expose premières images JPEG (pas .MJPEG extension), vous aurez à reaload manuellement (si l'extension est .MJPEG le navigateur va tout faire, il suffit de mettre le bon src). Si vous en avez .MJPEG et souhaitez utiliser le raw .JPEG vérifiez la documentation de votre appareil. La plupart des caméras exposer à la fois les .MJPEG et des matières premières .JPEG flux de données (seulement sur des Url différentes).
Malheureusement, vous ne serez pas en mesure d'obtenir facilement l'image de l'ajax, mais vous pouvez changer le src de l'image périodiquement.
Vous pouvez utiliser
Date.getTime()
et l'ajouter à la chaîne de requête pour forcer le navigateur à recharger l'image, et de répéter à chaque fois que l'image se charge.Si vous utilisez jQuery, le code ressemblera à ceci:
camera.html
motionjpeg.js
Note que mon exemple va jouer le MotionJPEG au chargement de la page, mais ne permet pas de play/pause/stop fonctionnalités
OriginalL'auteur Zorgatone