🥇 (تقريبا) بيڪار ويب ڪيم برائوزر کان اسٽريمنگ. حصو 2. WebRTC

ڪنهن به طرح ۾ هڪ پراڻن ۽ اڳ ۾ ئي ڇڏيل مضمونن مان، مون لکيو آهي ته ڪيئن آساني سان ۽ قدرتي طور تي توهان ڪينواس تان وڊيو نشر ڪري سگهو ٿا ويب ساکٽ ذريعي. انهي آرٽيڪل ۾، مون مختصر طور تي ڳالهايو ته ڪيئن ڪئميرا مان وڊيو کي پڪڙڻ ۽ مائڪروفون استعمال ڪندي آواز MediaStream API, ڪيئن حاصل ٿيل وهڪرو انڪوڊ ڪرڻ ۽ ان کي ويب ساکٽ ذريعي سرور ڏانهن موڪليو. بهرحال، حقيقت ۾ اهي ائين نه ڪندا آهن، براڊ ڪاسٽن لاءِ اهي يا ته خاص سافٽ ويئر استعمال ڪندا آهن جن کي انسٽال ڪرڻ ۽ ترتيب ڏيڻ جي ضرورت هوندي آهي: offhand، هي ٿي سگهي ٿو. اوپن براڊيڪيشن سافٽ ويئر، يا اهي WebRTC استعمال ڪن ٿا، جيڪو دٻي کان ٻاهر ڪم ڪري ٿو، اهو آهي، ان کي ڪنهن به پلگ ان جي انسٽال ڪرڻ جي ضرورت ناهي لا فليش پليئر، جيڪو ڊسمبر ۾ اڳ ۾ ئي Chromium برائوزر مان ڪٽيو ويندو.

اڄ اسان بابت ڳالهائينداسين WebRTC.

ويب ريئل ٽائم ڪميونيڪيشن (WebRTC) هڪ واحد پروٽوڪول نه آهي، اهو معيار، پروٽوڪول ۽ JavaScript APIs جو هڪ مڪمل مجموعو آهي، جيڪي گڏجي پيئر-ٽو-پيئر حقيقي وقت وڊيو-آڊيو ڪميونيڪيشن مهيا ڪن ٿا، ۽ ڪنهن به منتقلي لاءِ پڻ استعمال ٿي سگهن ٿا. بائنري ڊيٽا. عام طور تي برائوزر پيرن وانگر ڪم ڪن ٿا، پر اهو پڻ موبائل ايپليڪيشن ٿي سگهي ٿو، مثال طور. گراهڪن جي وچ ۾ p2p ڪميونيڪيشن کي منظم ڪرڻ لاءِ، مختلف قسم جي وڊيوز ۽ آڊيو انڪوڊنگ لاءِ برائوزر سپورٽ جي ضرورت آهي، مختلف نيٽ ورڪ پروٽوڪولن لاءِ سپورٽ، برائوزر سان هارڊويئر جي رابطي کي يقيني بڻائڻ (او ايس پرت ذريعي): ويب ڪيم، سائونڊ ڪارڊ. ٽيڪنالاجي جو هي سڀ هج پوج ڊولپر جي سهولت لاءِ JavaScript API خلاصن جي پويان لڪيل آهي.

اهو سڀ ڪجهه ٽن APIs ڏانهن ڇڪي ٿو:

MediaStream API - آخري ڀيرو ختم ڪيو ويو، اڄ آئون هن بابت ٿورو وڌيڪ لکندس. هارڊويئر مان وڊيو / آڊيو اسٽريمز حاصل ڪرڻ لاءِ ڪم ڪري ٿو
RTCPeerConnection - ٻن گراهڪن جي وچ ۾ رابطي مهيا ڪري ٿو (p2p)
RTCDataChannel - ٻن گراهڪن جي وچ ۾ خودمختياري ڊيٽا کي منتقل ڪرڻ جي خدمت ڪندو آهي

ٽرانسميشن لاءِ آڊيو ۽ وڊيو اسٽريمز تيار ڪرڻ

