ब्राउझरवरून (जवळजवळ) निरुपयोगी वेबकॅम स्ट्रीमिंग. भाग 2. WebRTC

कसा तरी आत одной जुन्या आणि आधीच सोडून दिलेल्या लेखांमधून, मी वेबसॉकेटद्वारे कॅनव्हासवरून व्हिडिओ किती सहज आणि नैसर्गिकरित्या प्रसारित करू शकता याबद्दल लिहिले. त्या लेखात, मी कॅमेऱ्यातून व्हिडिओ कसा घ्यायचा आणि मायक्रोफोन वापरून आवाज कसा घ्यायचा याबद्दल थोडक्यात बोललो MediaStream API, प्राप्त झालेला प्रवाह एन्कोड कसा करायचा आणि वेबसॉकेटद्वारे सर्व्हरवर कसा पाठवायचा. तथापि, प्रत्यक्षात ते असे करत नाहीत, प्रसारणासाठी ते एकतर विशेष सॉफ्टवेअर वापरतात जे स्थापित आणि कॉन्फिगर करणे आवश्यक आहे: ऑफहँड, हे असू शकते ओपन ब्रॉडकास्ट सॉफ्टवेअर, किंवा ते WebRTC वापरतात, जे अगदी बॉक्सच्या बाहेर कार्य करते, म्हणजेच, ला फ्लॅश प्लेयर असे कोणतेही प्लगइन स्थापित करण्याची आवश्यकता नाही, जे डिसेंबरमध्ये आधीच Chromium ब्राउझरमधून कापले जाईल.

आज आपण WebRTC बद्दल बोलू.

वेब रीअल-टाइम कम्युनिकेशन (वेबआरटीसी) हा एकच प्रोटोकॉल नाही, तो मानक, प्रोटोकॉल आणि JavaScript API चा संपूर्ण संग्रह आहे जो एकत्रितपणे पीअर-टू-पीअर रीअल-टाइम व्हिडिओ-ऑडिओ कम्युनिकेशन प्रदान करतो आणि कोणत्याही हस्तांतरित करण्यासाठी देखील वापरला जाऊ शकतो. बायनरी डेटा. सहसा ब्राउझर समवयस्क म्हणून कार्य करतात, परंतु ते मोबाइल अनुप्रयोग देखील असू शकतात, उदाहरणार्थ. क्लायंट दरम्यान p2p संप्रेषण आयोजित करण्यासाठी, विविध प्रकारच्या व्हिडिओ आणि ऑडिओ एन्कोडिंगसाठी ब्राउझर समर्थन आवश्यक आहे, विविध नेटवर्क प्रोटोकॉलसाठी समर्थन, ब्राउझरसह हार्डवेअरची परस्परसंवाद सुनिश्चित करणे (OS स्तरांद्वारे): वेबकॅम, साउंड कार्ड्स. विकासकाच्या सोयीसाठी जावास्क्रिप्ट एपीआय अ‍ॅबस्ट्रॅक्शनच्या मागे तंत्रज्ञानाचा हा सगळा हॉजपॉज लपलेला आहे.

हे सर्व तीन API वर उकळते:

• MediaStream API — गेल्या वेळी उध्वस्त, आज मी त्याच्याबद्दल थोडे अधिक लिहीन. हार्डवेअरमधून व्हिडिओ / ऑडिओ प्रवाह प्राप्त करण्यासाठी सेवा देते

• RTCPeerConnection - दोन क्लायंट (p2p) दरम्यान संवाद प्रदान करते

• RTCDataChannel - दोन क्लायंट दरम्यान अनियंत्रित डेटा हस्तांतरित करण्यासाठी कार्य करते

प्रसारणासाठी ऑडिओ आणि व्हिडिओ प्रवाह तयार करत आहे

हे सर्व वेबकॅम आणि मायक्रोफोन मीडिया प्रवाह "कॅप्चर" ने सुरू होते. अर्थात, टेलिकॉन्फरन्स आयोजित करण्यासाठी कच्चे प्रवाह योग्य नाहीत, प्रत्येक प्रवाहावर प्रक्रिया करणे आवश्यक आहे: गुणवत्ता सुधारणे, व्हिडिओसह ऑडिओ सिंक्रोनाइझ करणे, व्हिडिओ प्रवाहात सिंक्रोनाइझेशन गुण ठेवा आणि चॅनेलच्या सतत बदलणाऱ्या बँडविड्थशी संबंधित बिटरेट सुनिश्चित करा. . ब्राउझर या सर्व गोष्टींची काळजी घेतो, विकसकाला मीडिया प्रवाहांसाठी एन्कोडिंग प्रदान करण्याबद्दल काळजी करण्याची देखील गरज नाही. आधुनिक ब्राउझरमध्ये, कॅप्चरिंग, गुणवत्ता सुधारण्यासाठी (ध्वनीमधून प्रतिध्वनी आणि आवाज काढा, चित्र सुधारा), व्हिडिओ आणि ऑडिओ एन्कोडिंगसाठी सॉफ्टवेअर स्तर आधीपासूनच आहेत. स्तर योजना अंजीर मध्ये दर्शविली आहे. १:

तांदूळ. 1. ब्राउझरमध्ये ऑडिओ आणि व्हिडिओ प्रक्रियेचे स्तर

सर्व प्रक्रिया थेट ब्राउझरमध्येच होतात, कोणतेही अतिरिक्त नाही. कोणतेही प्लगइन आवश्यक नाही. तथापि, 2020 साठी गोष्टी अद्याप तितक्या गुलाबी नाहीत. असे ब्राउझर आहेत जे अद्याप पूर्णपणे समर्थन देत नाहीत MediaStream API, तुम्ही दुव्याचे अनुसरण करू शकता आणि अगदी तळाशी सुसंगतता सारणी पाहू शकता. विशेषतः IE पुन्हा निराशाजनक आहे.

प्राप्त झालेल्या प्रवाहांसह तुम्ही खूप मनोरंजक गोष्टी करू शकता: तुम्ही क्लोन करू शकता, व्हिडिओ रिझोल्यूशन बदलू शकता, ऑडिओ गुणवत्तेत फेरफार करू शकता, तुम्ही मीडिया स्ट्रीम स्ट्रीम घेऊ शकता आणि "हुक" करू शकता html पृष्ठावर स्वतःला टॅग करा आणि पहा. किंवा तुम्ही कॅनव्हासवर एक प्रवाह काढू शकता आणि WebGL किंवा CSS3 सेट करू शकता आणि व्हिडिओवर विविध फिल्टर लागू करू शकता, कॅनव्हासमधून प्रक्रिया केलेला व्हिडिओ कॅप्चर करू शकता आणि नंतर तो नेटवर्कवरून सर्व्हरवर पाठवू शकता, ट्रान्सकोड करू शकता आणि प्रत्येकासाठी प्रकाशित करू शकता (hello bigo live, twitch आणि इतर). येथे मी अशा गोष्टी कशा केल्या जातात याचे विश्लेषण करणार नाही, मी वेबवर सापडलेली काही उदाहरणे देईन:

https://jeeliz.com/ - मुले Javascript मध्ये रिअलटाइम सीव्ही करत आहेत. त्यांच्याकडे संपूर्ण आहे शस्त्रागार कॅनव्हासवर व्हिडिओ प्रवाहासह कार्य करण्यासाठी विविध js लायब्ररी: चेहरे, वस्तू शोधणे, फिल्टर लागू करणे (मास्क, जसे की Instagram मध्ये), इ. तुम्ही अतिरिक्त प्लगइनशिवाय थेट ब्राउझरमध्ये रिअल-टाइम व्हिडिओवर प्रक्रिया कशी करू शकता याचे उत्कृष्ट उदाहरण.

कॅनव्हास कॅप्चरस्ट्रीम API - कॅनव्हासमधून व्हिडिओ प्रवाह कॅप्चर करण्यासाठी API दस्तऐवजीकरण. Chrome, Opera आणि Firefox मध्ये आधीपासूनच समर्थित आहे

RTCPeerConnection

तर आम्ही मुद्द्यावर आलो, परंतु प्रत्यक्षात व्हिडिओ दुसर्या वापरकर्त्याकडे कसा हस्तांतरित करायचा? समोर येतो RTCPeerConnection. थोडक्यात, जवळजवळ या टप्प्यावर तुम्हाला RTCPeerConnection ऑब्जेक्ट तयार करणे आवश्यक आहे:

const peerConnection = new RTCPeerConnection({
  iceServers: [{
    urls: 'stun:stun.l.google.com:19302'
  }]
});

आम्ही पर्यायांपैकी एक म्हणून iceServers निर्दिष्ट करतो - हा एक सर्व्हर आहे जो NAT'om च्या मागे दोन ब्राउझर दरम्यान कनेक्शन प्रदान करण्यात मदत करतो. म्हणजेच, समस्येचे येथे निराकरण झाले आहे: इंटरलोक्यूटरचा आयपी त्याच्या प्रदात्याच्या NAT च्या मागे असल्यास तो कसा शोधायचा? ICE प्रोटोकॉल बचावासाठी येतो, खरं तर, ICE WebRTC ला अजिबात लागू होत नाही, परंतु नंतर त्याबद्दल अधिक.

पूर्वी, आम्हाला Usermedia प्रवाह मिळाले:

navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
  // Usermedia-потоки, обычно это видео и аудио 
  const tracks = stream.getTracks();

   for (const track of tracks) {
     // каждый трек присоединяем к peerConnection
     peerConnection.addTrack(track);
   }
}).catch(console.error);

पुढे, peerConnection वर वाटाघाटी आवश्यक असलेला कार्यक्रम सुरू होतो, ज्याच्या हँडलरमध्ये आम्ही एक ऑफर तयार केली पाहिजे (एसडीपी - सत्र वर्णन प्रोटोकॉलच्या संदर्भात) आणि सेटलोकलडिस्क्रिप्शन पद्धतीद्वारे पीअरकनेक्शनला ते नियुक्त केले पाहिजे. SDP बद्दल - ते काय आहे आणि ऑफर आणि उत्तर स्वरूपांबद्दल - आम्ही पुढे बोलू.

