एचटीएमएल 5 वीडियो क्लाइंट के लिए वास्तविक समय http स्ट्रीमिंग के लिए सर्वश्रेष्ठ दृष्टिकोण


213

मैं वास्तव में नोड.जेएस का उपयोग करके HTML5 क्लाइंट के लिए ffmpeg के वास्तविक समय के उत्पादन को स्ट्रीम करने का सबसे अच्छा तरीका समझने की कोशिश कर रहा हूं, क्योंकि नाटक में कई चर हैं और मुझे इस स्थान का बहुत अनुभव नहीं है, विभिन्न संयोजनों की कोशिश में कई घंटे बिताए।

मेरा उपयोग मामला है:

1) IP वीडियो कैमरा RTSP H.264 स्ट्रीम FFMPEG द्वारा उठाया गया है और नोड में निम्नलिखित FFMPEG सेटिंग्स का उपयोग करके एक mp4 कंटेनर में रीमेक किया गया है, STDOUT को आउटपुट। यह केवल प्रारंभिक क्लाइंट कनेक्शन पर चलाया जाता है, ताकि आंशिक सामग्री अनुरोध फिर से FFMPEG को स्पॉन करने का प्रयास न करें।

liveFFMPEG = child_process.spawn("ffmpeg", [
                "-i", "rtsp://admin:12345@192.168.1.234:554" , "-vcodec", "copy", "-f",
                "mp4", "-reset_timestamps", "1", "-movflags", "frag_keyframe+empty_moov", 
                "-"   // output to stdout
                ],  {detached: false});

2) मैं STDOUT पर कब्जा करने और क्लाइंट अनुरोध पर क्लाइंट को वापस स्ट्रीम करने के लिए नोड http सर्वर का उपयोग करता हूं। जब क्लाइंट पहली बार कनेक्ट होता है तो मैं ऊपर FFMPEG कमांड लाइन को स्पॉन करता हूं फिर HTTP प्रतिक्रिया के लिए STDOUT स्ट्रीम को पाइप करता है।

liveFFMPEG.stdout.pipe(resp);

मैंने FFMPEG डेटा को HTTP प्रतिसाद लिखने के लिए स्ट्रीम इवेंट का भी उपयोग किया है, लेकिन कोई फर्क नहीं पड़ता

xliveFFMPEG.stdout.on("data",function(data) {
        resp.write(data);
}

मैं निम्नलिखित HTTP हेडर का उपयोग करता हूं (जो पूर्व-रिकॉर्ड की गई फ़ाइलों को स्ट्रीमिंग करते समय भी उपयोग किया जाता है और काम करता है)

var total = 999999999         // fake a large file
var partialstart = 0
var partialend = total - 1

if (range !== undefined) {
    var parts = range.replace(/bytes=/, "").split("-"); 
    var partialstart = parts[0]; 
    var partialend = parts[1];
} 

var start = parseInt(partialstart, 10); 
var end = partialend ? parseInt(partialend, 10) : total;   // fake a large file if no range reques 

var chunksize = (end-start)+1; 

resp.writeHead(206, {
                  'Transfer-Encoding': 'chunked'
                 , 'Content-Type': 'video/mp4'
                 , 'Content-Length': chunksize // large size to fake a file
                 , 'Accept-Ranges': 'bytes ' + start + "-" + end + "/" + total
});

3) क्लाइंट को HTML5 वीडियो टैग का उपयोग करना होगा।

HTML5 क्लाइंट को उपरोक्त FFMPEG कमांड लाइन के साथ रिकॉर्ड की गई एक वीडियो फ़ाइल (लेकिन STDOUT के बजाय एक फ़ाइल में सहेजी गई) के साथ प्लेबैक प्लेबैक (206 HTTP आंशिक सामग्री के साथ fs.createReadStream का उपयोग करने) के साथ मुझे कोई समस्या नहीं है, इसलिए मुझे FFMPEG स्ट्रीम पता है सही है, और मैं HTTP नोड सर्वर से कनेक्ट होने पर वीएलसी में वीडियो लाइव स्ट्रीमिंग को भी सही ढंग से देख सकता हूं।

हालाँकि, FFMPEG से नोड HTTP के माध्यम से लाइव स्ट्रीम करने की कोशिश बहुत कठिन प्रतीत होती है क्योंकि क्लाइंट एक फ्रेम को प्रदर्शित करेगा फिर रुक जाएगा। मुझे संदेह है कि मैं HTML5 वीडियो क्लाइंट के साथ संगत होने के लिए HTTP कनेक्शन स्थापित नहीं कर रहा हूं। मैंने HTTP 206 (आंशिक सामग्री) और 200 प्रतिक्रियाओं का उपयोग करने, डेटा को बफर में डालने और फिर बिना किसी भाग्य के स्ट्रीमिंग जैसी कई चीजों की कोशिश की है, इसलिए मुझे यह सुनिश्चित करने के लिए पहले सिद्धांतों पर वापस जाने की आवश्यकता है कि मैं यह अधिकार स्थापित कर रहा हूं। मार्ग।

