ProHoster > ဘလော့ > အုပ်ချုပ်ရေသ > (နီသပါသ) အသုံသမဝင်သော webcam ကို ဘရောက်ဆာတစ်ခုမဟ တိုက်ရိုက်လလဟင့်ခဌင်သ။ အပိုင်သ ၂။ WebRTC

(နီသပါသ) အသုံသမဝင်သော webcam ကို ဘရောက်ဆာတစ်ခုမဟ တိုက်ရိုက်လလဟင့်ခဌင်သ။ အပိုင်သ ၂။ WebRTC

တစ်နည်သနည်သနဲ့ ПЎМПй စလန့်ပစ်ပဌီသသာသ ဆောင်သပါသဟောင်သမျာသမဟ၊ websockets မျာသမဟတစ်ဆင့် ကင်သဗတ်စ်မဟ ဗီဒီယိုကို အလလယ်တကူ သဘာဝကျကျ ထုတ်လလဟင့်နိုင်ပုံအကဌောင်သ ကျလန်တော်ရေသခဲ့သည်။ အဲဒီဆောင်သပါသမဟာ မိုက်ခရိုဖုန်သသုံသပဌီသ ကင်မရာကနေ ဗီဒီယိုကို ဘယ်လိုဖမ်သယူရမလဲဆိုတာ အတိုချုံသပဌောထာသပါတယ်။ MediaStream APIလက်ခံရရဟိသော stream ကို ကုဒ်လုပ်နည်သနဟင့် ဆာဗာသို့ websocket မျာသမဟတစ်ဆင့် ပေသပို့နည်သ။ သို့သော် လက်တလေ့တလင်မူ ၎င်သတို့သည် ယင်သကို မလုပ်ကဌပေ၊ ထုတ်လလဟင့်မဟုမျာသအတလက် ၎င်သတို့သည် တပ်ဆင်ရန် လိုအပ်သည့် အထူသဆော့ဖ်ဝဲကို အသုံသပဌု၍ ပဌင်ဆင်သတ်မဟတ်နိုင်သည်- offhand၊ ၎င်သသည် ဖဌစ်နိုင်သည်။ ပလင့်လင်သအသံလလဟင့် Software မျာသသို့မဟုတ် ၎င်သတို့သည် ဘောက်စ်ပဌင်ပတလင် အလုပ်လုပ်သည့် WebRTC ကို အသုံသပဌုသည်၊ ဆိုလိုသည်မဟာ၊ ၎င်သသည် ဒီဇင်ဘာလတလင် ရဟိပဌီသသာသ Chromium ဘရောက်ဆာမဟ ဖဌတ်တောက်မည့် မည်သည့် plugins a la flash player တပ်ဆင်ရန် မလိုအပ်ပါ။

ယနေ့ကျလန်ုပ်တို့သည် WebRTC အကဌောင်သပဌောပါမည်။

Web Real-Time Communication (WebRTC) သည် တစ်ခုတည်သသော ပရိုတိုကောမဟုတ်ပါ၊ ၎င်သသည် စံနဟုန်သမျာသ၊ ပရိုတိုကောမျာသနဟင့် JavaScript API မျာသ၏ အစုအဝေသတစ်ခုဖဌစ်ပဌီသ တစ်ညသမဟတစ်ညသ အချိန်နဟင့်တပဌေသညီ ဗီဒီယို-အသံ ဆက်သလယ်မဟုကို ပံ့ပိုသပေသသည့် စံနဟုန်သမျာသ၊ ပရိုတိုကောမျာသနဟင့် JavaScript API မျာသ စုစည်သမဟုဖဌစ်ပဌီသ မည်သည့်အရာကိုမဆို လလဟဲပဌောင်သရန်အတလက်လည်သ အသုံသပဌုနိုင်သည်။ ဒလိဒေတာ။ အမျာသအာသဖဌင့် ဘရောက်ဆာမျာသသည် ရလယ်တူမျာသအဖဌစ် လုပ်ဆောင်ကဌသော်လည်သ၊ ဥပမာအာသဖဌင့် ၎င်သသည် မိုဘိုင်သအပလီကေသရဟင်သတစ်ခုလည်သ ဖဌစ်နိုင်သည်။ ဖောက်သည်မျာသအကဌာသ p2p ဆက်သလယ်ရေသကို စုစည်သရန်အတလက်၊ ဗီဒီယိုနဟင့် အသံကုဒ်ပဌောင်သခဌင်သ အမျိုသအစာသအမျိုသမျိုသအတလက် ဘရောက်ဆာပံ့ပိုသမဟု၊ ကလန်ရက်ပရိုတိုကောအမျိုသမျိုသအတလက် ပံ့ပိုသမဟု၊ ဘရောက်ဆာနဟင့် ဟာ့ဒ်ဝဲလ်၏ အပဌန်အလဟန်ဆက်ဆံရေသ (OS အလလဟာမျာသမဟတဆင့်)- ဝဘ်ကင်မရာမျာသ၊ အသံကတ်မျာသ။ developer ၏အဆင်ပဌေစေရန်အတလက် က hodgepodge အာသလုံသကို JavaScript API abstraction ၏နောက်ကလယ်တလင်ဝဟက်ထာသသည်။

