🥇 (கிட்டத்தட்ட) பயனற்ற வெப்கேம் உலாவியில் இருந்து ஸ்ட்ரீமிங். பகுதி 2. WebRTC

எப்படியோ உள்ளே ஒரு பழைய மற்றும் ஏற்கனவே கைவிடப்பட்ட கட்டுரைகளிலிருந்து, வெப்சாக்கெட்கள் வழியாக கேன்வாஸிலிருந்து வீடியோவை எவ்வளவு எளிதாகவும் இயல்பாகவும் ஒளிபரப்பலாம் என்பதைப் பற்றி நான் எழுதினேன். அந்தக் கட்டுரையில், கேமராவிலிருந்து வீடியோவையும், மைக்ரோஃபோனில் இருந்து ஒலியையும் எப்படிப் படம்பிடிப்பது என்பது பற்றி சுருக்கமாகப் பேசினேன் மீடியாஸ்ட்ரீம் ஏபிஐ, பெறப்பட்ட ஸ்ட்ரீமை எவ்வாறு குறியாக்கம் செய்வது மற்றும் வெப்சாக்கெட்டுகள் வழியாக சேவையகத்திற்கு அனுப்புவது. இருப்பினும், உண்மையில் அவர்கள் இதைச் செய்ய மாட்டார்கள், ஒளிபரப்புகளுக்கு அவர்கள் நிறுவப்பட்டு கட்டமைக்கப்பட வேண்டிய சிறப்பு மென்பொருளைப் பயன்படுத்துகிறார்கள்: ஆஃப்ஹான்ட், இது இருக்கலாம் ஒளிபரப்பு மென்பொருளைத் திறக்கவும், அல்லது அவர்கள் WebRTC ஐப் பயன்படுத்துகின்றனர், இது பெட்டிக்கு வெளியே வேலை செய்கிறது, அதாவது, டிசம்பரில் ஏற்கனவே Chromium உலாவியில் இருந்து துண்டிக்கப்படும் லா ஃபிளாஷ் பிளேயரில் எந்த செருகுநிரல்களையும் நிறுவ வேண்டிய அவசியமில்லை.

இன்று நாம் WebRTC பற்றி பேசுவோம்.

Web Real-Time Communication (WebRTC) என்பது ஒரு நெறிமுறை அல்ல, இது தரநிலைகள், நெறிமுறைகள் மற்றும் ஜாவாஸ்கிரிப்ட் ஏபிஐகளின் முழுத் தொகுப்பாகும், இவை அனைத்தும் இணைந்து பியர்-டு-பியர் நிகழ்நேர வீடியோ-ஆடியோ தொடர்பை வழங்குகின்றன, மேலும் எதையும் மாற்றவும் பயன்படுத்தலாம். பைனரி தரவு. பொதுவாக உலாவிகள் சகாக்களாக செயல்படுகின்றன, ஆனால் இது மொபைல் பயன்பாடாகவும் இருக்கலாம். வாடிக்கையாளர்களுக்கு இடையே p2p தகவல்தொடர்புகளை ஒழுங்கமைக்க, பல்வேறு வகையான வீடியோ மற்றும் ஆடியோ குறியாக்கத்திற்கான உலாவி ஆதரவு தேவை, பல்வேறு பிணைய நெறிமுறைகளுக்கான ஆதரவு, உலாவியுடன் வன்பொருளின் தொடர்புகளை உறுதிசெய்தல் (OS அடுக்குகள் மூலம்): வெப்கேம்கள், ஒலி அட்டைகள். டெவலப்பரின் வசதிக்காக ஜாவாஸ்கிரிப்ட் ஏபிஐ சுருக்கத்திற்குப் பின்னால் இந்த ஹாட்ஜ்போட்ஜ் தொழில்நுட்பங்கள் அனைத்தும் மறைக்கப்பட்டுள்ளன.

இவை அனைத்தும் மூன்று API களாகக் குறைக்கப்படுகின்றன:

மீடியாஸ்ட்ரீம் ஏபிஐ - கடந்த முறை அகற்றப்பட்டது, இன்று நான் அவரைப் பற்றி இன்னும் கொஞ்சம் எழுதுகிறேன். வன்பொருளிலிருந்து வீடியோ / ஆடியோ ஸ்ட்ரீம்களைப் பெற உதவுகிறது
RTCPeerConnection - இரண்டு வாடிக்கையாளர்களுக்கு இடையே தொடர்பு வழங்குகிறது (p2p)
RTCDataChannel - இரண்டு வாடிக்கையாளர்களுக்கு இடையில் தன்னிச்சையான தரவை மாற்ற உதவுகிறது

ஒலிபரப்புவதற்கு ஆடியோ மற்றும் வீடியோ ஸ்ட்ரீம்களை தயார் செய்தல்

இது அனைத்தும் வெப்கேம் மற்றும் மைக்ரோஃபோன் மீடியா ஸ்ட்ரீம்களை "பிடிப்பதில்" தொடங்குகிறது. நிச்சயமாக, மூல ஸ்ட்ரீம்கள் டெலிகான்ஃபரன்ஸ் ஏற்பாடு செய்ய ஏற்றது அல்ல, ஒவ்வொரு ஸ்ட்ரீமையும் செயலாக்க வேண்டும்: தரத்தை மேம்படுத்தவும், வீடியோவுடன் ஆடியோவை ஒத்திசைக்கவும், வீடியோ ஸ்ட்ரீமில் ஒத்திசைவு மதிப்பெண்களை வைக்கவும், மேலும் சேனலின் தொடர்ந்து மாறிவரும் அலைவரிசையுடன் தொடர்புடைய பிட்ரேட்டை உறுதிப்படுத்தவும். . உலாவி இதையெல்லாம் கவனித்துக்கொள்கிறது, மீடியா ஸ்ட்ரீம்களுக்கு குறியாக்கத்தை வழங்குவது பற்றி டெவலப்பர் கவலைப்பட வேண்டியதில்லை. நவீன உலாவியின் உள்ளே, படமெடுப்பதற்கும், தரத்தை மேம்படுத்துவதற்கும் (ஒலியிலிருந்து எதிரொலி மற்றும் இரைச்சலை அகற்றவும், படத்தை மேம்படுத்தவும்), வீடியோ மற்றும் ஆடியோ குறியாக்கத்திற்கான மென்பொருள் அடுக்குகள் ஏற்கனவே உள்ளன. அடுக்கு திட்டம் படம் காட்டப்பட்டுள்ளது. 1:

அரிசி. 1. உலாவியில் ஆடியோ மற்றும் வீடியோ செயலாக்க அடுக்குகள்

அனைத்து செயலாக்கமும் நேரடியாக உலாவியில் நடைபெறுகிறது, கூடுதல் எதுவும் இல்லை. செருகுநிரல்கள் தேவையில்லை. இருப்பினும், 2020 க்கு விஷயங்கள் இன்னும் சிறப்பாக இல்லை. இன்னும் முழுமையாக ஆதரிக்காத உலாவிகள் உள்ளன மீடியாஸ்ட்ரீம் ஏபிஐ, நீங்கள் இணைப்பைப் பின்தொடரலாம் மற்றும் மிகவும் கீழே பொருந்தக்கூடிய அட்டவணையைப் பார்க்கலாம். குறிப்பாக IE மீண்டும் ஏமாற்றமளிக்கிறது.

பெறப்பட்ட ஸ்ட்ரீம்கள் மூலம் நீங்கள் மிகவும் சுவாரஸ்யமான விஷயங்களைச் செய்யலாம்: நீங்கள் குளோன் செய்யலாம், வீடியோ தெளிவுத்திறனை மாற்றலாம், ஆடியோ தரத்தைக் கையாளலாம், மீடியா ஸ்ட்ரீம் ஸ்ட்ரீமை எடுத்து "ஹூக்" செய்யலாம் tag செய்து html பக்கத்தில் உங்களைப் பாருங்கள். அல்லது கேன்வாஸில் ஒரு ஸ்ட்ரீமை வரைந்து, WebGL அல்லது CSS3 ஐ அமைக்கலாம் மற்றும் வீடியோவில் பல்வேறு வடிப்பான்களைப் பயன்படுத்தலாம், செயலாக்கப்பட்ட வீடியோவை கேன்வாஸிலிருந்து படம்பிடித்து நெட்வொர்க் வழியாக சர்வருக்கு அனுப்பலாம், டிரான்ஸ்கோட் செய்து அனைவருக்கும் வெளியிடலாம் (ஹலோ பிகோ லைவ், ட்விச் மற்றும் பலர்). இதுபோன்ற விஷயங்கள் எவ்வாறு செய்யப்படுகின்றன என்பதை இங்கே நான் பகுப்பாய்வு செய்ய மாட்டேன், இணையத்தில் காணப்படும் சில எடுத்துக்காட்டுகளை தருகிறேன்:

https://jeeliz.com/ - தோழர்களே ஜாவாஸ்கிரிப்டில் நிகழ்நேர CV செய்கிறார்கள். அவர்களிடம் முழுமை உள்ளது ஆயுதக் கிடங்கு கேன்வாஸில் வீடியோ ஸ்ட்ரீமுடன் பணிபுரிவதற்கான பல்வேறு js நூலகங்கள்: முகங்கள், பொருள்களைக் கண்டறிதல், வடிப்பான்களைப் பயன்படுத்துதல் (இன்ஸ்டாகிராம் போன்ற முகமூடிகள்) போன்றவை. கூடுதல் செருகுநிரல்கள் இல்லாமல் உலாவியில் நேரடியாக நிகழ்நேர வீடியோவை எவ்வாறு செயலாக்கலாம் என்பதற்கான சிறந்த எடுத்துக்காட்டு.

கேன்வாஸ் கேப்சர் ஸ்ட்ரீம் ஏபிஐ - கேன்வாஸிலிருந்து வீடியோ ஸ்ட்ரீம் எடுப்பதற்கான 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 க்கு பொருந்தாது, ஆனால் அது பின்னர் மேலும்.

முன்னதாக, பயனர்மீடியா ஸ்ட்ரீம்களைப் பெற்றோம்:

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 - அமர்வு விளக்க நெறிமுறையின் அடிப்படையில்) மற்றும் அதை setLocalDescription முறை மூலம் 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/ - பியோனை உருவாக்கியவர்களிடமிருந்து ஒரு புத்தகம்

https://hpbn.co/ - புத்தக உயர் செயல்திறன் உலாவி நெட்வொர்க்கிங். இணைய பயன்பாடுகளின் உயர் செயல்திறனை உறுதி செய்வதில் உள்ள சிக்கல்கள் விரிவாக விவாதிக்கப்படுகின்றன. முடிவில், WebRTC விவரிக்கப்பட்டுள்ளது. புத்தகம் நிச்சயமாக பழையது (2013), ஆனால் அதன் பொருத்தத்தை இழக்கவில்லை.

அடுத்த பகுதியில், பியோனைப் பயன்படுத்தி சர்வரில் வீடியோ ஸ்ட்ரீமின் வரவேற்பு மற்றும் செயலாக்கத்தை பகுப்பாய்வு செய்ய கோட்பாட்டின் இன்னும் கொஞ்சம் பகுதியை வழங்க விரும்புகிறேன், உலாவியில் பார்வையாளர்களுக்கு அடுத்த ஒளிபரப்பிற்காக ffmpeg வழியாக HLS க்கு டிரான்ஸ்கோடிங்.

பொறுமையற்றவர்களுக்கு: பியோன் அடிப்படையிலான சர்வர் மூலம் ட்விச்சில் வினைபுரிய வெப்கேமிலிருந்து வீடியோவை ஒளிபரப்புவதற்கான எனது மிகவும் கச்சா முன்மாதிரி (இது ஒரு பரிசோதனை மட்டுமே).

ஆதாரம்: www.habr.com

(கிட்டத்தட்ட) பயனற்ற வெப்கேம் உலாவியில் இருந்து ஸ்ட்ரீமிங். பகுதி 2. WebRTC

ஒலிபரப்புவதற்கு ஆடியோ மற்றும் வீடியோ ஸ்ட்ரீம்களை தயார் செய்தல்

RTCPeerConnection

கருத்தைச் சேர் Отменить ответ