यहाँ मेरी समझ है कि यह कैसे काम करना चाहिए, कृपया मुझे सही करें अगर मैं गलत हूँ:

1) FFMPEG को आउटपुट के टुकड़े करने के लिए सेटअप किया जाना चाहिए और एक खाली moov (FFMPEG frag_keyframe और blank_moov mov ध्वज) का उपयोग करना चाहिए। इसका मतलब यह है कि ग्राहक मूव एटम का उपयोग नहीं करता है जो आम तौर पर फाइल के अंत में होता है जो स्ट्रीमिंग के दौरान प्रासंगिक नहीं होता है (फाइल का कोई अंत नहीं है), लेकिन इसका मतलब यह है कि संभव नहीं है जो मेरे उपयोग के मामले के लिए ठीक है।

2) भले ही मैं MP4 अंशों और रिक्त MOOV का उपयोग करता हूं, फिर भी मुझे HTTP आंशिक सामग्री का उपयोग करना होगा, क्योंकि HTML5 खिलाड़ी प्रतीक्षा करेगा जब तक कि पूरी स्ट्रीम को डाउनलोड करने से पहले डाउनलोड नहीं किया जाता है, जो कि लाइव स्ट्रीम के साथ कभी समाप्त नहीं होता है इसलिए यह अटूट है।

3) मुझे समझ में नहीं आता है कि HTTP प्रतिक्रिया के लिए STDOUT स्ट्रीम को पाइप करना क्यों काम नहीं करता है जब अभी तक लाइव स्ट्रीमिंग नहीं होती है अगर मैं किसी फ़ाइल को सहेजता हूं तो मैं समान कोड का उपयोग करके एचटीएमएल 5 क्लाइंट को इस फाइल को आसानी से स्ट्रीम कर सकता हूं। शायद यह एक टाइमिंग का मुद्दा है क्योंकि इसे शुरू करने के लिए एफएफएमपीजी स्पॉन के लिए एक दूसरा समय लगता है, आईपी कैमरा से कनेक्ट करना और नोड्स को भेजना और नोड डेटा इवेंट भी अनियमित हैं। हालाँकि बायस्ट्रीम बिलकुल फाइल में सेविंग की तरह ही होनी चाहिए, और HTTP को देरी के लिए पूरा करने में सक्षम होना चाहिए।

4) कैमरे से FFMPEG द्वारा बनाई गई MP4 फ़ाइल को स्ट्रीम करते समय HTTP क्लाइंट से नेटवर्क लॉग की जाँच करते समय, मुझे लगता है कि 3 क्लाइंट अनुरोध हैं: वीडियो के लिए एक सामान्य GET अनुरोध, जिसे HTTP सर्वर 40Kb के बारे में देता है, फिर एक आंशिक फ़ाइल के अंतिम 10K के लिए बाइट रेंज के साथ सामग्री अनुरोध, फिर बीच में बिट्स के लिए एक अंतिम अनुरोध लोड नहीं किया गया। हो सकता है कि HTML5 क्लाइंट एक बार पहली प्रतिक्रिया प्राप्त करता है जो MP4 MOOV परमाणु को लोड करने के लिए फ़ाइल के अंतिम भाग के लिए पूछ रहा है? यदि यह मामला है तो यह स्ट्रीमिंग के लिए काम नहीं करेगा क्योंकि कोई MOOV फ़ाइल नहीं है और फ़ाइल का कोई छोर नहीं है।

5) जब लाइव स्ट्रीम करने की कोशिश करते समय नेटवर्क लॉग की जाँच करते हैं, तो मुझे केवल 200 बाइट्स के साथ एक प्रारंभिक प्रारंभिक अनुरोध प्राप्त होता है, फिर 200 बाइट्स के साथ फिर से अनुरोध किया जाता है और तीसरा अनुरोध जो केवल 2K लंबा होता है। मुझे समझ में नहीं आता है कि HTML5 क्लाइंट अनुरोध को क्यों रद्द करेगा क्योंकि बाईटस्ट्रीम बिल्कुल वैसा ही है जैसा कि मैं किसी रिकॉर्ड की गई फ़ाइल से स्ट्रीमिंग के दौरान सफलतापूर्वक उपयोग कर सकता हूं। ऐसा भी लगता है कि नोड FFMPEG स्ट्रीम के बाकी क्लाइंट को नहीं भेज रहा है, फिर भी मैं .on ईवेंट रूटीन में FFMPEG डेटा देख सकता हूं इसलिए यह FFMPEG नोड HTTP सर्वर पर मिल रहा है।

