👧🏻 🐏 ➡️ मैंने कैसे (लगभग) बेकार जावास्क्रिप्ट वेबकैम स्ट्रीमिंग किया 👨🏿‍🏫 🔨 💽

इस लेख में, मैं एडोब-फ्लैश प्लेयर जैसे तृतीय-पक्ष ब्राउज़र प्लगइन्स का उपयोग किए बिना वीडियोस्कू के माध्यम से वीडियो स्ट्रीम करने के अपने प्रयासों को साझा करना चाहता हूं। इस पर क्या आया।

Adobe Flash - पूर्व में Macromedia Flash, वेब ब्राउज़र में चलने वाले एप्लिकेशन बनाने का एक मंच है। मीडिया स्ट्रीम एपीआई के कार्यान्वयन से पहले, यह एक वेब कैमरा से वीडियो और आवाज को स्ट्रीमिंग करने के लिए लगभग एक ही मंच था, साथ ही साथ एक ब्राउज़र में विभिन्न सम्मेलनों और चैट बनाने के लिए। मीडिया जानकारी आरटीएमपी (रियल टाइम मैसेजिंग प्रोटोकॉल) को प्रसारित करने का प्रोटोकॉल वास्तव में लंबे समय से बंद था, जिसका मतलब था: यदि आप अपनी स्ट्रीमिंग सेवा को बढ़ाना चाहते हैं, तो कृपया एडोब स्वयं - एडोब मीडिया सर्वर (एएमएस) से सॉफ्टवेयर का उपयोग करें।

2012 में कुछ समय के बाद, Adobe "ने RTMP प्रोटोकॉल के विनिर्देशन को " आत्मसमर्पण कर दिया और थूक दिया ", जिसमें त्रुटियां थीं और वास्तव में, पूर्ण नहीं थी। उस समय तक, डेवलपर्स ने इस प्रोटोकॉल के अपने कार्यान्वयन को बनाना शुरू कर दिया, इसलिए Wowza सर्वर दिखाई दिया। 2011 में, Adobe ने RTMP से संबंधित पेटेंट के अवैध उपयोग के लिए Wowza के खिलाफ मुकदमा दायर किया, 4 साल बाद दुनिया द्वारा संघर्ष को हल किया गया।

एडोब फ्लैश प्लेटफॉर्म को लगभग 20 साल से अधिक समय हो गया है, इस समय के दौरान कई महत्वपूर्ण कमजोरियों की खोज की गई थी, उन्होंने 2020 तक समर्थन बंद करने का वादा किया था , इसलिए स्ट्रीमिंग सेवा के लिए इतने सारे विकल्प नहीं हैं।

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

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

सर्वर कोड

package main import ( "errors" "github.com/go-chi/chi" "gopkg.in/olahol/melody.v1" "log" "net/http" "time" ) func main() { r := chi.NewRouter() m := melody.New() m.Config.MaxMessageSize = 204800 r.Get("/", func(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "public/index.html") }) r.Get("/ws", func(w http.ResponseWriter, r *http.Request) { m.HandleRequest(w, r) }) //    m.HandleMessageBinary(func(s *melody.Session, msg []byte) { m.BroadcastBinary(msg) }) log.Println("Starting server...") http.ListenAndServe(":3000", r) }

क्लाइंट (प्रसारण पक्ष) पर, आपको पहले कैमरे तक पहुंचना होगा। यह MediaStream API के माध्यम से किया जाता है।

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

इसके बाद, getUserMedia () एक वादा करता है, जिसमें एक MediaStream ऑब्जेक्ट पास किया जाता है - वीडियो और ऑडियो डेटा की एक धारा। हम इस ऑब्जेक्ट को src में वीडियो एलिमेंट प्रॉपर्टी में असाइन करते हैं। कोड:

