(ເກືອບ) webcam ທີ່ບໍ່ມີປະໂຫຍດຈາກຕົວທ່ອງເວັບ. ສ່ວນທີ 2. WebRTC

somehow ໃນ одной ຈາກບົດຄວາມເກົ່າແລະຖືກປະຖິ້ມໄວ້ແລ້ວ, ຂ້າພະເຈົ້າໄດ້ຂຽນກ່ຽວກັບວິທີທີ່ທ່ານສາມາດອອກອາກາດວິດີໂອຈາກຜ້າໃບຜ່ານ websockets ໄດ້ງ່າຍແລະເປັນທໍາມະຊາດ. ໃນບົດຂຽນນັ້ນ, ຂ້າພະເຈົ້າໄດ້ເວົ້າສັ້ນໆກ່ຽວກັບວິທີການບັນທຶກວິດີໂອຈາກກ້ອງຖ່າຍຮູບແລະສຽງຈາກໄມໂຄໂຟນໂດຍໃຊ້ MediaStream API, ວິທີການເຂົ້າລະຫັດນ້ໍາທີ່ໄດ້ຮັບແລະສົ່ງຜ່ານ websockets ກັບເຄື່ອງແມ່ຂ່າຍ. ຢ່າງໃດກໍຕາມ, ໃນຄວາມເປັນຈິງ, ພວກເຂົາບໍ່ໄດ້ເຮັດແນວນີ້, ສໍາລັບການອອກອາກາດພວກເຂົາໃຊ້ຊອບແວພິເສດທີ່ຕ້ອງໄດ້ຮັບການຕິດຕັ້ງແລະຕັ້ງຄ່າ: offhand, ນີ້ສາມາດເປັນ. ເປີດໂປແກຼມອອກອາກາດ, ຫຼືພວກເຂົາໃຊ້ WebRTC, ເຊິ່ງເຮັດວຽກອອກຈາກກ່ອງ, ນັ້ນແມ່ນ, ມັນບໍ່ຈໍາເປັນຕ້ອງມີການຕິດຕັ້ງ plugins a la flash player, ເຊິ່ງຈະຖືກຕັດອອກຈາກຕົວທ່ອງເວັບ Chromium ແລ້ວໃນເດືອນທັນວາ.

ມື້ນີ້ພວກເຮົາຈະສົນທະນາກ່ຽວກັບ WebRTC.

ການສື່ສານເວລາຈິງຂອງເວັບ (WebRTC) ບໍ່ແມ່ນໂປຣໂຕຄໍດຽວ, ມັນເປັນການລວບລວມມາດຕະຖານ, ໂປຣໂຕຄໍ ແລະ JavaScript APIs ທັງໝົດທີ່ຮ່ວມກັນສະໜອງການສື່ສານວິດີໂອ-ສຽງແບບສົດໆແບບ peer-to-peer, ແລະຍັງສາມາດໃຊ້ເພື່ອໂອນຂໍ້ມູນຕ່າງໆ. ຂໍ້​ມູນ​ຖານ​ສອງ​. ປົກກະຕິແລ້ວຕົວທ່ອງເວັບເຮັດຫນ້າທີ່ເປັນເພື່ອນມິດ, ແຕ່ມັນຍັງສາມາດເປັນຄໍາຮ້ອງສະຫມັກມືຖື, ສໍາລັບການຍົກຕົວຢ່າງ. ເພື່ອຈັດຕັ້ງການສື່ສານ p2p ລະຫວ່າງລູກຄ້າ, ການສະຫນັບສະຫນູນຕົວທ່ອງເວັບສໍາລັບປະເພດຕ່າງໆຂອງວິດີໂອແລະການເຂົ້າລະຫັດສຽງແມ່ນຈໍາເປັນ, ສະຫນັບສະຫນູນຄວາມຫລາກຫລາຍຂອງໂປໂຕຄອນເຄືອຂ່າຍ, ຮັບປະກັນການໂຕ້ຕອບຂອງຮາດແວກັບຕົວທ່ອງເວັບ (ຜ່ານຊັ້ນ OS): webcams, sound cards. ເທກໂນໂລຍີ hodgepodge ທັງຫມົດນີ້ຖືກເຊື່ອງໄວ້ທາງຫລັງຂອງ JavaScript API abstraction ເພື່ອຄວາມສະດວກຂອງຜູ້ພັດທະນາ.

