(ស្ទើរតែ) ការស្ទ្រីម webcam ដែលគ្មានប្រយោជន៍ពីកម្មវិធីរុករក។ ផ្នែកទី 2. WebRTC

ដូចម្ដេច មួយ ពីអត្ថបទចាស់ និងដែលត្រូវបានបោះបង់ចោលរួចហើយ ខ្ញុំបានសរសេរអំពីរបៀបដែលអ្នកអាចចាក់វីដេអូពីផ្ទាំងក្រណាត់តាមរយៈ websockets បានយ៉ាងងាយស្រួល និងដោយធម្មជាតិ។ នៅក្នុងអត្ថបទនោះ ខ្ញុំបាននិយាយយ៉ាងខ្លីអំពីរបៀបថតវីដេអូពីកាមេរ៉ា និងសំឡេងពីមីក្រូហ្វូនដោយប្រើ MediaStream API, របៀបអ៊ិនកូដស្ទ្រីមដែលបានទទួល និងផ្ញើវាតាមរយៈរន្ធបណ្តាញទៅកាន់ម៉ាស៊ីនមេ។ ទោះយ៉ាងណាក៏ដោយ តាមការពិត ពួកគេមិនធ្វើបែបនេះទេ សម្រាប់ការផ្សាយ ពួកគេប្រើកម្មវិធីពិសេសណាមួយដែលត្រូវដំឡើង និងកំណត់រចនាសម្ព័ន្ធ៖ offhand នេះអាចជា បើកកម្មវិធីផ្សាយ។ឬពួកគេប្រើ WebRTC ដែលដំណើរការភ្លាមៗចេញពីប្រអប់ ពោលគឺវាមិនតម្រូវឱ្យដំឡើងកម្មវិធីជំនួយណាមួយ a la flash player ដែលនឹងត្រូវកាត់ចេញពីកម្មវិធីរុករក Chromium រួចហើយនៅក្នុងខែធ្នូ។

ថ្ងៃនេះយើងនឹងនិយាយអំពី WebRTC ។

Web Real-Time Communication (WebRTC) មិនមែនជាពិធីការតែមួយទេ វាគឺជាបណ្តុំទាំងមូលនៃស្តង់ដារ ពិធីការ និង JavaScript APIs ដែលរួមគ្នាផ្តល់នូវការទំនាក់ទំនងតាមវីដេអូ-អូឌីយ៉ូតាមពេលវេលាជាក់ស្តែងពីគ្នាទៅវិញទៅមក ហើយក៏អាចប្រើដើម្បីផ្ទេរណាមួយផងដែរ។ ទិន្នន័យគោលពីរ។ ជាធម្មតាកម្មវិធីរុករកដើរតួនាទីជាមិត្តភ័ក្តិ ប៉ុន្តែវាក៏អាចជាកម្មវិធីទូរស័ព្ទផងដែរ។ ដើម្បីរៀបចំទំនាក់ទំនង p2p រវាងអតិថិជន ការគាំទ្រកម្មវិធីរុករកតាមអ៊ីនធឺណិតសម្រាប់ប្រភេទផ្សេងៗនៃការអ៊ិនកូដវីដេអូ និងអូឌីយ៉ូគឺត្រូវបានទាមទារ ការគាំទ្រសម្រាប់ពិធីការបណ្តាញផ្សេងៗ ធានានូវអន្តរកម្មនៃផ្នែករឹងជាមួយកម្មវិធីរុករកតាមអ៊ីនធឺណិត (តាមរយៈស្រទាប់ OS)៖ កាមេរ៉ាបណ្ដាញ កាតសំឡេង។ បច្ចេកវិទ្យា hodgepodge ទាំងអស់នេះត្រូវបានលាក់នៅពីក្រោយ JavaScript API abstraction សម្រាប់ភាពងាយស្រួលរបស់អ្នកអភិវឌ្ឍន៍។

វាទាំងអស់ធ្លាក់ចុះដល់ APIs បី:

• MediaStream API - រុះរើលើកមុន ថ្ងៃនេះខ្ញុំនឹងសរសេរបន្ថែមទៀតអំពីគាត់។ បម្រើដើម្បីទទួលស្ទ្រីមវីដេអូ / អូឌីយ៉ូពីផ្នែករឹង

• RTCPeerConnection - ផ្តល់ការទំនាក់ទំនងរវាងអតិថិជនពីរនាក់ (p2p)

• ឆានែល RTCData - បម្រើដើម្បីផ្ទេរទិន្នន័យបំពានរវាងអតិថិជនពីរនាក់

កំពុងរៀបចំស្ទ្រីមអូឌីយ៉ូ និងវីដេអូសម្រាប់ការបញ្ជូន

