Comment faire une capture instantanée à partir d'un flux MJPEG en HTML
J'ai le code HTML suivant page web:
<html>
<body>
<IMG SRC='http://85.46.64.155/axis-cgi/mjpg/video.cgi'>
</body>
</html>
Cette page affiche le flux d'une caméra IP streaming MJPEG données. Vous pouvez essayer le code ci-dessus ici: http://jsfiddle.net/jU4aq/ (il ne fonctionne pas à partir d'IE)
Ma question est comment je peux faire une capture de ce flux. Fondamentalement, je veux ajouter un bouton qui, lorsque l'utilisateur clique dessus, une boîte de dialogue apparaîtra et vous donnera la possibilité d'enregistrer l'image.
Ce n'est certainement pas possible en HTML pur. Ce côté client et (de manière plus réaliste) côté serveur langues pouvez-vous utiliser?
Javascript est ma seule option. Je ne peux pas utiliser n'importe quel serveur de côté les langues.
Hmm. L'extraction de l'image dans un canvas pourrait fonctionner, si de manière fiable que saisit l'image actuelle. Re-marquage pour une meilleure exposition.... Cependant, pour réellement servir le fichier localement comme un "Enregistrer sous" pour télécharger, vous pouvez en outre besoin de Flash.
Merci pour votre réponse. Je ne suis pas trop familier avec le HTML donc j'espère que quelqu'un va aider à fournir un peu de code pour récupérer la toile!
Javascript est ma seule option. Je ne peux pas utiliser n'importe quel serveur de côté les langues.
Hmm. L'extraction de l'image dans un canvas pourrait fonctionner, si de manière fiable que saisit l'image actuelle. Re-marquage pour une meilleure exposition.... Cependant, pour réellement servir le fichier localement comme un "Enregistrer sous" pour télécharger, vous pouvez en outre besoin de Flash.
Merci pour votre réponse. Je ne suis pas trop familier avec le HTML donc j'espère que quelqu'un va aider à fournir un peu de code pour récupérer la toile!
OriginalL'auteur LEM | 2011-02-28
Vous devez vous connecter pour publier un commentaire.
Votre flux ne semble pas être aujourd'hui, mais essayez un peu de toile de javascript, comme:
Oh mon. De 4.8.11.3 dans la spec: "Chaque fois que le toDataURL() la méthode de l'élément canvas dont l'origine nettoyer indicateur est défini sur false est appelée, la méthode doit soulever un SECURITY_ERR exception." Apparemment, l'acte de dessiner une image sur la toile n'autorise pas l'utilisation de toDataURL. Il peut fonctionner uniquement si vous êtes l'hôte de l'html sur la même origine que l'alimentation est hébergé. Vous aurez à les essayer.
Notez que si vous envisagez de ne pas l'hébergement le code html sur la même origine (Domaine) que l'alimentation, vous devrez peut-être faire quelque chose de délicat.
Merci pour cela, mais malheureusement, les aliments ne seront pas sur le même domaine. Peut-être qu'il n'est pas une solution facile pour cette...
Le serveur qui sert l'image doit permettre aux non-l'origine l'utilisation en le disant dans l'en-tête. Si vous avez besoin d'héberger la page web à la même origine (essentiellement de domaine) que l'alimentation de la caméra. Parler avec le web master et voir si ils peuvent ajouter
Access-Control-Allow-Origin: *
(pour plus de détails, voir ici: w3.org/TR/cors). Éventuellement transformer votre propre serveur proxy par extraction à partir de votre serveur et ensuite servir de votre page.OriginalL'auteur Simon Sarris
Utilisation de l'AXE api pour obtenir un instantané, vous pouvez l'obtenir ici:
http://www.axis.com/techsup/cam_servers/dev/cam_http_api_index.php
Dans votre cas URL
"http://your.server/axis-cgi/jpg/image.cgi"
Vous pouvez également utiliser d'autres paramètres, tels que la résolution et la compression
OriginalL'auteur Binoklev
Certaines caméras IP ont un chemin d'accès pour les instantanés. Par exemple, Vivotek de pistes de "/cgi-bin/visualiseur/vidéo.jpg?streamid=0".
Vous pouvez configurer un bouton HTML qui déclenche un JS événement qui va créer une IMG DOMelement avec cette URL comme attribut "src". Mais vous aurez probablement besoin d'obtenir autour de la croix-domaine des questions http://en.wikipedia.org/wiki/Same_origin_policy.
La solution, j'ai vu le plus, c'est d'utiliser un langage côté serveur comme php, nœud, python, ruby, etc, pour télécharger l'instantané et l'enregistrer dans un dossier public de votre page web.
OriginalL'auteur defvol