(تقريبًا) كاميرا ويب غير مجدية تتدفق من المتصفح. الجزء 2. WebRTC

مرة واحدة في إحدى المقالات القديمة والتي تم التخلي عنها بالفعل ، كتبت عن مدى سهولة وبطبيعة الحال يمكنك بث الفيديو من قماش عبر مآخذ الويب. في هذا المقال ، تحدثت بإيجاز عن كيفية التقاط الفيديو من الكاميرا والصوت من ميكروفون باستخدام MediaStream API ، وكيفية ترميز الدفق المستلم وإرساله عبر مآخذ ويب إلى الخادم. ومع ذلك ، في الواقع ، لا يفعلون ذلك ، فبالنسبة لعمليات البث ، يستخدمون إما برنامجًا خاصًا يحتاج إلى التثبيت والتهيئة: يمكن أن يكون Open Broadcast Software ، أو يستخدمون WebRTC ، الذي يعمل مباشرة خارج الصندوق ، أي أنه لا يتطلب تثبيت أي مكونات إضافية مثل مشغل الفلاش ، والذي بالفعل في ديسمبر سيتم قطع من متصفح Chromium.

اليوم سنتحدث عن WebRTC.

الاتصال في الوقت الفعلي عبر الويب (WebRTC) ليس بروتوكولًا واحدًا ، بل هو مجموعة كاملة من المعايير والبروتوكولات وواجهات برمجة تطبيقات JavaScript ، والتي توفر معًا اتصالات صوتية مرئية من نظير إلى نظير في الوقت الفعلي ، ويمكن أيضًا استخدامها لنقل أي بيانات ثنائية ... عادةً ما تعمل المتصفحات كأقران ، ولكن يمكن أن تكون أيضًا تطبيقًا للجوال ، على سبيل المثال. من أجل تنظيم اتصال p2p بين العملاء ، يحتاج المتصفح إلى دعم لأنواع مختلفة من ترميز الفيديو والصوت ، ودعم العديد من بروتوكولات الشبكة ، وضمان تفاعل الأجهزة مع المتصفح (من خلال طبقات نظام التشغيل): كاميرات الويب ، وبطاقات الصوت. يتم إخفاء هذا الخليط من التقنيات خلف تجريد JavaScript API لراحة المطور.

كل ذلك يعود إلى ثلاث واجهات برمجة تطبيقات:

• MediaStream API - قمنا بتحليلها في المرة الأخيرة ، اليوم سأكتب المزيد عنها. يعمل على استقبال تدفقات الفيديو / الصوت من الأجهزة

• RTCPeerConnection - يوفر الاتصال بين عميلين (p2p)

• RTCDataChannel - يعمل على نقل البيانات التعسفية بين عميلين

تحضير تدفقات الصوت والفيديو للإرسال

"" . , : , , , . , -. , ( , ), . . 1:

, . . 2020 . , MediaStream API, . IE .

: , , , "" Media Stream <video> html. canvas , WebGL CSS3, , canvas , ( bigo live, twitch ). , , :

https://jeeliz.com/ - realtime CV Javascript. js- canvas: , , (, ) . , .

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'. : ip , 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 onnegotiationneeded, offer ( SDP - Session Description Protocol) peerConnection setLocalDescription. SDP - offer answer - .

LocalDescription peerConnection, "" ice-, NAT. onicegatheringstatechange. onicegatheringstatechange webrtc-signaling- 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- - , session description , websocket xhr- . : session description .

Session descriptions , , ontrack peerConnection, , <video> . .

:

https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection - RTCPeerConnection

https://github.com/pion/webrtc - WebRTC go

https://webrtcforthecurious.com/ - pion

https://hpbn.co/ - High Perfomance Browser Networking. web-. WebRTC. (2013), .

pion, HLS ffmpeg .

: react pion twitch ( ).