कैसे एचटीएमएल

में एक MJPEG स्ट्रीम से किसी स्नैपशॉट बनाने के लिए मैं निम्नलिखित HTML वेब पेज है:कैसे एचटीएमएल

<html> 
<body> 
<IMG SRC='http://85.46.64.155/axis-cgi/mjpg/video.cgi'> 
</body> 
</html>

इस वेबपेज MJPEG डेटा स्ट्रीमिंग एक आईपी कैमरे के फ़ीड प्रदर्शित करता है। आप उपर्युक्त कोड यहां आज़मा सकते हैं: http://jsfiddle.net/jU4aq/ (यह आईई से काम नहीं करता है)

मेरा सवाल यह है कि मैं उस फ़ीड का स्नैपशॉट कैसे बना सकता हूं। असल में मैं एक बटन जोड़ना चाहता हूं कि जब उपयोगकर्ता उस पर क्लिक करेगा, तो एक संवाद पॉप अप होगा और आपको छवि को सहेजने का विकल्प देगा।

स्रोत

2011-02-28 LEM

यह शुद्ध HTML में निश्चित रूप से संभव नहीं है। आप किस ग्राहक पक्ष और (अधिक यथार्थवादी) सर्वर साइड भाषा का उपयोग कर सकते हैं? –

जावास्क्रिप्ट मेरा एकमात्र विकल्प है। मैं किसी भी सर्वर साइड भाषा का उपयोग नहीं कर सकता। – LEM

हम्म। छवि को कैनवास तत्व में लाने से काम हो सकता है, अगर वह विश्वसनीय रूप से केवल वर्तमान फ्रेम को पकड़ लेता है। बेहतर एक्सपोजर के लिए पुनः टैगिंग .... हालांकि, वास्तव में फ़ाइल को स्थानीय रूप से "सेव करें" डाउनलोड के रूप में सेवा करने के लिए, आपको अतिरिक्त रूप से फ्लैश की आवश्यकता हो सकती है। –

आपकी स्ट्रीम लेकिन कैनवास जावास्क्रिप्ट का एक सा कोशिश अभी काम किया जाना है, की तरह प्रतीत नहीं होता:

<html> 
<body> 
<IMG id="myImage" SRC='http://85.46.64.155/axis-cgi/mjpg/video.cgi'> 

<input type="button" id="save" value="Save to PNG"> 

<script type="text/javascript"> 
document.getElementById('save').onclick = function() { 

var c = document.createElement('canvas'); 
var img = document.getElementById('myImage'); 
c.width = img.width; 
c.height = img.height; 
var ctx = c.getContext('2d'); 


ctx.drawImage(img, 0, 0); 
//window.location = c.toDataURL('image/png'); 
window.open(c.toDataURL('image/png')) 
}; 

</script> 

</body> 
</html>

स्रोत

2011-02-28 18:25:21

आपके उत्तर के लिए बहुत बहुत धन्यवाद। मैंने अभी फ़ायरफ़ॉक्स पर कोशिश की लेकिन जब मैं सेव बटन पर क्लिक करता हूं तो कुछ भी नहीं होता है। क्या यह एक बचत संवाद दिखाना चाहिए? स्ट्रीम अभी मेरे लिए काम करता है। यदि यह काम नहीं करता है, तो आप http://extcam-16.se.axis.com/axis-cgi/mjpg/video.cgi भी कोशिश कर सकते हैं जो कि तेज़ है। धन्यवाद – LEM

ओह माय। Spec में 4.8.11.3 से: "जब भी कैनवास तत्व की toDataURL() विधि जिसका मूल-साफ़ ध्वज गलत पर सेट किया जाता है, तो विधि को सुरक्षा_ईआरआर अपवाद जुटाना चाहिए।" जाहिर है कैनवास पर एक छवि खींचने का कार्य आपको toDataURL का उपयोग करने से रोकता है। यह केवल तभी काम कर सकता है जब आप उसी उत्पत्ति पर एचटीएमएल की मेजबानी कर रहे हों क्योंकि फ़ीड होस्ट किया जा रहा है। आपको यह कोशिश करनी होगी। –

ध्यान दें कि यदि आप फ़ीड के समान मूल (डोमेन) पर HTML होस्ट करने की योजना नहीं बना रहे हैं, तो आपको कुछ मुश्किल करना पड़ सकता है। –

कुछ आईपी कैमरों स्नैपशॉट के लिए एक रास्ता है। उदाहरण के लिए, विवोटेक का रन "/cgi-bin/viewer/video.jpg?streamid=0" पर चलता है।

आप एक HTML बटन सेट कर सकते हैं जो एक जेएस इवेंट ट्रिगर करता है जो उस URL के साथ "src" विशेषता के रूप में एक IMG डोमेलेमेंट बनाएगा। लेकिन आपको संभवतया क्रॉस-डोमेन समस्याएं http://en.wikipedia.org/wiki/Same_origin_policy प्राप्त करने की आवश्यकता होगी।

स्नैपशॉट डाउनलोड करने और इसे अपने वेब पेज के लिए सार्वजनिक फ़ाइल के रूप में सहेजने के लिए PHP-नोड, पायथन, रूबी इत्यादि जैसे सर्वर-साइड भाषा का उपयोग करना सबसे अधिक समाधान है।

स्रोत

2011-08-16 17:26:20 rodowi

उपयोग धुरी एपीआई स्नैपशॉट प्राप्त करने के लिए, आप इसे यहाँ प्राप्त कर सकते: http://www.axis.com/techsup/cam_servers/dev/cam_http_api_index.php

आप में केस वाला URL "http://your.server/axis-cgi/jpg/image.cgi" है

इसके अलावा, आप इस तरह के संकल्प और संपीड़न

के रूप में अतिरिक्त पैरामीटर, उपयोग कर सकते हैं

स्रोत

2013-06-13 07:34:21

उत्तर

संबंधित मुद्दे