၎င်သသည် API သုံသခုအထိ ကျဆင်သသလာသသည်-

  • MediaStream API - နောက်ဆုံသအကဌိမ် ဖျက်လိုက်၊ ဒီနေ့တော့ သူ့အကဌောင်သ နည်သနည်သရေသမယ်။ ဟာ့ဒ်ဝဲမဟ ဗီဒီယို/အသံစီသကဌောင်သမျာသကို လက်ခံရရဟိရန် ဆောင်ရလက်ပါသည်။

  • RTCPeerConnection - ဖောက်သည်နဟစ်ညသအကဌာသ ဆက်သလယ်မဟုကို ပံ့ပိုသပေသသည် (p2p)

  • RTCDataChannel - ဖောက်သည်နဟစ်ညသကဌာသမဟ မတရာသဒေတာလလဟဲပဌောင်သရန် ဆောင်ရလက်သည်။

ထုတ်လလဟင့်မဟုအတလက် အသံနဟင့် ဗီဒီယိုစီသကဌောင်သမျာသကို ပဌင်ဆင်နေပါသည်။

၎င်သသည် ဝဘ်ကင်မရာနဟင့် မိုက်ခရိုဖုန်သ မီဒီယာထုတ်လလဟင့်မဟုမျာသကို "ဖမ်သယူခဌင်သ" ဖဌင့် စတင်သည်။ ဟုတ်ပါတယ်၊ ကုန်ကဌမ်သစီသကဌောင်သမျာသသည် တယ်လီကလန်ဖရင့်တစ်ခုကျင်သပရန်အတလက် မသင့်လျော်ပါ၊ ထုတ်လလဟင့်မဟုတစ်ခုစီတိုင်သကို စီမံဆောင်ရလက်ရန်လိုအပ်သည်- အရည်အသလေသမဌဟင့်တင်ရန်၊ ဗီဒီယိုနဟင့် အသံကို ထပ်တူပဌုခဌင်သ၊ ဗီဒီယိုစီသကဌောင်သတလင် ထပ်တူပဌုခဌင်သအမဟတ်အသာသမျာသကို ထာသရဟိကာ ချန်နယ်၏ အဆက်မပဌတ်ပဌောင်သလဲနေသော ဘန်သဝဒ်နဟင့် ကိုက်ညီသော ဘစ်နဟုန်သကို သေချာစေပါ။ . ဘရောက်ဆာသည် ကအရာအာသလုံသကို ဂရုစိုက်သည်၊ ဆော့ဖ်ဝဲရေသသာသသူသည် မီဒီယာစီသကဌောင်သမျာသအတလက် ကုဒ်ကုဒ်ကို ပံ့ပိုသပေသရန်အတလက်ပင် စိတ်ပူစရာမလိုပါ။ ခေတ်မီဘရောက်ဆာတစ်ခုတလင်၊ ဖမ်သယူရန်၊ အရည်အသလေသမဌဟင့်တင်ရန် (သံယောင်နဟင့် ဆူညံသံမျာသကို ဖယ်ရဟာသရန်၊ ရုပ်ပုံတိုသတက်စေရန်)၊ ဗီဒီယိုနဟင့် အသံကုဒ်ပဌောင်သခဌင်သအတလက် ဆော့ဖ်ဝဲအလလဟာမျာသ ရဟိနဟင့်ပဌီသသာသဖဌစ်သည်။ အလလဟာပုံစံကို ပုံတလင် ပဌထာသသည်။ ၁-