ມັນທັງຫມົດຕົ້ມລົງເຖິງສາມ APIs:

• MediaStream API — ໄດ້ dismantled ຄັ້ງ ສຸດ ທ້າຍ, ມື້ ນີ້ ຂ້າ ພະ ເຈົ້າ ຈະ ຂຽນ ເພີ່ມ ເຕີມ ກ່ຽວ ກັບ ພຣະ ອົງ. ໃຫ້ບໍລິການເພື່ອຮັບສາຍວິດີໂອ / ສຽງຈາກຮາດແວ

• RTCPeerConnection - ໃຫ້​ການ​ສື່​ສານ​ລະ​ຫວ່າງ​ລູກ​ຄ້າ​ສອງ​ຄົນ (p2p​)

• ຊ່ອງ RTCData - ຮັບ​ຜິດ​ຊອບ​ໃນ​ການ​ໂອນ​ຂໍ້​ມູນ​ທີ່​ຕົນ​ເອງ​ລະ​ຫວ່າງ​ສອງ​ລູກ​ຄ້າ​

ກໍາລັງກະກຽມການຖ່າຍທອດສຽງ ແລະວິດີໂອສໍາລັບການຖ່າຍທອດ

ມັນທັງຫມົດເລີ່ມຕົ້ນດ້ວຍ "ການຈັບພາບ" webcam ແລະ microphone streams ສື່ມວນຊົນ. ແນ່ນອນ, ສາຍນ້ໍາດິບບໍ່ເຫມາະສົມສໍາລັບການຈັດກອງປະຊຸມໂທລະຄົມ, ແຕ່ລະສາຍນ້ໍາຕ້ອງໄດ້ຮັບການປຸງແຕ່ງ: ປັບປຸງຄຸນນະພາບ, synchronize ສຽງກັບວິດີໂອ, ວາງເຄື່ອງຫມາຍ synchronization ໃນນ້ໍາວິດີໂອ, ແລະຮັບປະກັນ bitrate ທີ່ສອດຄ້ອງກັບແບນວິດທີ່ມີການປ່ຽນແປງຢ່າງຕໍ່ເນື່ອງຂອງຊ່ອງ. . ຕົວທ່ອງເວັບດູແລສິ່ງທັງຫມົດນີ້, ນັກພັດທະນາບໍ່ຈໍາເປັນຕ້ອງກັງວົນກ່ຽວກັບການສະຫນອງການເຂົ້າລະຫັດສໍາລັບການຖ່າຍທອດສື່. ພາຍໃນຕົວທ່ອງເວັບທີ່ທັນສະໄຫມ, ມີຊັ້ນຊອບແວສໍາລັບການຈັບພາບ, ປັບປຸງຄຸນນະພາບ (ເອົາສຽງສະທ້ອນແລະສຽງອອກຈາກສຽງ, ປັບປຸງຮູບພາບ), ການເຂົ້າລະຫັດວິດີໂອແລະສຽງ. ໂຄງຮ່າງການຂອງຊັ້ນແມ່ນສະແດງຢູ່ໃນຮູບ. 1:

ເຂົ້າ. 1. ຊັ້ນຂອງການປະມວນຜົນສຽງແລະວິດີໂອໃນຕົວທ່ອງເວັບ

