WebRTC और आभासी वास्तविकता में स्ट्रीमिंग

आभासी वास्तविकता अब फैशन की ऊंचाई पर है। लॉन घास काटने की मशीन के दौरान उपकरण था पागल वैज्ञानिक बड़ी रकम के साथ geeks रक्षा मंत्रालय से , अब एक सामान्य व्यक्ति भी इसे खरीद सकता है, और जिनके पास पूरी तरह से खाली जेब है, वे कार्डबोर्ड से एक वीआर हेडसेट और कई व्यंजनों के अनुसार एक स्मार्टफोन इकट्ठा कर सकते हैं।

और वीआर का लाभ बहुत अधिक ला सकता है। 3-4-5-6-7 से आगे-टू-स्वाद-डी फिल्म थियेटर। मान लीजिए कि आप मास्को में रहते हैं और भूमध्यसागरीय तट पर कहीं अचल संपत्ति - सबसे कठिन मुद्राओं में ईमानदारी से अर्जित संसाधनों का निवेश करना चाहते हैं। जैसा कि आप जानते हैं, मौके पर और अपने दम पर आवास चुनना बेहतर है, लेकिन क्या होगा यदि आप इसे पर्याप्त समय नहीं दे सकते हैं? यह वह जगह है जहाँ आभासी वास्तविकता की आवश्यकता है। कल्पना कीजिए: एक एजेंट एक कमरे में एक विशेष कैमरा स्थापित करता है, और आप, अपनी पसंदीदा कुर्सी को छोड़कर, इस कमरे की जांच कर सकते हैं, अपना सिर घुमा सकते हैं और यहां तक ​​कि 18 वीं शताब्दी की छत के साथ छत भी। "ग्रीक देवता आत्मसमर्पण करते हैं। ऐयाशी रिपोज "देखो!

फिर, सभी समान, जगह छोड़कर नहीं, आप रुचि रखते हैं, लेकिन आपके बच्चे किस तरह के बालवाड़ी में लिप्त हैं? और फिर से: कैमरा गेम रूम में है, और आप उपस्थिति के प्रभाव से उन सभी कोनों की जांच कर सकते हैं जहां आपके बच्चे हैं अलग छिपा रहे हैं।

खैर, हम यह पता लगाएंगे कि कैसे सुनिश्चित करें कि ऐसे मामलों में सब कुछ काम करता है, और realtors बच्चों के पास भागने का समय नहीं था।

वीआर-पिक्चर्स की बारीकियां

"वसीली इवानोविच, समझाएं कि क्या बारीकियां हैं?"
"देखें, पीटर ..."
दो प्रमुख सज्जनों के संवाद से

तकनीकी रूप से, एक वीआर मीडिया स्ट्रीम एक सामान्य से अलग नहीं है: एक वीडियो ट्रैक प्लस एक ऑडियो ट्रैक। लेकिन एक अति सूक्ष्म अंतर है।

वीआर स्ट्रीम एक स्टीरियो इमेज को मानता है। एक विशेष कैमरा दो व्यापक, 180 डिग्री के साथ दुनिया में दिखता है, खुला आंखें इस रोबोट की तरह लगभग लेंस

चित्रों को एक फ्रेम में एक साथ चिपका दिया जाता है,

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

वीआर प्रसारण की बारीकियां

हां, हां, हां, मैं सब कुछ कर सकता हूं
हाथ पर उंगलियों की तरह गिनें
क्लासिक फिल्म का गीत

तो, हम एक उच्च बिट दर के साथ 4K स्ट्रीम प्रसारित करने के बारे में बात कर रहे हैं। हमारे पास क्या है? और हमारे पास RTMP और WebRTC है।

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

WebRTC - स्टाइलिश, फैशनेबल, युवा। अच्छे चैनलों के साथ, मिलीसेकंड में देरी को मापा जाता है, वास्तविकता वास्तविकता रहेगी। लेकिन बारीकियां हैं।

सबसे पहले, डिफ़ॉल्ट रूप से WebRTC UDP के शीर्ष पर चलता है, जो चैनल गुणवत्ता में थोड़ी गिरावट के साथ, नुकसान की ओर जाता है। और एक 4K स्ट्रीम के लिए, चैनल पर कोई भी छींक पहले से ही एक गिरावट है। यह टीसीपी परिवहन पर स्विच करके निपटा जा सकता है, लेकिन फिर हमारे इंतजार में है ...

