माइक्रोफोन, स्क्रीनशॉट और स्थानीय वीडियो: कैसे एक ब्राउज़र में Voximplant Web SDK मीडिया को नियंत्रित करता है

आज मैं Voximplant Web SDK में हार्डवेयर मॉड्यूल के बारे में बात करूंगा। इस मॉड्यूल ने पुराने ऑडियो और वीडियो डिवाइस प्रबंधन प्रणाली को बदल दिया। लेकिन पहले, WebRTC स्टैक में डिवाइस प्रबंधन के बारे में थोड़ा और क्यों यह सब आवश्यक है।

शायद ही कभी, अंत-उपयोगकर्ताओं के पास कई माइक्रोफोन होते हैं। या कई स्पीकर हैं: उदाहरण के लिए, साधारण स्पीकर और ब्लूटूथ हेडफ़ोन; या स्मार्टफोन के लिए फोन स्पीकर और स्पीकरफोन।

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

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



इससे पहले, डिवाइस प्रबंधन के लिए, हमने बाधाओं को इंटरफ़ेस प्रदान किया था, और डेवलपर को स्वतंत्र रूप से मीडिया अनुरोध के सभी प्रतिबंधों और मापदंडों को निर्धारित करना था। यहाँ एक पूरी तरह से अनुकूलित ऑडियो और वीडियो अनुरोध का एक छोटा सा उदाहरण है:

const myConstraints = { audio:{ sampleSize: 16, channelCount: 2, noiseSuppression: true, echoCancellation: false }, video:{ width: { min: 640, ideal: 1920, max: 1920 }, height: { min: 400, ideal: 1080 }, aspectRatio: 1.777777778, frameRate: { max: 30 }, facingMode: { exact: "user" } } }; 

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

अब यह स्पष्ट है कि हमें ऐसा जीवन कैसे मिला। व्यापार के लिए नीचे उतरने का समय है: मॉड्यूल पर एक त्वरित नज़र; एक विस्तृत पढ़ने के लिए, मैं हमारी वेबसाइट पर प्रलेखन के लिए एक लिंक छोड़ दूंगा।

इस मॉड्यूल का प्रवेश बिंदु StreamManager है । ऐतिहासिक रूप से, [एक हाथी के साथ चित्र। जेपीजी], कि हमारे वेब एसडीके के कई हिस्से सिंगलटन हैं, और यह वर्ग कोई अपवाद नहीं है: आप प्राप्त () फ़ंक्शन का उपयोग करके एक उदाहरण प्राप्त कर सकते हैं। इसके कारणों का एक समुद्र है, लेकिन उस समय के बारे में अधिक, शायद।

 const streamManager = VoxImplant.Hardware.StreamManager.get(); 

StreamManager का उपयोग करके, आप स्थानीय वीडियो को सक्षम या अक्षम कर सकते हैं और
उसके लिए मीडिया धाराएँ प्राप्त करना - वास्तव में, बस इतना ही। बाहरी इंटरफेस को देखते हुए प्रवेश बिंदु बहुत बड़ा नहीं है।

 (async () => { try{ console.log('[WebSDK]   '); await streamManager.showLocalVideo(); console.log('[WebSDK]   '); await streamManager.hideLocalVideo(); console.log('[WebSDK]      !'); } catch(e){ console.log('[WebSDK] -   . ,    ?!'); console.error(e); } })(); 

स्थानीय वीडियो के बारे में एक दिलचस्प तथ्य: स्थानीय वीडियो किसी भी तरह से वार्ताकार को प्रेषित नहीं किया जाता है। उदाहरण के लिए, उपयोगकर्ता को एचडी में एक चित्र दिखाया जा सकता है, और 320 * 240, या इसके विपरीत प्रसारित कर सकता है, अगर एक कोने में एक स्थानीय वीडियो छिपा हुआ है। नीचे इस तरह के एक ट्रिक को क्रैंक करने के बारे में होगा।