اهو سڀ شروع ٿئي ٿو "ڪپچر ڪرڻ" سان ويب ڪيم ۽ مائڪروفون ميڊيا اسٽريمز. يقينا، خام وهڪرو هڪ ٽيلي ڪانفرنس کي منظم ڪرڻ لاء مناسب ناهي، هر اسٽريم کي پروسيس ڪرڻ جي ضرورت آهي: معيار کي بهتر ڪريو، وڊيو سان آڊيو کي هم وقت سازي ڪريو، وڊيو اسٽريم ۾ هم وقت سازي جا نشان رکو، ۽ چينل جي مسلسل تبديل ٿيندڙ بينڊوڊٿ سان لاڳاپيل بٽريٽ کي يقيني بڻائين. . برائوزر اهو سڀ ڪجهه سنڀاليندو آهي، ڊولپر کي ميڊيا اسٽريمز لاءِ انڪوڊنگ مهيا ڪرڻ جي باري ۾ پريشان ٿيڻ جي به ضرورت ناهي. جديد برائوزر جي اندر، اتي اڳ ۾ ئي سافٽ ويئر پرت کي پڪڙڻ، معيار کي بهتر ڪرڻ (آواز مان گونج ۽ شور کي هٽائڻ، تصوير کي بهتر ڪرڻ)، وڊيو ۽ آڊيو انڪوڊنگ لاء موجود آهن. پرت اسڪيم تصوير ۾ ڏيکاريل آهي. 1:

چانور. 1. برائوزر ۾ آڊيو ۽ وڊيو پروسيسنگ جا پرت

سڀ پروسيسنگ سڌو سنئون برائوزر ۾ ٿيندي آهي، ڪو به اضافي نه. پلگ ان جي ضرورت ناهي. بهرحال، شيون اڃا تائين 2020 لاء ايترو گلابي نه آهن. اهڙا برائوزر آهن جيڪي اڃا تائين مڪمل طور تي سپورٽ نٿا ڪن MediaStream API، توهان لنڪ جي پيروي ڪري سگهو ٿا ۽ تمام تري ۾ مطابقت واري ٽيبل کي ڏسي سگهو ٿا. IE خاص طور تي ٻيهر مايوس ڪندڙ آهي.

توهان حاصل ڪيل اسٽريم سان تمام دلچسپ شيون ڪري سگهو ٿا: توهان ڪلون ڪري سگهو ٿا، وڊيو ريزوليوشن تبديل ڪري سگهو ٿا، آڊيو معيار کي تبديل ڪري سگهو ٿا، توهان وٺي سگهو ٿا ۽ "هڪ" ڪري سگهو ٿا ميڊيا اسٽريم اسٽريم کي. ٽيگ ڪريو ۽ پاڻ کي ڏسو html صفحي تي. يا توهان ڪينواس تي هڪ وهڪرو ٺاهي سگهو ٿا، ۽ WebGL يا CSS3 سيٽ ڪري سگهو ٿا، ۽ وڊيو تي مختلف فلٽر لاڳو ڪري سگهو ٿا، پروسيس ٿيل وڊيو کي ڪئنوس مان پڪڙي سگهو ٿا ۽ پوءِ ان کي نيٽ ورڪ ذريعي سرور ڏانهن موڪليو، ٽرانسڪوڊ ۽ سڀني کي شايع ڪريو (هيلو بگو لائيو، ٽويچ ۽ ٻيا). هتي مان اهو تجزيو نه ڪندس ته اهڙيون شيون ڪيئن ڪيون وينديون آهن، آئون ويب تي مليا ڪجهه مثال ڏيندس:

https://jeeliz.com/ - ماڻهو جاوا اسڪرپٽ ۾ حقيقي وقت سي وي ڪري رهيا آهن. انهن وٽ هڪ سڄو آهي هٿيار ڪينواس تي وڊيو اسٽريم سان ڪم ڪرڻ لاءِ مختلف js لائبريريون: چهرن کي ڳولڻ، شيون، فلٽر لڳائڻ (ماسڪ، جهڙوڪ انسٽاگرام ۾) وغيره. هڪ بهترين مثال توهان ڪيئن ڪري سگهو ٿا حقيقي وقت جي وڊيو کي برائوزر ۾ بغير اضافي پلگ ان جي.