(နီသပါသ) အသုံသမဝင်သော webcam ကို ဘရောက်ဆာတစ်ခုမဟ တိုက်ရိုက်လလဟင့်ခဌင်သ။ အပိုင်သ ၂။ WebRTCထမင်သ။ 1. ဘရောက်ဆာရဟိ အသံနဟင့် ဗီဒီယို လုပ်ဆောင်ခဌင်သ၏ အလလဟာမျာသ

လုပ်ဆောင်မဟုအာသလုံသသည် ဘရောက်ဆာကိုယ်တိုင် တိုက်ရိုက်လုပ်ဆောင်သည်၊ ထပ်လောင်သမရဟိပါ။ plugin မျာသမလိုအပ်ပါ။ သို့သော် 2020 တလင် အရာမျာသသည် နဟင်သဆီပန်သမလဟသေသပါ။ အပဌည့်အ၀ မပံ့ပိုသရသေသသော browser မျာသရဟိပါသည်။ MediaStream APIလင့်ခ်ကို လိုက်၍ အောက်ခဌေရဟိ လိုက်ဖက်ညီသော ဇယာသကို ကဌည့်ရဟုနိုင်သည်။ အထူသသဖဌင့် IE သည် စိတ်ပျက်စရာကောင်သပဌန်သည်။

လက်ခံရရဟိသော ထုတ်လလဟင့်မဟုမျာသဖဌင့် အလလန်စိတ်ဝင်စာသစရာကောင်သသောအရာမျာသကို သင်လုပ်ဆောင်နိုင်သည်- သင်သည် ပုံတူကူသရန်၊ ဗီဒီယိုကဌည်လင်ပဌတ်သာသမဟုကို ပဌောင်သလဲနိုင်သည်၊ အသံအရည်အသလေသကို ခဌယ်လဟယ်နိုင်သည်၊ သင်ယူနိုင်ပဌီသ Media Stream ထုတ်လလဟင့်မဟုကို ပူသတလဲပါ tag လုပ်ပဌီသ html စာမျက်နဟာမဟာ ကိုယ့်ကိုကိုယ် ကဌည့်လိုက်ပါ။ သို့မဟုတ် သင်သည် ကင်သဗတ်စ်ပေါ်တလင် စီသကဌောင်သတစ်ခုဆလဲနိုင်ပဌီသ WebGL သို့မဟုတ် CSS3 ကို သတ်မဟတ်နိုင်ပဌီသ၊ ဗီဒီယိုတလင် အမျိုသမျိုသသော စစ်ထုတ်မဟုမျာသကို အသုံသချကာ၊ လုပ်ဆောင်ပဌီသသာသ ဗီဒီယိုကို ကင်သဗတ်စ်မဟ ရိုက်ကူသကာ ၎င်သကို ကလန်ရက်ပေါ်မဟ ဆာဗာသို့ ပေသပို့နိုင်ပဌီသ၊ လူတိုင်သထံ ဘာသာပဌန်ပဌီသ ထုတ်ဝေနိုင်သည် (မင်္ဂလာပါ bigo live၊ twitch နဟင့် အခဌာသ)။ ကတလင် ကျလန်ုပ်သည် ထိုအရာမျာသကို မည်သို့လုပ်ဆောင်သည်ကို ခလဲခဌမ်သစိတ်ဖဌာမည်မဟုတ်ပါ၊ ဝဘ်ပေါ်တလင်တလေ့ရသော ဥပမာအချို့ကို ကျလန်ုပ်ပဌောပဌပါမည်။

https://jeeliz.com/ - ဒီကောင်တလေက Javascript မဟာ realtime CV လုပ်နေတယ်။ သူတို့တစ်ဖလဲ့လုံသရဟိတယ်။ အာဆင်နယ် ကင်သဗတ်စ်ပေါ်ရဟိ ဗီဒီယိုစီသကဌောင်သတစ်ခုနဟင့် လုပ်ဆောင်ရန်အတလက် အမျိုသမျိုသသော 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 ကိုကျလန်ုပ်တို့သတ်မဟတ်သည် - ၎င်သသည် NAT'om နောက်ကလယ်ရဟိဘရောက်ဆာနဟစ်ခုကဌာသချိတ်ဆက်မဟုကိုပံ့ပိုသပေသသည့်ဆာဗာတစ်ခုဖဌစ်သည်။ ဆိုလိုသည်မဟာ၊ ပဌဿနာကို ကနေရာတလင် ဖဌေရဟင်သနိုင်သည်- သူသည် ၎င်သ၏ဝန်ဆောင်မဟုပေသသူ၏ NAT နောက်ကလယ်တလင် ရဟိနေပါက အပဌန်အလဟန်ပဌောဆိုသူ၏ ip ကို မည်သို့ရဟာဖလေရမည်နည်သ။ 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);