ການປຸງແຕ່ງທັງຫມົດເກີດຂຶ້ນໂດຍກົງໃນຕົວທ່ອງເວັບຂອງມັນເອງ, ບໍ່ມີການເພີ່ມເຕີມ. ບໍ່ຈໍາເປັນຕ້ອງມີ plugins. ຢ່າງໃດກໍຕາມ, ສິ່ງຕ່າງໆຍັງບໍ່ເປັນທີ່ສົດໃສສໍາລັບປີ 2020. ມີຕົວທ່ອງເວັບທີ່ຍັງບໍ່ທັນສະຫນັບສະຫນູນຢ່າງເຕັມສ່ວນ MediaStream API, ທ່ານສາມາດປະຕິບັດຕາມການເຊື່ອມຕໍ່ແລະເບິ່ງຕາຕະລາງຄວາມເຂົ້າກັນໄດ້ຢູ່ລຸ່ມສຸດ. IE ໂດຍສະເພາະອີກເທື່ອຫນຶ່ງແມ່ນຄວາມຜິດຫວັງ.

ທ່ານ​ສາ​ມາດ​ເຮັດ​ສິ່ງ​ທີ່​ຫນ້າ​ສົນ​ໃຈ​ຫຼາຍ​ກັບ​ການ​ສະ​ຕ​ຣີມ​ທີ່​ໄດ້​ຮັບ​: ທ່ານ​ສາ​ມາດ clone​, ການ​ປ່ຽນ​ແປງ​ຄວາມ​ລະ​ອຽດ​ວິ​ດີ​ໂອ​, ການ​ຈັດ​ການ​ຄຸນ​ນະ​ພາບ​ສຽງ​, ທ່ານ​ສາ​ມາດ​ເອົາ​ແລະ "ຕິດ​" stream Media Stream ກັບ tag ແລະເບິ່ງຕົວທ່ານເອງຢູ່ໃນຫນ້າ html. ຫຼືທ່ານສາມາດແຕ້ມ stream ເທິງ canvas, ແລະຕັ້ງ WebGL ຫຼື CSS3, ແລະນໍາໃຊ້ຕົວກອງຕ່າງໆໃສ່ວິດີໂອ, ບັນທຶກວິດີໂອທີ່ປຸງແຕ່ງຈາກ canvas ແລະຫຼັງຈາກນັ້ນສົ່ງຜ່ານເຄືອຂ່າຍໄປຫາເຄື່ອງແມ່ຂ່າຍ, transcode ແລະເຜີຍແຜ່ໃຫ້ທຸກຄົນ (ສະບາຍດີ bigo live, twitch ແລະ​ອື່ນໆ). ໃນທີ່ນີ້ຂ້າພະເຈົ້າຈະບໍ່ໄດ້ວິເຄາະວິທີການດັ່ງກ່າວເຮັດ, ຂ້າພະເຈົ້າຈະໃຫ້ສອງສາມຕົວຢ່າງທີ່ພົບເຫັນຢູ່ໃນເວັບ:

https://jeeliz.com/ - ຜູ້ຊາຍກໍາລັງເຮັດ CV ໃນເວລາຈິງໃນ Javascript. ພວກເຂົາເຈົ້າມີທັງຫມົດ ຄັງອາວຸດ ຫ້ອງສະຫມຸດ js ຕ່າງໆສໍາລັບການເຮັດວຽກກັບການຖ່າຍທອດວິດີໂອໃນຜ້າໃບ: ການກວດສອບໃບຫນ້າ, ວັດຖຸ, ນໍາໃຊ້ການກັ່ນຕອງ (ຫນ້າກາກ, ເຊັ່ນໃນ Instagram), ແລະອື່ນໆ. ຕົວຢ່າງທີ່ດີເລີດຂອງວິທີທີ່ທ່ານສາມາດປະມວນຜົນວິດີໂອໃນເວລາທີ່ແທ້ຈິງໄດ້ໂດຍກົງໃນຕົວທ່ອງເວັບໂດຍບໍ່ມີການ plugins ເພີ່ມເຕີມ.

Canvas captureStream API - ເອ​ກະ​ສານ API ສໍາ​ລັບ​ການ​ຈັບ​ສະ​ຕ​ຣີມ​ວິ​ດີ​ໂອ​ຈາກ canvas​. ຮອງຮັບໃນ Chrome, Opera ແລະ Firefox ແລ້ວ

RTCPeerConnection

