एचटीएमएल 5 कैनवास

में मोशन जेपीजी मैं गति जेपीईजी (एमजेपीईजी) स्ट्रीम (वेबकैम से) html5 कैनवास में लपेटने की कोशिश कर रहा हूं। मुझे सफारी पता है और क्रोम के पास mjpeg के लिए मूल समर्थन है ताकि मैं इसे काम करने के लिए img में डाल सकूं। कारण मैं इसे कैनवास में लपेटना चाहता हूं कि मैं इस पर कुछ पोस्ट प्रोसेसिंग करना चाहता हूं।एचटीएमएल 5 कैनवास

मैं जानता हूँ कि मैं drawImage उपयोग कर सकते हैं एक छवि (और mjpeg) लोड करने के लिए:

<html> 
    <body> 
    <canvas id='test_canvas' width='640px' height='480px' style='border:1px solid #d3d3d3'> 
    </canvas> 
    <script language="JavaScript"> 
     var ctx = document.getElementById('test_canvas').getContext('2d'); 
     var img = new Image(); 
     img.onload = function() { 
     ctx.drawImage(img, 0, 0); 
     }; 
     var theDate = new Date(); 
     img.src = "http://some.video.stream.edu/axis-cgi/mjpg/video.cgi?"; 
    </script> 
    </body> 
</html>

हालांकि, यह mjpeg लोड के रूप में एक छवि तो केवल पहली फ्रेम प्रदर्शित करते हैं। ctx.drawImage(img, 0, 0) को while (true) लूप में भी मदद न करें (आश्चर्य की बात नहीं)।

मुझे लगता है कि इसे काम करने के लिए कुछ चालें होनी चाहिए, फिर भी चारों ओर घूमना, बस यह सुनिश्चित न करें कि कौन सी दिशा अधिक आशाजनक है। यह केवल कुछ उचित आधुनिक ब्राउज़र द्वारा समर्थित होना ठीक है।

स्रोत

2012-11-21 clwen

क्या पोस्ट प्रोसेसिंग तुम क्या करने की योजना बनाई है? – jazzytomato

कुछ सरल दृष्टि एल्गोरिदम, जैसे मोशन डिटेक्शन। – clwen

अंत में यह इस लाइब्रेरी का उपयोग करके काम करता है: http://www.ros.org/wiki/mjpegcanvasjs/Tutorials/CreatingASingleStreamCanvas।

हालांकि क्रॉस-मूल समस्या के साथ अभी भी लड़ रहा है। SO: Canvas tainted by cross-origin data पर मेरा एक और प्रश्न।

स्रोत

2012-12-04 21:53:25 clwen

एक अन्य समाधान यह है कि आप इसे जावास्क्रिप्ट में जोड़ना है।

window.setInterval("refreshCanvas()", 10); 
function refreshCanvas(){ 
    ctx.drawImage(img, 0, 0); 
};

यह हर 10 एमएस में कैनवास में छवि को फिर से खींचा जाएगा।

बीआर /फ्रेड्रिक

स्रोत

2013-03-31 10:06:35 Fredrik

एचटीएमएल 5 कैनवास

उत्तर

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