Zoom 클론코딩 #5

버그

 

카메라 바꿀 때 화면 반영안됨 

// RTC Code
function   makeConnection(){
    myPeerConnection = new RTCPeerConnection(); //crate peer to peer connection
    myPeerConnection.addEventListener("icecandidate", handleIce); //after making peerConnection , listen ice candidate
    myPeerConnection.addEventListener("track", handleAddStream);
    myStream.getTracks().forEach(track => myPeerConnection.addTrack(track, myStream)); //put data inside peer connection
}

카메라를 바꿀 때마다 새로운 stream이 전송되는데 peer에게주는 steram update하기 ! 기존코드에 track을 바꿔서 넣어줘야함 

 

Sender: 우리의 peer로 보내진 media stream track을 컨트롤하게 해줌 

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

RTCRtpSender - Web APIs | MDN

 

async function handleCameraChange(){
    await getMedia(camerasSelect.value);
    if(myPeerConnection){
        const videoTrack = myStream.getVideoTracks()[0];
        const videoSender = myPeerConnection.getSenders().find((sender)=> sender.track.kind ==="video");
        videoSender.replaceTrack()
    }
}

 

---

npm i -g localtunnel 

서버를 전세계와 공유하게 해줌 , url 생성해줌 

 

명령어

lt --port 3000

npx localtunnel --port 3000

stun 서버는 너의 장치에 공용주소를 알려주는 서버

장치는 공용주소를 알아야함 

그래야 다른 네트워크에있는 장치를 알아볼 수 있음

 

구글에서 제공하는 무료 스턴서버 . 실제 앱 만들 때는 자신의 서버로 만들어야함 

function   makeConnection(){
    myPeerConnection = new RTCPeerConnection({//crate peer to peer connection
        iceServers: [ //stun server from google
          {
            urls: [
              "stun:stun.l.google.com:19302",
              "stun:stun1.l.google.com:19302",
              "stun:stun2.l.google.com:19302",
              "stun:stun3.l.google.com:19302",
              "stun:stun4.l.google.com:19302",
            ],
          },
        ],
      }); 

---

https://developer.mozilla.org/ko/docs/Web/API/RTCPeerConnection/createDataChannel

RTCPeerConnection.createDataChannel() - Web API | MDN

DATA CHANNEL 

메세지, 게임,파일 등을 주고 받을 수있게함 . 서버에 올릴 필요 없이

 

 

webRTC를 쓰면 안되는 경우 

mesh구조로 , 너무 많은 peer을 갖고 있을 때 , 연결이 너무 복잡해지고 느려짐

다섯명이면 내 스트림을 다섯번 업로드해야 

최대 3 명까지 ok

그러나 datachannel로 공유할 때는 문제 없음 텍스트라

문제는 무거운 video, audio 전달할 때 

 

SFU

Selective Forwarding Unit , 서버에 의존 

---

DATA CHANNEL 만들기 

offer하기 전에 생성하고 싶음