वेबआरटीसी

Question

का उपयोग कर वीडियो के साथ डेटा का सिंक्रनाइज़ेशन मैं सर्वर से क्लाइंट ब्राउज़र में वीडियो भेजने के लिए WebRTC का उपयोग कर रहा हूं (मूल WebRTC API और MCU WebRTC सर्वर जैसे कुरेंटो) का उपयोग कर रहा हूं।

ग्राहकों को भेजने से पहले वीडियो के प्रत्येक फ्रेम में मेटाडेटा (जैसे उपशीर्षक या कोई अन्य आवेदक सामग्री) शामिल था। मैं इस मेटाडेटा को क्लाइंट को भेजने का एक तरीका ढूंढ रहा हूं जैसे कि यह सिंक्रनाइज़ रहता है (उस समय तक यह वास्तव में प्रस्तुत किया गया है)। इसके अलावा मैं क्लाइंट साइड (जावास्क्रिप्ट द्वारा) से इस डेटा तक पहुंचने में सक्षम होना चाहता हूं। WebRTC DataChannel से डेटा भेजा जा रहा

• :

  कुछ विकल्प मैं के बारे में सोचा। लेकिन मुझे नहीं पता कि डेटा को प्रति फ्रेम आधार पर सिंक्रनाइज़ किया गया है। लेकिन मुझे डेटा चैनल द्वारा भेजे गए डेटा को सुनिश्चित करने का कोई तरीका नहीं मिला और वीडियो चैनल सिंक्रनाइज़ किया गया है (फिर से, मुझे सिंगल फ्रेम का सटीक स्तर प्राप्त करने की उम्मीद है)।

• किसी भी तरह से क्लाइंट को मैन्युअल रूप से डेटा भेजना (वेबआरटीसी डेटा चैनल, websockets, आदि) वीडियो के टाइमस्टैम्प से मेल खाने वाले टाइमस्टैम्प के साथ। हालांकि, यहां तक ​​कि यदि कुरेंटो या अन्य मध्य सर्वर वीडियो में टाइमस्टैम्प जानकारी को संरक्षित करते हैं, तो निम्न उत्तर के अनुसार जावास्क्रिप्ट से वीडियो टाइमस्टैम्प प्राप्त करने का कोई आवेदक तरीका नहीं है: How can use the webRTC Javascript API to access the outgoing audio RTP timestamp at the sender and the incoming audio RTP timestamp at the receiver?। मैंने मानक वीडियो तत्व के timeupdate ईवेंट का उपयोग करने के बारे में सोचा, लेकिन मुझे यह नहीं पता कि यह फ्रेम के सटीक स्तर के लिए काम करेगा, और मुझे यकीन नहीं है कि वेब वीडियो में लाइव वीडियो में इसका क्या अर्थ है।
• डेटा को मैन्युअल रूप से भेजना और वीडियो को आवेदक रूप से अन्य TextTrack के रूप में संलग्न करें। फिर इसे onenter और onexit का उपयोग सिंक्रनाइज़ली पढ़ने के लिए करें: http://www.html5rocks.com/en/tutorials/track/basics/। इसे अभी भी सटीक टाइमस्टैम्प की आवश्यकता है, और मुझे यकीन नहीं है कि टाइमस्टैम्प क्या हैं और यदि कुरनटो उन्हें पास करते हैं तो यह जानना नहीं है।
• मैन्युअल रूप से फ्रेम को गिनने के लिए वेबआरटीसी के आंकड़े एपीआई का उपयोग करना (getstats का उपयोग करके), और उम्मीद है कि इस एपीआई द्वारा प्रदान की गई जानकारी सटीक है।

ऐसा करने का सबसे अच्छा तरीका क्या है, और मैंने किसी भी तरह से समस्याओं का समाधान कैसे किया है?

संपादित करें: उचित फ्रेम के साथ मेटाडेटा के सटीक सिंक्रनाइज़ेशन (एक फ्रेम से अधिक नहीं के संकल्प में) आवश्यक है।

Answer 1

मुझे संदेह है कि प्रति फ्रेम डेटा की मात्रा काफी छोटी है। मैं इसे 2 डी बारकोड छवि में एन्कोडिंग देखता हूं और इसे प्रत्येक फ्रेम में एक तरह से रखता हूं ताकि इसे संपीड़न से हटाया न जाए। वैकल्पिक रूप से बस इस तरह टाइमस्टैम्प एन्कोड करें।

फिर प्लेयर की ओर आप छवि को किसी विशेष फ्रेम में देखते हैं और डेटा प्राप्त करते हैं या यदि यह हो।

Answer 2

ठीक है, पहले getUserMedia का उपयोग कर वीडियो और ऑडियो प्राप्त करने देता है और

https://github.com/streamproc/MediaStreamRecorder

का उपयोग कर इसे कच्चे डेटा की सुविधा देता है:

/* 
* 
* Video Streamer 
* 
*/ 


<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script> 
<script> 

// FIREFOX 

var mediaConstraints = { 
    audio: !!navigator.mozGetUserMedia, // don't forget audio! 
    video: true       // don't forget video! 
}; 

navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError); 

function onMediaSuccess(stream) { 
    var mediaRecorder = new MediaStreamRecorder(stream); 
    mediaRecorder.mimeType = 'video/webm'; 
    mediaRecorder.ondataavailable = function (blob) { 
     // POST/PUT "Blob" using FormData/XHR2 

    }; 
    mediaRecorder.start(3000); 
} 

function onMediaError(e) { 
    console.error('media error', e); 
} 
</script> 



// CHROME 

var mediaConstraints = { 
    audio: true, 
    video: true 
}; 

navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError); 

function onMediaSuccess(stream) { 
    var multiStreamRecorder = new MultiStreamRecorder(stream); 
    multiStreamRecorder.video = yourVideoElement; // to get maximum accuracy 
    multiStreamRecorder.audioChannels = 1; 
    multiStreamRecorder.ondataavailable = function (blobs) { 
     // blobs.audio 
     // blobs.video 
    }; 
    multiStreamRecorder.start(3000); 
} 

function onMediaError(e) { 
    console.error('media error', e); 
} 

अब आप के माध्यम से डेटा भेज सकते हैं डेटाChannels और रिसीवर पक्ष में, अपने मेटाडेटा जोड़ें:

/* 
* 
* Video Receiver 
* 
*/ 


var ms = new MediaSource(); 

var video = document.querySelector('video'); 
video.src = window.URL.createObjectURL(ms); 

ms.addEventListener('sourceopen', function(e) { 
    var sourceBuffer = ms.addSourceBuffer('video/webm; codecs="vorbis,vp8"'); 
    sourceBuffer.appendBuffer(/* Video chunks here */); 
}, false);