វាទាំងអស់ចាប់ផ្តើមជាមួយ "ចាប់យក" បណ្តាញកាមេរ៉ា និងមីក្រូហ្វូនស្ទ្រីមមេឌៀ។ ជាការពិតណាស់ ការស្ទ្រីមឆៅមិនស័ក្តិសមសម្រាប់ការរៀបចំសន្និសីទទូរគមនាគមន៍ទេ ស្ទ្រីមនីមួយៗត្រូវដំណើរការ៖ ធ្វើអោយប្រសើរឡើងនូវគុណភាព ធ្វើសមកាលកម្មអូឌីយ៉ូជាមួយវីដេអូ ដាក់សញ្ញាសម្គាល់ការធ្វើសមកាលកម្មនៅក្នុងស្ទ្រីមវីដេអូ និងធានាបាននូវអត្រាប៊ីតដែលត្រូវគ្នាទៅនឹងកម្រិតបញ្ជូនដែលផ្លាស់ប្តូរឥតឈប់ឈររបស់ប៉ុស្តិ៍។ . កម្មវិធីរុករកយកចិត្តទុកដាក់លើអ្វីៗទាំងអស់នេះ អ្នកអភិវឌ្ឍន៍មិនចាំបាច់ព្រួយបារម្ភអំពីការផ្ដល់ការអ៊ិនកូដសម្រាប់ស្ទ្រីមមេឌៀទេ។ នៅខាងក្នុងកម្មវិធីរុករកតាមអ៊ីនធឺណិតទំនើប មានស្រទាប់កម្មវិធីរួចហើយសម្រាប់ការចាប់យក ការកែលម្អគុណភាព (លុបសំឡេង និងសំឡេងចេញពីសំឡេង កែលម្អរូបភាព) ការអ៊ិនកូដវីដេអូ និងសំឡេង។ គ្រោងការណ៍ស្រទាប់ត្រូវបានបង្ហាញនៅក្នុងរូបភព។ 1:

អង្ករ។ 1. ស្រទាប់នៃដំណើរការអូឌីយ៉ូ និងវីដេអូនៅក្នុងកម្មវិធីរុករក

ដំណើរការទាំងអស់កើតឡើងដោយផ្ទាល់នៅក្នុងកម្មវិធីរុករកដោយខ្លួនឯង មិនមានបន្ថែមទេ។ មិនត្រូវការកម្មវិធីជំនួយទេ។ ទោះយ៉ាងណាក៏ដោយ អ្វីៗនៅតែមិនមានភាពរស់រវើកសម្រាប់ឆ្នាំ ២០២០។ មានកម្មវិធីរុករកដែលមិនទាន់គាំទ្រពេញលេញ MediaStream APIអ្នកអាចធ្វើតាមតំណ និងមើលតារាងភាពឆបគ្នានៅខាងក្រោមបំផុត។ ជាពិសេស IE មានការខកចិត្តម្តងទៀត។

អ្នកអាចធ្វើអ្វីដែលគួរឱ្យចាប់អារម្មណ៍ជាមួយនឹងស្ទ្រីមដែលទទួលបាន៖ អ្នកអាចក្លូន ផ្លាស់ប្តូរគុណភាពបង្ហាញវីដេអូ រៀបចំគុណភាពសំឡេង អ្នកអាចយក និង "ភ្ជាប់" ស្ទ្រីមមេឌៀទៅ tag ហើយមើលខ្លួនឯងនៅលើទំព័រ html ។ ឬអ្នកអាចគូរស្ទ្រីមនៅលើផ្ទាំងក្រណាត់ ហើយកំណត់ WebGL ឬ CSS3 ហើយអនុវត្តតម្រងផ្សេងៗទៅវីដេអូ ចាប់យកវីដេអូដែលបានដំណើរការពីផ្ទាំងក្រណាត់ ហើយបន្ទាប់មកផ្ញើវាតាមបណ្តាញទៅម៉ាស៊ីនមេ បម្លែងកូដ និងផ្សព្វផ្សាយដល់អ្នកគ្រប់គ្នា (ជំរាបសួរ bigo live, twitch ហើយ​ផ្សេងទៀត)។ នៅទីនេះខ្ញុំនឹងមិនវិភាគពីរបៀបដែលរឿងនេះត្រូវបានធ្វើនោះទេ ខ្ញុំនឹងផ្តល់ឧទាហរណ៍មួយចំនួនដែលមាននៅលើគេហទំព័រ៖

https://jeeliz.com/ - បុរសកំពុងធ្វើ CV តាមពេលវេលាជាក់ស្តែងក្នុង Javascript ។ ពួកគេមានទាំងមូល ឃ្លាំងអាវុធ បណ្ណាល័យ js ផ្សេងៗសម្រាប់ធ្វើការជាមួយការផ្សាយវីដេអូនៅលើផ្ទាំងក្រណាត់៖ ការរកឃើញមុខ វត្ថុ ការដាក់តម្រង (របាំង ដូចជានៅក្នុង Instagram) ។

Canvas captureStream API - ឯកសារ API សម្រាប់ចាប់យកស្ទ្រីមវីដេអូពីផ្ទាំងក្រណាត់។ គាំទ្ររួចហើយនៅក្នុង Chrome, Opera និង Firefox