StreamManager में 3 घटनाएँ हैं:

• DevicesUpdated - उस समय कहा जाता है जब उपयोगकर्ता ने माइक्रोफोन या कैमरे को कनेक्ट / डिस्कनेक्ट कर दिया है;
• MediaRendererAdded - पूर्वावलोकन के साथ एक नया स्थानीय वीडियो या स्क्रीनशॉट जोड़ा गया;
• MediaRendererRemoved - पूर्वावलोकन के साथ हटाए गए स्थानीय वीडियो या स्क्रीनशॉट।

GetLocalMediaRenderers () फ़ंक्शन का उपयोग करते हुए , स्थानीय तत्वों के साथ DOM तत्वों के लिंक प्राप्त करना उपयोगी होता है यदि आपने अपने आप को ऑब्जेक्ट नहीं बचाया है।

 streamManager.getLocalMediaRenderers().forEach(renderer => { cont elementOfDOM = renderer.element; elementOfDOM.addEventListener('on42',doSomething,true); }); 

आइए वीडियो सेटिंग्स पर जाएं (सबसे स्वादिष्ट, अपने हाथों को देखें)। अचानक CameraManager । फिर, उबाऊ हो () फ़ंक्शन के साथ एक सिंगलटन:

 const cameraManager= VoxImplant.Hardware.CameraManager.get(); 

हम कौन सी सेटिंग्स सेट कर सकते हैं? आइए CameraParams इंटरफ़ेस को देखें:

• सख्त - सच ब्राउज़र को शाब्दिक रूप से बताएगा: "मुझे पता है कि मैं क्या कर रहा हूं, अगर कुछ गलत हुआ तो उसे ठीक करने की कोशिश मत करो!" यदि गलत है , तो ब्राउज़र विनम्रतापूर्वक सेटिंग्स घटता है;
• कैमराआईडी - कैमरा डिवाइस चयन। आप उस सूची से चुन सकते हैं जो रिटर्न देती है
  
  

   const allMyDevices = await cameraManager.CameraManager.getInputDevices(); 

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

वीडियो के आकार के लिए एक और 3 विकल्प जिम्मेदार हैं:

• आप या तो VideoQuality का उपयोग कर सकते हैं (हमने फैशनेबल अनुमतियों के एक सेट के साथ Enum VideoQuality तैयार की है)
• या आप फ़्रेमहाइट और फ़्रेमविथ के माध्यम से पिक्सेल में मैन्युअल रूप से आकार ले सकते हैं

चलो CameraManager पर वापस जाएं और सेटिंग लागू करें! इसके अंदर 2 गेटर्स और 2 सेटिंग सेटर हैं:

• getDefaultVideoSettings ;
• getCallVideoSettings ;
• सेटडफॉल्टविडियो सेट्स ;
• setCallVideoSettings ।

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

 console.log('[WebSDK]         .'); await cameraManager.setDefaultVideoSettings({ frameWidth:320, frameHeight:240, frameRate:12 }); await streamManager.showLocalVideo(); cameraManager.setDefaultVideoSettings({ frameWidth:640, frameHeight:480, frameRate:25 }); const newCall = client.call('mySchoolFriendBoris'); 

नाम में कॉल के साथ जोड़ी बनाना थोड़ा अधिक जटिल है। ये फ़ंक्शन पहले से चल रहे कॉल के दौरान वरीयताओं को प्राप्त करने और सेट करने के लिए डिज़ाइन किए गए हैं। सेटिंग्स बदलते समय, CallEvents.Updated इवेंट घटित होगा।

 console.log('[WebSDK]      .'); cameraManager.setCallVideoSettings(newCall,{ frameWidth:320, frameHeight:240, frameRate:12 }); newCall.on(VoxImplant.CallEvents.Updated,e => { console.log('[WebSDK]    .'); }); 