6) हालांकि मुझे लगता है कि HTTP प्रतिक्रिया बफर को स्ट्रीम स्ट्रीम करने के लिए बफर काम करना चाहिए, क्या मुझे एक मध्यवर्ती बफर और स्ट्रीम का निर्माण करना है जो HTTP आंशिक सामग्री क्लाइंट अनुरोधों को ठीक से काम करने की अनुमति देगा जैसे यह (सफलतापूर्वक) एक फ़ाइल पढ़ता है ? मुझे लगता है कि यह मेरी समस्याओं का मुख्य कारण है लेकिन मैं निश्चित रूप से नोड में निश्चित नहीं हूं कि इसे कैसे सेट किया जाए। और मुझे नहीं पता कि फ़ाइल के अंत में डेटा के लिए क्लाइंट अनुरोध को कैसे संभालना है क्योंकि फ़ाइल का कोई अंत नहीं है।

) क्या मैं २०६ आंशिक सामग्री अनुरोधों को संभालने की कोशिश के साथ गलत रास्ते पर हूँ, और यह २०० HTTP की सामान्य प्रतिक्रियाओं के साथ काम करना चाहिए? HTTP 200 प्रतिक्रियाएं VLC के लिए ठीक काम करती हैं इसलिए मुझे संदेह है कि HTML5 वीडियो क्लाइंट केवल आंशिक सामग्री अनुरोधों के साथ काम करेगा?

जैसा कि मैं अभी भी इस समस्या (FFMPEG, नोड, स्ट्रीमिंग, HTTP, एचटीएमएल 5 वीडियो) की विभिन्न परतों के माध्यम से काम करना मुश्किल सीख रहा हूं, इसलिए किसी भी संकेत की बहुत सराहना की जाएगी। मैंने इस साइट और नेट पर शोध करते हुए घंटों बिताए हैं, और मैं किसी ऐसे व्यक्ति के साथ नहीं आया हूं जो नोड में वास्तविक समय स्ट्रीमिंग करने में सक्षम है, लेकिन मैं पहले नहीं हो सकता, और मुझे लगता है कि यह काम करने में सक्षम होना चाहिए (किसी तरह !)।


4
यह एक मुश्किल विषय है। पहली चीजें पहले। क्या आपने Content-Typeअपने सिर में सेट किया ? क्या आप चंक एन्कोडिंग का उपयोग कर रहे हैं? यहीं से शुरुआत करूंगा। इसके अलावा, एचटीएमएल 5 आवश्यक रूप से स्ट्रीम को कार्यक्षमता प्रदान नहीं करता है, आप यहां पर अधिक पढ़ सकते हैं । आपको अपने स्वयं के साधनों ( यहां देखें ) का उपयोग करके वीडियो स्ट्रीम को बफ़र करने और चलाने के लिए सबसे अधिक संभावना होगी , सोचा कि यह अच्छी तरह से समर्थित नहीं है। इसके अलावा MediaSource API में google।
tsturzl

उत्तर के लिए धन्यवाद। हां, सामग्री-प्रकार 'वीडियो / mp4' है और यह कोड वीडियो फ़ाइलों को स्ट्रीमिंग करने के लिए काम करता है। दुर्भाग्य से MediaSource केवल क्रोम है, मुझे अन्य ब्राउज़रों का समर्थन करना है। क्या एचटीएमएल 5 वीडियो क्लाइंट एक HTTP स्ट्रीमिंग सर्वर के साथ इंटरैक्ट करता है, इस बारे में कोई युक्ति है? मुझे यकीन है कि जो मैं चाहता हूं वह किया जा सकता है, बस निश्चित रूप से कैसे (नोड के साथ नहीं। js लेकिन C # या C ++ का उपयोग कर सकते हैं अगर यह आसान है)
deandob

2
समस्या आपके बैकएंड पर नहीं है। आप वीडियो ठीक कर रहे हैं। समस्या आपके फ्रंटेंड / क्लाइंट में है, आपको अपने आप को स्ट्रीमिंग को लागू करने की आवश्यकता है। HTML5 बस स्ट्रीम को हैंडल नहीं करता है। आपको सबसे अधिक संभावना प्रति ब्राउज़र के विकल्प तलाशने होंगे। वीडियो टैग और मीडिया API के लिए w3 मानकों में पढ़ना शुरू करने के लिए एक अच्छी जगह होगी।
1

ऐसा लगता है कि यह काम करना संभव होना चाहिए । मैं एक निश्चित उत्तर नहीं दे रहा हूं, लेकिन मुझे संदेह है कि यह समस्या इस तथ्य से संबंधित है कि ब्राउज़र शुरुआत में mp4 कंटेनर हेडर / परमाणुओं के शेष की उम्मीद कर रहा है कि वीडियो स्ट्रीम में अगला फ्रेम। यदि आप एक बहुत लंबे वीडियो के लिए एक MOOV परमाणु भेजते हैं (ताकि खिलाड़ी अनुरोध करता रहे) साथ ही साथ अन्य अपेक्षित हेडर और फिर ffmpeg से कॉपी करना शुरू करें यह काम कर सकता है। आपको ब्राउज़र में js का उपयोग करके स्क्रब बार को भी छिपाना होगा ताकि वे आगे स्कैन न कर सकें।
jwriteclub

मैं WebRTC पर विचार करने का सुझाव दूंगा जो दिन-प्रतिदिन बेहतर क्रॉस-ब्राउज़र समर्थन प्राप्त कर रहा है।
एलेक्स कोहेन

जवाबों:


209

EDIT 3: IOS 10 के रूप में, HLS खंडित mp4 फ़ाइलों का समर्थन करेगा। इसका उत्तर अब, DASH और HLS प्रकट होने के साथ खंडित mp4 संपत्तियां बनाना है। > Pretend फ़्लैश, iOS9 और नीचे और IE 10 और नीचे मौजूद नहीं है।

इस लाइन के नीचे सब कुछ पुराना है। इसे यहां पोस् टर के लिए रख रहे हैं।


EDIT 2: जैसा कि टिप्पणी में लोग इशारा कर रहे हैं, चीजें बदल जाती हैं। लगभग सभी ब्राउज़र AVC / AAC कोडेक्स का समर्थन करेंगे। iOS को अभी भी HLS की आवश्यकता है। लेकिन hls.js जैसे एडेप्टर के माध्यम से आप MSE में HLS खेल सकते हैं। अगर आपको iOS की जरूरत है तो नया उत्तर HLS + hls.js है। या बस खंडित MP4 (यानी डैश) यदि आप नहीं करते हैं

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

पहले मैं आराम करूँगा: यहाँ LIVE STREAMING OVER HTML5 के लिए कोई आधिकारिक समर्थन नहीं है । हैक कर रहे हैं, लेकिन आपके लाभ भिन्न हो सकते हैं।

संपादित करें: जब से मैंने यह उत्तर लिखा है कि मीडिया स्रोत एक्सटेंशन परिपक्व हो गए हैं, और अब एक व्यवहार्य विकल्प बनने के बहुत करीब हैं। वे अधिकांश प्रमुख ब्राउज़रों पर समर्थित हैं। IOS की पकड़ बनी हुई है।

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

अब थोड़ा खुदाई करते हैं।

प्लेटफार्म:

  • आईओएस
  • पीसी
  • मैक
  • एंड्रॉयड

कोडेक्स:

  • VP8 / 9
  • h.264
  • थोरा (vp3)

ब्राउज़रों में लाइव वीडियो के लिए सामान्य वितरण विधियाँ:

  • DASH (HTTP)
  • HLS (HTTP)
  • फ्लैश (RTMP)
  • फ्लैश (HDS)

ब्राउज़रों में VOD के लिए सामान्य वितरण विधियाँ:

  • DASH (HTTP स्ट्रीमिंग)
  • HLS (HTTP स्ट्रीमिंग)
  • फ्लैश (RTMP)
  • फ्लैश (HTTP स्ट्रीमिंग)
  • MP4 (HTTP छद्म स्ट्रीमिंग)
  • मैं एमकेवी और ओओजी के बारे में बात नहीं करने जा रहा हूं क्योंकि मैं उन्हें बहुत अच्छी तरह से नहीं जानता हूं।

HTML5 वीडियो टैग:

  • MP4
  • webm
  • ogg

आइए देखें कि कौन से ब्राउज़र किन स्वरूपों का समर्थन करते हैं

सफारी:

  • HLS (केवल iOS और mac)
  • h.264
  • MP4

फ़ायरफ़ॉक्स

  • DASH (MSE के माध्यम से लेकिन कोई h.264)
  • h.264 केवल Flash के माध्यम से!
  • VP9
  • MP4
  • OGG
  • webm

अर्थात

  • Chamak
  • DASH (केवल MSE IE 11+ के माध्यम से)
  • h.264
  • MP4

क्रोम

  • Chamak
  • DASH (MSE के माध्यम से)
  • h.264
  • VP9
  • MP4
  • webm
  • ogg

MP4 का उपयोग लाइव वीडियो के लिए नहीं किया जा सकता (नोट: DASH MP4 का सुपरसेट है, इसलिए इससे भ्रमित न हों)। MP4 दो टुकड़ों में टूट गया है: moov और mdat। mdat में कच्चे ऑडियो वीडियो डेटा होते हैं। लेकिन यह अनुक्रमित नहीं है, इसलिए मूव के बिना, यह बेकार है। मूव में mdat में सभी डेटा का एक इंडेक्स होता है। लेकिन इसके प्रारूप के कारण, इसे तब तक 'चपटा' नहीं किया जा सकता, जब तक कि EVERY फ्रेम का टाइमस्टैम्प और आकार ज्ञात नहीं हो जाता। एक मोव का निर्माण संभव हो सकता है जो फ्रेम के आकार को construct फाइब ’करता है, लेकिन यह बहुत बेकार बैंडविड्थ बुद्धिमान है।

इसलिए यदि आप हर जगह पहुंचाना चाहते हैं, तो हमें कम से कम आम भाजक खोजने की जरूरत है। आप देखेंगे कि फ्लैश उदाहरण का सहारा लिए बिना यहां कोई एलसीडी नहीं है:

  • iOS केवल h.264 वीडियो का समर्थन करता है। और यह केवल लाइव के लिए HLS का समर्थन करता है।
  • जब तक आप फ्लैश का उपयोग नहीं करते हैं फ़ायरफ़ॉक्स h.264 का समर्थन नहीं करता है
  • IOS में फ्लैश काम नहीं करता है

एक एलसीडी के लिए निकटतम चीज आपके आईओएस उपयोगकर्ताओं को प्राप्त करने के लिए एचएलएस का उपयोग कर रही है, और बाकी सभी के लिए फ्लैश। मेरा व्यक्तिगत पसंदीदा एचएलएस को एनकोड करना है, फिर अन्य सभी के लिए एचएलएस खेलने के लिए फ्लैश का उपयोग करें। आप JW प्लेयर 6 के माध्यम से फ़्लैश में HLS खेल सकते हैं, (AS3 में FLV में अपना खुद का HLS लिखें जैसे मैंने किया था)

जल्द ही, ऐसा करने का सबसे आम तरीका है iOS / Mac और हर जगह MSE के माध्यम से HLS होगा (यह वही है जो नेटफ्लिक्स जल्द ही करेगा)। लेकिन हम अभी भी अपने ब्राउज़र को अपग्रेड करने के लिए सभी का इंतजार कर रहे हैं। फ़ायरफ़ॉक्स के लिए आपको एक अलग DASH / VP9 की भी आवश्यकता होगी (मैं Open264 के बारे में जानता हूं; यह बेकार है। यह मुख्य या उच्च प्रोफ़ाइल में वीडियो नहीं कर सकता। इसलिए यह वर्तमान में बेकार है)।


विभिन्न विकल्पों के बारे में विस्तृत पृष्ठभूमि और समर्थक / विपक्ष के लिए धन्यवाद szatmary। मैंने इस उत्तर को स्वीकार कर लिया है क्योंकि अवधारणाओं की रूपरेखा उस विशिष्ट निर्धारण से अधिक महत्वपूर्ण है जिसे मैंने मूल प्रश्न का उत्तर देने के लिए पाया था। इनाम के साथ शुभकामनाएँ!
deandob

9
यह इस सवाल का काम नहीं है। नीचे इस समस्या का एक कार्यशील समाधान है।
jwriteclub

2
फ़ायरफ़ॉक्स अब MSE और h.264 को मूल रूप से सपोर्ट करता है। पुष्टि करने के लिए नवीनतम FF ब्राउज़र के साथ www.youtube.com/html5 पर जाएं। मैंने एफएफ 37 के साथ परीक्षण किया। मैक पर सफारी 8+ भी अब एमएसई का समर्थन करता है।
बिग टुंड्रा

@BigTundra हां, मैक पर Yosemite लॉन्च के बाद से सफारी ने MSE को सपोर्ट किया है। लेकिन आईओएस नहीं। विंडोज के बारे में निश्चित नहीं है। (खिड़कियों पर सफारी अभी भी एक बात है?) फ़ायरफ़ॉक्स 37.0.2 पर (मेरे) मैक उस लिंक के अनुसार एमएसई का समर्थन करने के लिए बिल्कुल भी नहीं लगता है। लेकिन H.264 का समर्थन करता है। फ़ायरफ़ॉक्स ने अतीत में H.264 समर्थन को जोड़ा और हटा दिया है और पुनः जोड़ा है।
सज़ातमरी

अप-टू-डेट ब्राउज़र MPEG-4 / H.264 वीडियो फॉर्मेट के लिए समर्थन करता है: caniuse.com/#feat=mpeg4
Maxence

75

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

मैंने इस अभ्यास के माध्यम से बहुत कुछ सीखा और सहमत हूं कि लाइव स्ट्रीमिंग वीओडी (जो एचटीएमएल 5 वीडियो के साथ अच्छी तरह से काम करती है) की तुलना में बहुत कठिन है। लेकिन मुझे अपने उपयोग के मामले के लिए संतोषजनक ढंग से काम करने के लिए यह मिला और नोड में अधिक जटिल विकल्पों जैसे एमएसई, फ्लैश, विस्तृत बफ़रिंग योजनाओं का पीछा करने के बाद समाधान बहुत सरल हो गया। समस्या यह थी कि FFMPEG खंडित MP4 को दूषित कर रहा था और मुझे FFMPEG मापदंडों को ट्यून करना था, और http पर मानक नोड स्ट्रीम पाइप पुनर्निर्देशन जो मैंने मूल रूप से उपयोग किया था, वह सभी की आवश्यकता थी।

MP4 में एक 'विखंडन' विकल्प है जो mp4 को बहुत छोटे टुकड़ों में तोड़ता है जिसका अपना सूचकांक है और mp4 लाइव स्ट्रीमिंग विकल्प को अनुकूल बनाता है। लेकिन धारा में वापस आना संभव नहीं है (मेरे उपयोग के मामले के लिए ठीक है), और एफएफएमपीईजी के बाद के संस्करण विखंडन का समर्थन करते हैं।

नोट टाइमिंग एक समस्या हो सकती है, और मेरे समाधान के साथ मेरे पास 2 से 6 सेकंड के बीच का अंतराल है, जो रिमूक्सिंग के संयोजन के कारण होता है (प्रभावी रूप से FFMPEG को लाइव स्ट्रीम प्राप्त करना है, इसे फिर से इसे HTTP पर सेवा के लिए नोड को भेजें) । इस बारे में बहुत कुछ नहीं किया जा सकता है, हालांकि क्रोम में वीडियो उतना ही पकड़ने की कोशिश करता है, जितना कि यह वीडियो को थोड़ा उछल-कूद कर सकता है, लेकिन IE11 (मेरे पसंदीदा ग्राहक) की तुलना में अधिक वर्तमान है।

इस पोस्ट में कोड कैसे काम करता है, यह समझाने के बजाय, टिप्पणियों के साथ GIST देखें (क्लाइंट कोड शामिल नहीं है, यह नोड http सर्वर पते के साथ एक मानक HTML5 वीडियो टैग है)। GIST यहां है: https://gist.github.com/deandob/9240090

मुझे इस उपयोग के मामले के समान उदाहरण नहीं मिल पाए हैं, इसलिए मुझे उम्मीद है कि उपरोक्त स्पष्टीकरण और कोड दूसरों की मदद करता है, खासकर जब मैंने इस साइट से बहुत कुछ सीखा है और अभी भी खुद को शुरुआती मानता हूं!

यद्यपि यह मेरे विशिष्ट प्रश्न का उत्तर है, मैंने szatmary के उत्तर को स्वीकार कर लिया है क्योंकि यह सबसे व्यापक है।


33
क्षमा करें, लेकिन मैंने इसे अपने दम पर पाया, मेरे उत्तर का लेखन इस बात को स्पष्ट करता है। पहले के उत्तर सभी सहायक थे और उनकी सराहना की गई थी, लेकिन इसमें कोई योगदान नहीं दिया गया था, और मैंने जीआईएसटी में भी काम करने वाला कोड जमा कर दिया है और किसी के पास नहीं है। मुझे 'प्रतिष्ठा' में कोई दिलचस्पी नहीं है, मुझे यह जानने में दिलचस्पी है कि क्या मेरे दृष्टिकोण और कोड में सुधार किया जा सकता है। और मैंने जो उत्तर दिया है उसने मेरी समस्या को हल कर दिया है, इसलिए मैं उलझन में हूँ कि यहाँ क्या समस्या है। मैं SO के लिए काफी नया हूं इसलिए मुझे एक अलग तरीके से बातचीत करने के लिए कहा जा रहा है, मुझे यह साइट उपयोगी लगी और मेरे जवाब से दूसरों की मदद करनी चाहिए।
डेन्डोब

2
लगता है कि इस समुदाय में आपके उत्तर को स्वीकार किए गए उत्तर के रूप में चुनना उचित नहीं है यदि आपने प्रश्न पूछा है तो भी यह मूल समस्या को ठीक करता है। यद्यपि यह प्रति-सहज लगता है, अवधारणाओं का प्रलेखन वास्तविक निर्धारण से अधिक महत्वपूर्ण है, जो कि मैं ठीक हूं क्योंकि यह दूसरों को सीखने में मदद करता है। मैंने अपने उत्तर को डी-सेलेक्ट कर लिया है और सिज़्मेटरी को कॉन्सेप्ट के आसपास सबसे अधिक स्पष्ट रूप से चुना है।
deandob

6
@ डिएंडोब: मैंने इस समस्या के समाधान के लिए एक इनाम पोस्ट किया, जिसे आपने सफलतापूर्वक प्रदान किया। स्वीकृत उत्तर बताता है कि कोई समाधान नहीं है और इसलिए स्पष्ट रूप से गलत है।
jwriteclub

2
धन्यवाद। ऐसा लगता है कि अन्य लोगों ने मेरे मूल उत्तर को गलत बताया है और जैसा कि मैं नया हूं मैंने बस यह मान लिया है कि चीजें यहां कैसे काम करती हैं। मैं किसी उपद्रव का कारण नहीं बनना चाहता, लेकिन मैं मेटा स्टैक ओवरफ्लो पर लोगों के साथ जांच करूंगा। BTW - मेरा समाधान बहुत अच्छी तरह से काम कर रहा है और यह दूसरों के लिए व्यावहारिक होना चाहिए, और पोस्ट किए गए समाधान पर एक भिन्नता है जो प्रारंभिक अंतराल को कम कर सकती है (नोड में बफर शुरू में। फिर ग्राहक अंत में स्ट्रीम के अंत की तलाश करें) ।
डेंडबॉब

4
मेरे पास एक मॉडरेटर से स्पष्टीकरण है कि प्रश्न का उत्तर देने का मेरा मूल दृष्टिकोण और उत्तर के रूप में चयन करना सही दृष्टिकोण था। अधिक जानकारी के लिए (या यदि आप इस पर आगे बहस करना चाहते हैं) मेटा साइट पर थ्रेड देखें। meta.stackexchange.com/questions/224068/…
deandob

14

JSMPEG प्रोजेक्ट पर एक नजर । जावास्क्रिप्ट का उपयोग कर ब्राउज़र में एमपीईजी को डिकोड करने के लिए - वहाँ एक महान विचार लागू किया गया है। एनकोडर से बाइट्स (FFMPEG, उदाहरण के लिए) उदाहरण के लिए WebSockets या Flash का उपयोग करके ब्राउज़र में स्थानांतरित किया जा सकता है। यदि समुदाय पकड़ लेगा, तो मुझे लगता है, यह अब के लिए सबसे अच्छा एचटीएमएल 5 लाइव वीडियो स्ट्रीमिंग समाधान होगा।


10
यह एक MPEG-1 वीडियो डिकोडर है। मुझे यकीन नहीं है कि आप समझते हैं कि प्राचीन MPEG-1 कैसे है; यह डीवीडी से पुराना है। यह GIF फाइल की तुलना में थोड़ा अधिक उन्नत है।
कैमिलो मार्टिन

13

मैंने ब्रॉडवे h264 कोडेक (एम्सस्क्रिप्टेन) के आसपास एक एचटीएमएल 5 वीडियो प्लेयर लिखा है जो सभी ब्राउज़रों (डेस्कटॉप, आईओएस, ...) पर लाइव (कोई देरी नहीं) h264 वीडियो खेल सकता है।

ग्राहक को वेबसैट के माध्यम से वीडियो स्ट्रीम भेजा जाता है, फ्रेम प्रति फ्रेम डीकोड किया जाता है और कैनवा में प्रदर्शित किया जाता है (त्वरण के लिए वेबलॉग का उपयोग करके)

की जाँच करें https://github.com/131/h264-live-player GitHub पर।


1
github.com/Streamedian/html5_rtsp_player इन लोगों ने कुछ ऐसा ही किया, जो websocket पर rtp h264 का उपयोग करता है
Victor.dMdB

12

HTML5 क्लाइंट के लिए RTSP- आधारित वेबकैम को लाइव-स्ट्रीम करने का एक तरीका (जिसमें पुन: एन्कोडिंग शामिल है, इसलिए गुणवत्ता के नुकसान की उम्मीद है और कुछ सीपीयू-पावर की आवश्यकता है):

  • एक icecast सर्वर सेट करें (उसी मशीन पर हो सकता है जो आप वेब सर्वर पर या उस मशीन पर है जो कैम से आरटीएसपी-स्ट्रीम प्राप्त करता है)
  • कैमरे से स्ट्रीम प्राप्त करने वाली मशीन पर, FFMPEG लेकिन gstreamer का उपयोग न करें। यह RTSP- स्ट्रीम को प्राप्त करने और डिकोड करने में सक्षम है, इसे फिर से एनकोड करें और इसे icecast सर्वर पर स्ट्रीम करें। उदाहरण पाइपलाइन (केवल वीडियो, कोई ऑडियो नहीं):

    gst-launch-1.0 rtspsrc location=rtsp://192.168.1.234:554 user-id=admin user-pw=123456 ! rtph264depay ! avdec_h264 ! vp8enc threads=2 deadline=10000 ! webmmux streamable=true ! shout2send password=pass ip=<IP_OF_ICECAST_SERVER> port=12000 mount=cam.webm

=> फिर आप icecast- स्ट्रीम ( http://127.0.0.1:12000/cam.webm ) के URL के साथ <video> टैग का उपयोग कर सकते हैं और यह वेब ब्राउज़र का समर्थन करने वाले हर ब्राउज़र और डिवाइस में काम करेगा


3

इस समाधान पर एक नज़र डालें । जैसा कि मुझे पता है, फ्लैशफोनर शुद्ध एचटीएमएल 5 पेज में लाइव ऑडियो + वीडियो स्ट्रीम खेलने की अनुमति देता है।

वे प्लेबैक के लिए MPEG1 और G.711 कोडेक्स का उपयोग करते हैं । हैक HTML5 कैनवास तत्व को डिकोड किया गया वीडियो दे रहा है और HTML5 ऑडियो संदर्भ के माध्यम से डिकोड किया गया ऑडियो चला रहा है।


3

कैसे jpeg समाधान का उपयोग करें, बस सर्वर को एक-एक करके ब्राउज़र में jpeg वितरित करें, फिर इन jpegs को खींचने के लिए कैनवास तत्व का उपयोग करें? http://thejackalofjavascript.com/rpi-live-streaming/


2

यह एक बहुत ही आम गलत धारणा है। कोई लाइव HTML5 वीडियो सपोर्ट (iOS और मैक सफारी पर HLS को छोड़कर) नहीं है। आप इसे एक वेब कंटेनर का उपयोग करके 'हैक' करने में सक्षम हो सकते हैं, लेकिन मुझे उम्मीद नहीं होगी कि इसे सार्वभौमिक रूप से समर्थन दिया जाएगा। आप जो खोज रहे हैं वह मीडिया स्रोत एक्सटेंशन में शामिल है, जहां आप एक समय में एक ब्राउज़र को टुकड़े फ़ीड कर सकते हैं। लेकिन आपको कुछ क्लाइंट साइड जावास्क्रिप्ट लिखना होगा।


वहाँ हैं, solutionsलेकिन supportलाइव स्ट्रीमिंग के लिए नहीं है । यह सीधे ऊपर दिखाई गई मेरी टिप्पणी का जिक्र है। और webm प्रमुख ब्राउज़रों पर समर्थित है, ज्यादातर नवीनतम स्थिर संस्करण।
tsturzl

1
मैं वास्तव में H.264 से webm में ट्रांसकोड नहीं करना चाहता हूं और यह आवश्यक नहीं होना चाहिए। जैसा कि मुझे IE11 और सफारी का समर्थन करना है, MediaSource एक्सटेंशन मदद नहीं करेगा। लेकिन मुझे लगता है कि अगर मैं सर्वर साइड पर एक फ़ाइल स्ट्रीम का अनुकरण करता हूं (जो काम करता है!) तो इसे काम करना चाहिए, लेकिन मुझे नोड पर एक फ़ाइल बफर का अनुकरण करना होगा। जेएस
deandob

1
जैसा कि अन्य ने सुझाव दिया है, मैं वेबआरटीसी का उपयोग करने की संभावना तलाशूंगा जो कि वीएलसी या फ्लैश प्लगइन के विपरीत मूल है। मुझे पता है कि इस तकनीक को लागू करना अभी भी कठिन है। सौभाग्य।

1
मुझे यह FFMPEG के नवीनतम संस्करण में अपडेट करके काम करने के लिए मिला क्योंकि ऐसा प्रतीत होता है कि mp4 में भ्रष्टाचार था जब खंडित मोड का उपयोग करना (MP4 लाइव स्ट्रीमिंग के लिए आवश्यक है तो ग्राहक मोव इंडेक्स फ़ाइल की प्रतीक्षा नहीं कर रहा है जो कि लाइव होने पर कभी नहीं आएगा स्ट्रीमिंग)। और मेरा नोड.जेएस कोड सीधे एफएफएमपीजी स्ट्रीम को उस ब्राउज़र पर पुनः निर्देशित करता है जो अब काम करता है।
deandob

1
हां, IE11 (मेरे पसंदीदा ब्राउज़र) पर ठीक काम करता है। मुझे क्रोम में उछल-कूद का जवाब मिलता है।
deandob

2

बाइनरीज की कोशिश करें। यह सिर्फ सॉकेट.आईओ की तरह है लेकिन केवल यह अच्छी तरह से करता है कि यह ऑडियो वीडियो स्ट्रीम करता है। बाइनरीज ने इसे गूगल किया


1
बाइनरी.जेएस सॉकेट.आईओ की तरह कुछ भी नहीं है। और, यह मीडिया स्ट्रीमिंग के लिए विशिष्ट नहीं है।
ब्रैड
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.