RTCPeerConnection

ដូច្នេះ​យើង​បាន​ឈាន​ដល់​ចំណុច ប៉ុន្តែ​តើ​ធ្វើ​ដូចម្តេច​ដើម្បី​ផ្ទេរ​វីដេអូ​ទៅ​អ្នក​ប្រើ​ផ្សេង​ទៀត​? មកដល់ខាងមុខ RTCPeerConnection. សរុបមក ស្ទើរតែជំហាននេះ អ្នកត្រូវបង្កើតវត្ថុ RTCPeerConnection៖

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

យើងបញ្ជាក់ iceServers ជាជម្រើសមួយក្នុងចំណោមជម្រើស - នេះគឺជា server ដែលជួយផ្តល់ការតភ្ជាប់រវាង browsers ពីរនៅពីក្រោយ NAT'om។ នោះគឺបញ្ហាត្រូវបានដោះស្រាយនៅទីនេះ៖ របៀបស្វែងរក ip នៃ interlocutor ប្រសិនបើគាត់នៅពីក្រោយ 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 - Session Description Protocol) ហើយប្រគល់វាទៅ peerConnection តាមរយៈវិធី setLocalDescription ។ អំពី SDP - តើវាជាអ្វី និងអំពីការផ្តល់ជូន និងទម្រង់ចម្លើយ - យើងនឹងនិយាយបន្ថែមទៀត។

បន្ទាប់ពីកំណត់ LocalDescription peerConnection កម្មវិធីរុករក "ប្រមូលផ្តុំ" បេក្ខជនទឹកកក ពោលគឺស្វែងរកវិធីផ្សេងៗដើម្បីទំនាក់ទំនងតាមរយៈ NAT ។ ព្រឹត្តិការណ៍​ផ្លាស់ប្តូរ​រដ្ឋ​បាន​ឆាបឆេះ។ នៅក្នុង onicegatheringstatechange handler យើងអនុញ្ញាតឱ្យភ្ជាប់ទៅបណ្តាញ webrtc-signaling-server stream ដើម្បីផ្លាស់ប្តូរ Session Description រវាងមិត្តភក្ដិ៖

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 គឺជាម៉ាស៊ីនមេដែលត្រូវការដើម្បីផ្លាស់ប្តូរការពណ៌នាសម័យរវាងមិត្តភក្ដិពីរនាក់ វាអាចជា websocket ឬ xhr-server សាមញ្ញបំផុតនៅលើ PL ណាមួយ។ ភារកិច្ចរបស់វាគឺសាមញ្ញ៖ ដើម្បីទទួលយកការពិពណ៌នាវគ្គពីមិត្តភ័ក្តិមួយ ហើយផ្ទេរវាទៅមួយទៀត។

បន្ទាប់ពីការផ្លាស់ប្តូរការពិពណ៌នាវគ្គ ភាគីទាំងសងខាងត្រៀមខ្លួនជាស្រេចដើម្បីចាក់ផ្សាយ និងទទួលការផ្សាយវីដេអូ នៅផ្នែកដែលទទួលការផ្សាយវីដេអូ ព្រឹត្តិការណ៍នៅលើផ្លូវត្រូវបានកេះនៅលើ peerConnection នៅក្នុងឧបករណ៍ដោះស្រាយដែលបទដែលទទួលបានអាចត្រូវបានកំណត់ទៅ ហើយមើលអ្នកប្រាស្រ័យទាក់ទងដែលអ្នកចូលចិត្ត។ ទ្រឹស្តី និងព័ត៌មានលម្អិតបន្ថែម។

តំណភ្ជាប់ និងអក្សរសិល្ប៍៖

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) ប៉ុន្តែមិនបាត់បង់ភាពពាក់ព័ន្ធរបស់វាទេ។

នៅផ្នែកបន្ទាប់ ខ្ញុំចង់ផ្តល់ផ្នែកមួយបន្ថែមទៀតនៃទ្រឹស្តី និងក្នុងការអនុវត្ត ដើម្បីវិភាគការទទួល និងដំណើរការការផ្សាយវីដេអូនៅលើម៉ាស៊ីនមេដោយប្រើ pion បំប្លែងទៅជា HLS តាមរយៈ ffmpeg សម្រាប់ការផ្សាយជាបន្តបន្ទាប់ទៅកាន់អ្នកមើលនៅក្នុងកម្មវិធីរុករក។

សម្រាប់អ្នកមិនចេះអត់ធ្មត់៖ គំរូដើមដ៏ព្រៃផ្សៃរបស់ខ្ញុំនៃការផ្សាយវីដេអូពី webcam ដើម្បីធ្វើប្រតិកម្មតាមរយៈម៉ាស៊ីនមេដែលមានមូលដ្ឋានលើ pion នៅក្នុង twitch (នេះគ្រាន់តែជាការពិសោធន៍)។

ប្រភព: www.habr.com