एचटीएमएल 5 समाधान सर्वर

Question

करने के लिए एक वेबकैम/कैमरा वीडियो स्ट्रीम getUserMedia का उपयोग करते हुए मैं ग्राहक की वेबकैम/कैमरा से वीडियो स्ट्रीम पर कब्जा कर सकते हैं अपलोड करने के लिए। और video टैग का उपयोग करके मैं इसे क्लाइंट के ब्राउज़र पर दिखा सकता हूं। कोड:

<video autoplay></video> 

<script type="text/javascript"> 
    window.URL = window.URL || window.webkitURL; 
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; 

    var video = $('video')[0]; 

    var failed = function(e) { 
     console.log('Denied!', e); 
    }; 

    if(navigator.getUserMedia) { 
     navigator.getUserMedia({video: true, audio: true}, function(stream) { 
       video.src = window.URL.createObjectURL(stream); 
      }, failed 
     ) 
    } else { 
     console.log('Not supported!'); 
    } 
</script> 

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

• sending binary images to server over websocket
• Periodically capture frame of streaming video and send that as image

Answer 1

इस लेख पर एक नज़र डालें:

मैं के कुछ उदाहरण पाया

: http://www.smartjava.org/content/face-detection-using-html5-javascript-webrtc-websockets-jetty-and-javacvopencv

यह Webrtc के उपयोग से पता चलताजब तक फ़ायरवॉल के लिए आवश्यक

ये API, कि एक ब्राउज़र के भीतर चलाया जा सकता है निर्माण अनुप्रयोगों सक्षम होना चाहिए बिना किसी अतिरिक्त डाउनलोड या प्लगइन है कि ऑडियो, वीडियो और अनुपूरक वास्तविक समय संचार का उपयोग कर दोनों पक्षों के बीच संचार की अनुमति की आवश्यकता होती है, बीच सर्वर (का उपयोग किए बिना ट्रैवर्सल, या मध्यस्थ सेवाएं प्रदान करने के लिए)।

Answer 2

MediaStreamRecorder getUserMedia() स्ट्रीम रिकॉर्ड करने के लिए एक वेबआरटीसी एपीआई है। यह वेब ऐप्स को लाइव ऑडियो/वीडियो सत्र से फ़ाइल बनाने की अनुमति देता है।

<video autoplay></video> 

    <script language="javascript" type="text/javascript"> 
    function onVideoFail(e) { 
     console.log('webcam fail!', e); 
     }; 

    function hasGetUserMedia() { 
     // Note: Opera is unprefixed. 
     return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || 
       navigator.mozGetUserMedia || navigator.msGetUserMedia); 
    } 

    if (hasGetUserMedia()) { 
     // Good to go! 
    } else { 
     alert('getUserMedia() is not supported in your browser'); 
    } 

    window.URL = window.URL || window.webkitURL; 
    navigator.getUserMedia = navigator.getUserMedia || 
          navigator.webkitGetUserMedia || 
           navigator.mozGetUserMedia || 
           navigator.msGetUserMedia; 

    var video = document.querySelector('video'); 
    var streamRecorder; 
    var webcamstream; 

    if (navigator.getUserMedia) { 
     navigator.getUserMedia({audio: true, video: true}, function(stream) { 
     video.src = window.URL.createObjectURL(stream); 
     webcamstream = stream; 
    // streamrecorder = webcamstream.record(); 
     }, onVideoFail); 
    } else { 
     alert ('failed'); 
    } 

    function startRecording() { 
     streamRecorder = webcamstream.record(); 
     setTimeout(stopRecording, 10000); 
    } 
    function stopRecording() { 
     streamRecorder.getRecordedData(postVideoToServer); 
    } 
    function postVideoToServer(videoblob) { 

     var data = {}; 
     data.video = videoblob; 
     data.metadata = 'test metadata'; 
     data.action = "upload_video"; 
     jQuery.post("http://www.kongraju.in/uploadvideo.php", data, onUploadSuccess); 
    } 
    function onUploadSuccess() { 
     alert ('video uploaded'); 
    } 

    </script> 

    <div id="webcamcontrols"> 
     <button class="recordbutton" onclick="startRecording();">RECORD</button> 
    </div> 

युक्ति:

http://www.w3.org/TR/mediastream-recording/

आप सर्वर से दर्ज की गई फ़ाइल भेज सकते हैं।