दूसरे, WebRTC ब्राउज़र से प्रसारित किया जाता है, और आप और मैं जानते हैं कि वर्तमान में कौन सा ब्राउज़र ग्रह पर सबसे लोकप्रिय है (स्पॉइलर - लंबे समय तक IE6 नहीं)। और इस लोकप्रिय ब्राउज़र में, और इंजन स्तर पर, अधिकतम प्रकाशन बिटरेट 2500 केबीपीएस है। यह पर्याप्त है गूगल के अनुसार FullHD के लिए, लेकिन 4K के लिए पर्याप्त नहीं है, और अगर बिटरेट को 5 - 10 Mbit / s तक त्वरित नहीं किया जाता है, तो दर्शक वर्चुअल रियलिटी के बजाय वॉटरकलर स्पॉट को स्थानांतरित करते देखेंगे। सौभाग्य से, बिटरेट को ओवरक्लॉक करने के लिए विशेष सेटिंग्स हैं, जो अंदर काम करती हैं सब के बारे में क्रोमियम इंजन पर अधिकांश ब्राउज़र। फिर, इस बाधा को दूर करने, हम आराम करेंगे ...

तीसरा, हम चैनल क्षमता में चलेंगे। वीआर तस्वीर को प्रकाशित करने और चलाने के लिए, ऊपर वर्णित बिटरेट के साथ, क्लाइंट को 20 Mbit से चैनल की आवश्यकता होगी, या 50 से बेहतर, और 100 Mbit से बेहतर, दोनों डाउनलोड और अपलोड दोनों में। इसके अलावा, ये पैरामीटर नहीं होने चाहिए जो प्रदाता विज्ञापन पुस्तिकाओं में बात करता है, लेकिन ग्राहक से सर्वर तक वास्तविक बैंडविड्थ। वैसे, यहां आप पढ़ सकते हैं कि इसे बिना iperf और कमांड लाइन ज्ञान के कैसे मापा जा सकता है । यदि आप बड़ी संख्या में धाराओं पर भरोसा करते हैं, तो सर्वर साइड पर, 10 जीबी होना आवश्यक है।

अच्छी तरह से और चौथा, जो चैनलों के लिए आवश्यकताओं से निम्नानुसार है। एक 4K स्ट्रीम को ट्रांसकोड करने से सर्वर पर बहुत अधिक प्रोसेसर संसाधन हो जाएंगे। इसलिए, आपको या तो एक tsar सर्वर चुनना होगा, जो बजट पर महंगा है, या वीडियो कार्ड पर एन्कोडिंग का उपयोग करें, जो बहुत महंगा भी है, या ट्रांसकोडिंग से बचें। यही है, किसी भी मामले में अनुवाद के दौरान धाराओं के रिज़ॉल्यूशन, फ्रेम दर और बिटरेट में बदलाव न करें।

तो सभी उथले अब गिने जा रहे हैं

आइए कोशिश करते हैं

सोचने के लिए क्या है, आपको हिलाने की ज़रूरत है!
कार्टून चरित्र

लें:

• विशेष कैमरा
• विशेष खिलाड़ी
• एक सर्वर जो ब्राउज़र से WebRTC को प्रसारित कर सकता है

एक मेज या तिपाई पर कैमरा माउंट करें

बाहरी ड्राइव के रूप में 1 ए पावर के साथ यूएसबी 3.0 के माध्यम से पीसी से कनेक्ट करें

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

सर्वर साइड पर, आवश्यक बिटरेट सीमा निर्धारित करें

webrtc_cc_min_bitrate=5000000 webrtc_cc_max_bitrate=10000000 

हम Chrome ब्राउज़र में एक उदाहरण पृष्ठ खोलेंगे, जो आपको कैमरे से स्ट्रीम कैप्चर करने के लिए आवश्यक पैरामीटर सेट करने और सेट करने की अनुमति देता है

• संकल्प 3072x1536
• FPS 24 (ब्राउज़र से प्रसारण करते समय, कैमरा केवल ऐसे FPS का समर्थन करता है)
• टीसीपी परिवहन

और एसडीपी सेटिंग्स को कॉन्फ़िगर करें ताकि ब्राउज़र हमें काट न सके स्टर्जन बिट दर, ग्राहक पक्ष

 x-google-max-bitrate=10000;x-google-min-bitrate=5000 

या सर्वर की ओर (इस मामले में, सेटिंग सभी प्रकाशन ग्राहकों के लिए मान्य होगी)

 webrtc_sdp_min_bitrate_bps=5000000 webrtc_sdp_max_bitrate_bps=10000000 

हम कैमरे से स्ट्रीम प्रकाशित करते हैं

अब एक नियमित WebRTC प्लेयर के साथ स्ट्रीम खेलने की कोशिश करते हैं

सब ठीक है ... लगभग। आभासीता पूरी तरह से आभासी नहीं है। खैर, अब हम पृष्ठ पर एम्बेडेड विशेष खिलाड़ी में एक ही स्ट्रीम खेलते हैं

इतना बेहतर (और बिल्लियों हैं)। यदि आप मोबाइल डिवाइस या वीआर ग्लास पर स्ट्रीम खेलते हैं, तो आप अपना सिर घुमा सकते हैं, और हम पीसी पर माउस को माउस में बदल देंगे। इस कमरे में कहीं एक बच्चा छिपा था। बाईं ओर देखते हैं

अब सही है

और ऊपर