LocalDescription peerConnection नियुक्त केल्यानंतर, ब्राउझर बर्फ उमेदवारांना "एकत्रित" करतो, म्हणजेच NAT द्वारे संप्रेषण करण्याचे विविध मार्ग शोधतो. onicegatheringstatechange कार्यक्रमाला आग लागली. onicegatheringstatechange हँडलरमध्ये, आम्ही समवयस्कांमधील सत्र वर्णनाची देवाणघेवाण करण्यासाठी webrtc-signaling-server स्ट्रीमशी कनेक्शनला परवानगी देतो:

peerConnection.oniceconnectionstatechange = (event) => {
      console.log('Connection state: ', peerConnection.iceConnectionState);

      if (peerConnection.iceConnectionState === 'connected') {
        // Можем активировать кнопку Start broadcast
        setBroadcasting(true);
        setBroadcastingBtnActive(true);
      }
    };

// Событие срабатывает сразу, как только добавился медаиапоток в peerConnection
peerConnection.onnegotiationneeded = (event) => {
      // Создаем и назначаем SDP offer
      peerConnection.createOffer().
        then((offer) => peerConnection.setLocalDescription(offer)).
        catch(console.error);
    };

// Событие срабатывает каждый раз, как появляется ICE кандидат
peerConnection.onicegatheringstatechange = (ev) => {
      let connection = ev.target;

      // Now we can activate broadcast button
      if (connection.iceGatheringState === 'complete') {
        let delay = 50;
        let tries = 0;
        let maxTries = 3;

        let timerId = setTimeout(function allowStreaming() {
          if (isOnline) {
            setBroadcastingBtnActive(true);
            return;
          }

          if (tries < maxTries) {
            tries += 1;
            delay *= 2;
            timerId = setTimeout(allowStreaming, delay);
          } else {
            // TODO: show user notification
            console.error("Can't connect to server");

            alert("Can't connect to server");
          }
        }, delay);
      }
    };

webrtc-signaling-server हा दोन समवयस्कांमधील सत्र वर्णनाची देवाणघेवाण करण्यासाठी आवश्यक असलेला सर्व्हर आहे, तो कोणत्याही PL वर सर्वात सोपा वेबसॉकेट किंवा xhr-सर्व्हर असू शकतो. त्याचे कार्य सोपे आहे: एका समवयस्काकडून सत्राचे वर्णन स्वीकारणे आणि ते दुसर्‍याकडे हस्तांतरित करणे.

सत्र वर्णनाच्या देवाणघेवाणीनंतर, दोन्ही बाजू व्हिडिओ प्रवाह प्रसारित करण्यासाठी आणि प्राप्त करण्यासाठी तयार आहेत, ज्या बाजूला व्हिडिओ प्रवाह प्राप्त होतो, ऑनट्रॅक इव्हेंट पीअरकनेक्शनवर ट्रिगर केला जातो, ज्याच्या हँडलरमध्ये, प्राप्त ट्रॅक नियुक्त केले जाऊ शकतात आणि तुमच्या आवडत्या इंटरलोक्यूटरकडे पहा. पुढील सिद्धांत आणि तपशील.

दुवे आणि साहित्य:

https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection - दस्तऐवजीकरण RTCPeerConnection

https://github.com/pion/webrtc - जाता जाता WebRTC प्रोटोकॉलची अंमलबजावणी

https://webrtcforthecurious.com/ - pion च्या निर्मात्यांकडून एक पुस्तक

https://hpbn.co/ - बुक हाय परफॉर्मन्स ब्राउझर नेटवर्किंग. वेब ऍप्लिकेशन्सची उच्च कार्यक्षमता सुनिश्चित करण्याच्या मुद्द्यांवर तपशीलवार चर्चा केली आहे. शेवटी, WebRTC चे वर्णन केले आहे. पुस्तक नक्कीच जुने आहे (2013), परंतु त्याची प्रासंगिकता गमावत नाही.

पुढच्या भागात, ब्राउझरमधील दर्शकांना त्यानंतरच्या प्रसारणासाठी ffmpeg द्वारे HLS मध्ये ट्रान्सकोड करून, pion वापरून सर्व्हरवर व्हिडिओ प्रवाहाच्या रिसेप्शन आणि प्रक्रियेचे विश्लेषण करण्यासाठी मला सिद्धांत आणि व्यवहारात थोडा अधिक भाग द्यायचा आहे.

अधीरांसाठी: ट्विचमध्ये pion-आधारित सर्व्हरद्वारे प्रतिक्रिया देण्यासाठी वेबकॅमवरून व्हिडिओ प्रसारित करण्याचा माझा अत्यंत क्रूड प्रोटोटाइप (हा फक्त एक प्रयोग आहे).

स्त्रोत: www.habr.com