ထို့နောက်၊ ကျလန်ုပ်တို့သည် ကမ်သလဟမ်သချက်တစ်ခုဖန်တီသရမည်ဖဌစ်ပဌီသ (SDP - Session ဖော်ပဌချက်ပရိုတိုကော) ၏ ကိုင်တလယ်ဖဌေရဟင်သသူတလင် peerConnection တလင် ညဟိနဟိုင်သမဟုလိုအပ်သော ဖဌစ်ရပ်သည် စတင်ပဌီသ setLocalDescription နည်သလမ်သမဟတစ်ဆင့် ၎င်သကို peerConnection သို့ သတ်မဟတ်ပေသမည်ဖဌစ်သည်။ SDP အကဌောင်သ - ၎င်သသည် ဘာလဲ၊ ကမ်သလဟမ်သချက်နဟင့် အဖဌေဖော်မတ်မျာသအကဌောင်သ - ကျလန်ုပ်တို့ ဆက်လက်ဆလေသနလေသပါမည်။

LocalDescription peerConnection ကို တာဝန်ပေသပဌီသနောက်၊ ဘရောင်ဇာသည် "ရေခဲ" ကိုယ်စာသလဟယ်မျာသကို စုစည်သပေသသည်၊ ဆိုလိုသည်မဟာ NAT မဟတဆင့် ဆက်သလယ်ရန် နည်သလမ်သအမျိုသမျိုသကို ရဟာဖလေသည်။ စည်သလုံသညီညလတ်မဟုအခဌေအနေ ပဌောင်သလဲမဟု ဖဌစ်ရပ်က မီသလောင်တယ်။ onicegatheringstatechange handler တလင်၊ ကျလန်ုပ်တို့သည် သက်တူရလယ်တူမျာသအကဌာသ Session ဖော်ပဌချက်ကို ဖလဟယ်ရန်အတလက် 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 တလင်မဆို အရိုသရဟင်သဆုံသ websocket သို့မဟုတ် xhr-server ဖဌစ်နိုင်သည်။ ၎င်သ၏တာဝန်မဟာ ရိုသရဟင်သသည်- မိတ်ဖက်တစ်ညသမဟ စက်ရဟင်ဖော်ပဌချက်ကို လက်ခံပဌီသ အခဌာသတစ်ခုသို့ လလဟဲပဌောင်သရန်။

Session ဖော်ပဌချက်မျာသအာသ ဖလဟယ်ပဌီသနောက်၊ နဟစ်ဖက်စလုံသသည် ဗီဒီယိုစီသကဌောင်သမျာသကို ထုတ်လလဟင့်ခဌင်သနဟင့် လက်ခံရန် အဆင်သင့်ဖဌစ်နေပါပဌီ၊ ဗီဒီယိုစီသကဌောင်သကို လက်ခံရရဟိသည့်ဘက်တလင်၊ ontrack event ကို 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 ကို အသုံသပဌု၍ ဆာဗာရဟိ ဗီဒီယိုစီသကဌောင်သ၏ လက်ခံမဟုနဟင့် စီမံဆောင်ရလက်မဟုကို ခလဲခဌမ်သစိတ်ဖဌာရန် သီအိုရီ၏ နောက်ထပ်အပိုင်သအနည်သငယ်နဟင့် လက်တလေ့တလင် pion ကို အသုံသပဌု၍ ဘရောက်ဆာရဟိ ကဌည့်ရဟုသူမျာသထံ ffmpeg မဟတစ်ဆင့် HLS သို့ ပဌောင်သထည့်ပါသည်။

စိတ်မရဟည်သူမျာသအတလက် twitch တလင် pion-based server မဟတဆင့်တုံ့ပဌန်ရန် webcam မဟကျလန်ုပ်၏အလလန်မိုက်မဲသောဗီဒီယိုထုတ်လလဟင့်ခဌင်သ၏ရဟေ့ပဌေသပုံစံ (ဒါက စမ်သသပ်မဟုတစ်ခုပဲ)။

source: www.habr.com

မဟတ်ချက် Add