और बच्चा कहां है? हां, यहां वह पर्दे के पीछे छिपा है। लेकिन बिल्ली सब कुछ देखती है!

कोड, आपको अधिक कोड की आवश्यकता है!

क्लाइंट की तरफ, बहुत अधिक कोड नहीं है।

ब्राउज़र पेज से स्ट्रीम प्रकाशित करें

 session.createStream({ name: streamName, display: localVideo, cacheLocalResources: true, transport: "TCP", sdpHook: rewriteSdp, constraints: { audio:true, video: { width: 3072, height: 1536, frameRate: 24 } } }).publish(); 

एसडीपी ब्राउज़र ओवरराइड फ़ीचर

 function rewriteSdp(sdp) { var sdpStringFind = "a=fmtp:(.*) (.*)"; var sdpStringReplace = "a=fmtp:$1 $2;x-google-max-bitrate=10000;x-google-min-bitrate=5000"; var newSDP = sdp.sdpString.toString(); newSDP = newSDP.replace(new RegExp(sdpStringFind,"g"), sdpStringReplace); return newSDP; } 

वीआर खिलाड़ी के साथ उदाहरण पृष्ठ

 <!DOCTYPE html> <html> <head> <title>WebRTC Delight</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="../../../../flashphoner.js"></script> <script type="text/javascript" src="../../dependencies/jquery/jquery-1.12.0.js"></script> <script type="text/javascript" src="../../dependencies/js/utils.js"></script> <script src="dl8-player.js" async></script> <meta name="dl8-custom-format" content='{"name": "STEREO_TERPON","base":"STEREO_MESH","params":{"uri": "03198702.json"}}'> </head> <body> <div style="width: 50%;" id="display"> <dl8-live-video id="remoteVideo" format="STEREO_TERPON"> \<source> </dl8-live-video> </div> <input class="form-control" type="text" id="playStream" placeholder="Stream Name"> <button id="playBtn" type="button" class="btn btn-default" disabled>Play</button> <button id="stopBtn" type="button" class="btn btn-default" disabled>Stop</button> <script> Flashphoner.init({flashMediaProviderSwfLocation: '../../../../media-provider.swf'}); var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS; var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS; var STREAM_STATUS_INFO = Flashphoner.constants.STREAM_STATUS_INFO; var playBtn = document.getElementById('playBtn'); var display = document.getElementById('display'); var dl8video = null; var url = setURL(); document.addEventListener('x-dl8-evt-ready', function () { dl8video = document.getElementById('remoteVideo'); $('#playBtn').prop('disabled', false).click(function() { playStream(); }); }); function playStream() { $('#playBtn').prop('disabled', true); $('#stopBtn').prop('disabled', false); var video = dl8video.contentElement; Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function (session) { var session = Flashphoner.getSessions()[0]; session.createStream({ name: document.getElementById('playStream').value, display: display, remoteVideo: video, transport: "TCP" }).on(STREAM_STATUS.PLAYING, function (stream) { dl8video.start(); $('#stopBtn').prop('disabled', false).click(function() { $('#playBtn').prop('disabled', false); $('#stopBtn').prop('disabled', true); stream.stop(); dl8video.exit(); }); }).play(); }) } </script> </body> </html> 

आमतौर पर, जब एक खिलाड़ी ( session.createStream() कॉलिंग session.createStream() लिए एक स्ट्रीम बनाते हैं, तो हम एक div एलिमेंट पास करते हैं, जिसमें WebRTC द्वारा स्ट्रीम प्ले करने के लिए एक वीडियो एलिमेंट लगाया जाएगा। लेकिन वीआर प्लेयर अपने स्वयं के वीडियो तत्व का उपयोग करता है, और हमें किसी तरह से उपयोग किए गए एपीआई के कोड में इसे अग्रेषित करना होगा। ऐसा करने के लिए, हम सीधे तीसरे पक्ष के खिलाड़ी के वीडियो तत्व को session.createStream () फंक्शन के साथ पास करते हैं।

Demo.flashphoner.com का उपयोग सर्वर साइड के रूप में किया जाता है, वेब एप्लिकेशन के उदाहरण लिंक द्वारा बेसमेंट में उपलब्ध हैं।

घटनास्थल पर निरीक्षण में गुड लक, मौके को छोड़े बिना!

संदर्भ

1. टीसीपी पर सर्वर वेबआरटीसी चैनल गुणवत्ता संकेतक - क्लाइंट से सर्वर तक चैनलों का गुणवत्ता नियंत्रण
2. एक ब्राउज़र या मोबाइल डिवाइस पर एक वेब कैमरा से वीडियो स्ट्रीमिंग - एक ब्राउज़र से वेबआरटीसी स्ट्रीमिंग
3. एक वीआर खिलाड़ी के साथ डब्ल्यूसीएस का उपयोग करने के लिए प्रलेखन
4. WCS - वीआर 360 वीडियो को वेबआरटीसी के माध्यम से प्रसारित करने के लिए सर्वर