CameraManager के दो कार्य बने हुए हैं। बहुत शक्तिशाली लेकिन परिष्कृत। Enum VideoQuality के तीन रोचक अर्थ हैं:

• VIDEO_QUALITY_HIGH;
• VIDEO_QUALITY_MEDIUM;
• VIDEO_QUALITY_LOW।

एक तार्किक सवाल: “इगोर! अगर वेब एसडीके सबसे अच्छी, सबसे खराब और औसत गुणवत्ता जानता है, तो वेब कैमरा द्वारा समर्थित प्रस्तावों को सूचीबद्ध करने के लिए कोई तरीका क्यों नहीं है! " Tsimes नहीं जानते।

और यह पता लगाने के लिए, आपको सभी संभावित अनुमतियों के माध्यम से क्रमबद्ध करने की आवश्यकता है। जो मैं पाने में कामयाब रहा, वह समर्थित है। यह बहुत सरल लगता है, लेकिन वास्तव में इसमें कई मिनट लगते हैं। इसलिए, हम उदाहरण के लिए, WebSDK के आरंभ में ऐसा नहीं कर सकते। ताकि आप इस समय ऐसा कर सकें जो उपयोगकर्ता के लिए सबसे अधिक आरामदायक है - यदि आप ऐसा करना चाहते हैं - और testResolutions है । यह स्थानीय कार्य में परिणाम के कार्य को सहेजने के लिए अच्छा होगा और बाद में जब पृष्ठ पुनः लोड होता है तो इसे loadResolutionTestResult के माध्यम से लोड करना होगा:

 console.log('[WebSDK]      ,  WebSDK   .'); const testResults = await cameraManager.testResolutions(); localStorage.setItem('defaultCameraResolutionTestResults',JSON.stringify(testResolutions)); 

पिछले नहीं बल्कि कम से कम, AudioDeviceManager । यह वर्ग CameraManager के समान है। केवल ध्वनि के लिए, आपकी सेटिंग्स AudioParams इंटरफ़ेस में परिलक्षित होती हैं:

• सख्त - आपकी इच्छा का सख्ती से पालन करने के लिए सच्चा जिम्मेदार है;
• inputId - माइक्रोफ़ोन चयन। सभी माइक्रोफोन की एक सूची AudioDeviceManager.getInputDevices के माध्यम से प्राप्त की जा सकती है;
• outputId - वक्ताओं की पसंद। यह विकल्प केवल क्रोम में काम करता है, अन्य ब्राउज़र इसे अनदेखा करेंगे। आप getOutputDevices के माध्यम से उपकरणों की एक सूची प्राप्त कर सकते हैं;
• शोर शमन - शोर में कमी। डिफ़ॉल्ट रूप से, शोर में कमी सक्षम है और महान काम करती है। लेकिन आंशिक आवाज हानि हो सकती है यदि उपयोगकर्ता उस कमरे में काम करता है जहां वे बहुत बात करते हैं, उदाहरण के लिए, कॉल सेंटर में। फ़िल्टर बस थोड़ी सी गलती कर सकता है और अतिरिक्त कटौती कर सकता है। यदि आपके पास इस प्रकृति की समस्याएं हैं, तो यह विकल्प झूठे को स्थापित करने के लायक है;
• echoCancellation - माइक्रोफोन से इको हटाता है। इसे पिछले विकल्प के साथ अक्षम किया जाना चाहिए;
• AutoGainControl - ऑपरेटिंग सिस्टम में निर्मित माइक्रोफोन लाभ को स्वचालित रूप से समायोजित करने के लिए एक तंत्र शामिल है। विकल्प का कोई दुष्प्रभाव नहीं है, लेकिन इसका संचालन ऑपरेटिंग सिस्टम और हार्डवेयर पर अत्यधिक निर्भर है। कभी-कभी यह बस काम नहीं कर सकता है और लाभ स्थिर होगा, जो अच्छा भी है।