प्रसारण पक्ष

 <style> #videoObjectHtml5ApiServer { width: 320px; height: 240px; background: #666; } </style> </head> <body> <!--    ""     --> <video autoplay id="videoObjectHtml5ApiServer"></video> <script type="application/javascript"> var video = document.getElementById('videoObjectHtml5ApiServer'); //   MediaDevices API,      (    ) // getUserMedia  ,           video    if (navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) { //     video ,        video.srcObject = stream; }); } </script>

सॉकेट्स के माध्यम से एक वीडियो स्ट्रीम प्रसारित करने के लिए, आपको किसी तरह इसे कहीं एनकोड करने, इसे बफर करने और इसे भागों में प्रसारित करने की आवश्यकता है। कच्ची वीडियो स्ट्रीम को वेबस्केट के माध्यम से प्रेषित नहीं किया जा सकता है। यह वह जगह है जहाँ MediaRecorder API बचाव के लिए आता है। यह एपीआई आपको एक स्ट्रीम को टुकड़ों में एन्कोड और तोड़ने की अनुमति देता है। मैं वीडियो स्ट्रीम को संपीड़ित करने के लिए कोडिंग करता हूं, ताकि मैं नेटवर्क पर कम बाइट चला सकूं। टुकड़ों में टूटने के बाद, प्रत्येक टुकड़े को वेबसोकेट में भेजना संभव है। कोड:

हम वीडियो स्ट्रीम को एन्कोड करते हैं, इसे टुकड़ों में हराते हैं

 <style> #videoObjectHtml5ApiServer { width: 320px; height: 240px; background: #666; } </style> </head> <body> <!--    ""     --> <video autoplay id="videoObjectHtml5ApiServer"></video> <script type="application/javascript"> var video = document.getElementById('videoObjectHtml5ApiServer'); //   MediaDevices API,      (    ) // getUserMedia  ,           video    if (navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) { //     video ,        video.srcObject = s; var recorderOptions = { mimeType: 'video/webm; codecs=vp8' //      webm  vp8 }, mediaRecorder = new MediaRecorder(s, recorderOptions ); //  MediaRecorder mediaRecorder.ondataavailable = function(e) { if (e.data && e.data.size > 0) { //     e.data } } mediaRecorder.start(100); //      100   }); } </script>

अब websockets पर स्थानांतरण जोड़ें। हैरानी की बात है, यह केवल एक WebSocket ऑब्जेक्ट की आवश्यकता है। इसमें केवल दो भेजने और बंद करने के तरीके हैं। नाम अपने लिए बोलते हैं। विस्तारित कोड:

हम सर्वर पर वीडियो स्ट्रीम संचारित करते हैं

 <style> #videoObjectHtml5ApiServer { width: 320px; height: 240px; background: #666; } </style> </head> <body> <!--    ""     --> <video autoplay id="videoObjectHtml5ApiServer"></video> <script type="application/javascript"> var video = document.getElementById('videoObjectHtml5ApiServer'); //   MediaDevices API,      (    ) // getUserMedia  ,           video    if (navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) { //     video ,        video.srcObject = s; var recorderOptions = { mimeType: 'video/webm; codecs=vp8' //      webm  vp8 }, mediaRecorder = new MediaRecorder(s, recorderOptions ), //  MediaRecorder socket = new WebSocket('ws://127.0.0.1:3000/ws'); mediaRecorder.ondataavailable = function(e) { if (e.data && e.data.size > 0) { //     e.data socket.send(e.data); } } mediaRecorder.start(100); //      100   }).catch(function (err) { console.log(err); }); } </script>