Canvas captureStream API - ڪينواس مان وڊيو اسٽريم کي پڪڙڻ لاءِ API دستاويز. اڳ ۾ ئي Chrome، Opera ۽ Firefox ۾ سپورٽ ڪئي وئي آهي

RTCPeerConnection

تنهنڪري اسان نقطي تي آياسين، پر اصل ۾ وڊيو کي ٻئي صارف ڏانهن منتقل ڪيئن ڪجي؟ سامهون اچي ٿو RTCPeerConnection. مختصر ۾، تقريبن هن قدم تي توهان کي RTCPeerConnection اعتراض ٺاهڻ جي ضرورت آهي:

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

اسان iceServers کي ھڪڙي اختيارن جي طور تي بيان ڪيو آھي - ھي ھڪڙو سرور آھي جيڪو NAT'om جي پويان ٻن برائوزرن جي وچ ۾ ڪنيڪشن مهيا ڪرڻ ۾ مدد ڪري ٿو. اهو آهي، مسئلو هتي حل ڪيو ويو آهي: ڪيئن ڳولهيندڙ جي ip کي ڳولي ته جيڪڏهن هو پنهنجي فراهم ڪندڙ جي 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);

اڳيون، ڳالهين لاءِ گهربل واقعو پير ڪنيڪشن تي فائر ٿئي ٿو، جنهن جي هينڊلر ۾ اسان کي هڪ آڇ ٺاهڻ گهرجي (ايس ڊي پي - سيشن وضاحت پروٽوڪول جي لحاظ سان) ۽ ان کي مقرر ڪيو وڃي پير ڪنيڪشن کي سيٽLocalDescription طريقي سان. 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 اهو سرور آهي جيڪو ٻن ساٿين جي وچ ۾ سيشن جي وضاحت کي مٽائڻ لاءِ گهربل آهي، اهو ٿي سگهي ٿو آسان ويب ساڪٽ يا xhr-server ڪنهن به PL تي. ان جو ڪم سادو آهي: هڪ پير صاحب کان سيشن جي وضاحت قبول ڪرڻ ۽ ان کي ٻئي ڏانهن منتقل ڪرڻ.

سيشن جي وضاحتن جي تبادلي کان پوء، ٻئي طرف وڊيو اسٽريم کي نشر ڪرڻ ۽ وصول ڪرڻ لاءِ تيار آهن، جنهن پاسي وڊيو اسٽريم وصول ٿئي ٿي، آن ٽريڪ ايونٽ شروع ڪيو ويندو آهي پير ڪنيڪشن تي، جنهن جي هينڊلر ۾، وصول ٿيل ٽريڪز کي تفويض ڪري سگهجي ٿو. ۽ پنهنجي پسنديده ڳالهائيندڙ کي ڏسو. وڌيڪ نظريو ۽ تفصيل.

رابطا ۽ ادب:

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 استعمال ڪندي، ffmpeg ذريعي HLS ڏانهن ٽرانسڪوڊنگ ڪرڻ لاءِ برائوزر ۾ ناظرین کي ايندڙ نشريات لاءِ.

بي صبري لاءِ: ويب ڪيم مان وڊيو نشر ڪرڻ جو منهنجو تمام خراب پروٽوٽائپ ٽوچ ۾ پائون بيسڊ سرور ذريعي رد عمل ظاهر ڪرڻ لاءِ (اهو صرف هڪ تجربو آهي).

جو ذريعو: www.habr.com

(تقريبا) بيڪار ويب ڪيم برائوزر کان اسٽريمنگ. حصو 2. WebRTC

ٽرانسميشن لاءِ آڊيو ۽ وڊيو اسٽريمز تيار ڪرڻ

RTCPeerConnection

تبصرو شامل ڪريو جواب منسوخ