ດັ່ງນັ້ນພວກເຮົາມາຮອດຈຸດ, ແຕ່ຕົວຈິງແລ້ວວິທີການໂອນວິດີໂອໃຫ້ກັບຜູ້ໃຊ້ອື່ນໄດ້ແນວໃດ? ມາກ່ອນ RTCPeerConnection. ໃນສັ້ນ, ໃນເກືອບຂັ້ນຕອນນີ້, ທ່ານຈໍາເປັນຕ້ອງສ້າງວັດຖຸ RTCPeerConnection:

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

ພວກເຮົາລະບຸ iceServers ເປັນຫນຶ່ງໃນທາງເລືອກ - ນີ້ແມ່ນເຄື່ອງແມ່ຂ່າຍທີ່ຊ່ວຍສະຫນອງການເຊື່ອມຕໍ່ລະຫວ່າງສອງຕົວທ່ອງເວັບທີ່ຢູ່ເບື້ອງຫຼັງ NAT'om. ນັ້ນແມ່ນ, ບັນຫາໄດ້ຖືກແກ້ໄຂຢູ່ທີ່ນີ້: ວິທີການຊອກຫາ ip ຂອງ interlocutor ຖ້າລາວຢູ່ເບື້ອງຫຼັງ NAT ຂອງຜູ້ໃຫ້ບໍລິການຂອງລາວ? ອະນຸສັນຍາ ICE ມາຊ່ວຍ, ໃນຄວາມເປັນຈິງ, ICE ບໍ່ໄດ້ນໍາໃຊ້ກັບ WebRTC ທັງຫມົດ, ແຕ່ມີຫຼາຍກວ່ານັ້ນຕໍ່ມາ.

ກ່ອນຫນ້ານີ້, ພວກເຮົາໄດ້ຮັບ Usermedia streams:

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 ໄຟໄຫມ້. ໃນ 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 ໃດ. ວຽກ​ງານ​ຂອງ​ມັນ​ແມ່ນ​ງ່າຍ​ດາຍ​: ເພື່ອ​ຮັບ​ເອົາ​ຄໍາ​ອະ​ທິ​ບາຍ​ຂອງ​ກອງ​ປະ​ຊຸມ​ຈາກ​ເພື່ອນ​ຮ່ວມ​ງານ​ຫນຶ່ງ​ແລະ​ໂອນ​ມັນ​ກັບ​ຄົນ​ອື່ນ​.

ຫຼັງຈາກການແລກປ່ຽນຄໍາອະທິບາຍ Session, ທັງສອງຝ່າຍພ້ອມທີ່ຈະອອກອາກາດແລະຮັບສາຍວິດີໂອ, ໃນດ້ານທີ່ຮັບສາຍວິດີໂອ, ເຫດການ ontrack ໄດ້ຖືກກະຕຸ້ນຢູ່ໃນ peerConnection, ໃນ handler ຂອງທີ່, ຕິດຕາມທີ່ໄດ້ຮັບສາມາດໄດ້ຮັບການມອບຫມາຍໃຫ້. ແລະເບິ່ງ interlocutor ທີ່ທ່ານມັກ. ທິດສະດີ ແລະລາຍລະອຽດເພີ່ມເຕີມ.

ການເຊື່ອມຕໍ່ແລະວັນນະຄະດີ:

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, transcoding ກັບ HLS ຜ່ານ ffmpeg ສໍາລັບການອອກອາກາດຕໍ່ໄປໃນຕົວທ່ອງເວັບ.

ສຳລັບຄົນອົດທົນ: ຕົ້ນແບບທີ່ໂຫດຮ້າຍຫຼາຍຂອງຂ້ອຍໃນການອອກອາກາດວິດີໂອຈາກເວັບແຄມເພື່ອປະຕິກິລິຍາຜ່ານເຊີບເວີທີ່ອີງໃສ່ pion ໃນ twitch (ນີ້​ເປັນ​ພຽງ​ແຕ່​ການ​ທົດ​ລອງ​)​.

ແຫຼ່ງຂໍ້ມູນ: www.habr.com