प्रसारण पक्ष तैयार है! अब एक वीडियो स्ट्रीम लेने और क्लाइंट पर दिखाने की कोशिश करते हैं। इसके लिए हमें क्या चाहिए? सबसे पहले, ज़ाहिर है, एक सॉकेट कनेक्शन। हम WebSocket ऑब्जेक्ट पर "श्रोता" लटकाते हैं, 'संदेश' ईवेंट की सदस्यता लेते हैं। बाइनरी डेटा का एक टुकड़ा प्राप्त करने के बाद, हमारा सर्वर इसे ग्राहकों के लिए प्रसारित करता है, अर्थात ग्राहक। उसी समय, 'संदेश' घटना के "श्रोता" से जुड़े कॉलबैक फ़ंक्शन को क्लाइंट पर ट्रिगर किया जाता है, ऑब्जेक्ट को फ़ंक्शन तर्क में पास किया जाता है - vp8 द्वारा एन्कोड किए गए वीडियो स्ट्रीम का एक टुकड़ा।

हम एक वीडियो स्ट्रीम स्वीकार करते हैं

 <style> #videoObjectHtml5ApiServer { width: 320px; height: 240px; background: #666; } </style> </head> <body> <!--    ""     --> <video autoplay id="videoObjectHtml5ApiServer"></video> <script type="application/javascript"> var video = document.getElementById('videoObjectHtml5ApiServer'), socket = new WebSocket('ws://127.0.0.1:3000/ws'), arrayOfBlobs = []; socket.addEventListener('message', function (event) { // ""     arrayOfBlobs.push(event.data); //     readChunk(); }); </script>

लंबे समय तक मैंने यह समझने की कोशिश की कि प्लेबैक के लिए प्राप्त टुकड़ों को तुरंत वीडियो तत्व में भेजना असंभव क्यों है, लेकिन यह असंभव हो गया, ज़ाहिर है, आपको पहले वीडियो तत्व से जुड़े एक विशेष बफर में टुकड़ा डालना होगा, और उसके बाद ही वह वीडियो स्ट्रीम खेलना शुरू कर देगा। ऐसा करने के लिए, आपको MediaSource API और FileReader API की आवश्यकता है ।

MediaSource मीडिया प्लेबैक ऑब्जेक्ट और इस मीडिया स्ट्रीम के स्रोत के बीच एक प्रकार के मध्यस्थ के रूप में कार्य करता है। MediaSource ऑब्जेक्ट में वीडियो / ऑडियो स्ट्रीम स्रोत के लिए प्लग करने योग्य बफर होता है। एक विशेषता यह है कि बफर में केवल Uint8 डेटा हो सकता है, इसलिए इस तरह के बफर को बनाने के लिए FileReader की आवश्यकता होती है। कोड पर एक नज़र डालें और यह अधिक स्पष्ट हो जाएगा:

वीडियो स्ट्रीम चलाएं

 <style> #videoObjectHtml5ApiServer { width: 320px; height: 240px; background: #666; } </style> </head> <body> <!--    ""     --> <video autoplay id="videoObjectHtml5ApiServer"></video> <script type="application/javascript"> var video = document.getElementById('videoObjectHtml5ApiServer'), socket = new WebSocket('ws://127.0.0.1:3000/ws'), mediaSource = new MediaSource(), //  MediaSource vid2url = URL.createObjectURL(mediaSource), //   URL      arrayOfBlobs = [], sourceBuffer = null; // ,  - socket.addEventListener('message', function (event) { // ""     arrayOfBlobs.push(event.data); //     readChunk(); }); //   MediaSource   ,      // /  //   ,   ,        //     ,       mediaSource.addEventListener('sourceopen', function() { var mediaSource = this; sourceBuffer = mediaSource.addSourceBuffer("video/webm; codecs=\"vp8\""); }); function readChunk() { var reader = new FileReader(); reader.onload = function(e) { //   FileReader  ,      //  ""   Uint8Array ( Blob)   ,  //  ,       / sourceBuffer.appendBuffer(new Uint8Array(e.target.result)); reader.onload = null; } reader.readAsArrayBuffer(arrayOfBlobs.shift()); } </script>

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

मैंने कैसे (लगभग) बेकार जावास्क्रिप्ट वेबकैम स्ट्रीमिंग किया

More articles: