참고한 블로그!

카메라 변경 peer에 반영

• 내가 카메라를 바꿀 때 다른 브라우저에서도 내용이 반영되어야함
  handleCameraChange를 수정해줘야함

async function handleCameraChange() {
    await getMedia(camerasSelect.value);
}

// 카메라 변경 확인
camerasSelect.addEventListener("input", handleCameraChange);

수정 전이고, 카메라 선택하면 호출되는 함수임 (이벤트리스너)

카메라를 바꾸면 getMedia를 통해 새로운 스트림을 만들게됨
그 스트림의 변경사항을 peer들에게도 전달해야함

async function handleCameraChange() {
    // getMedia로 바꾼 카메라로 스트림 변경 
    await getMedia(camerasSelect.value);

    // 변경된 내용을 peer에게도 알려주기위함 
    if (myPeerConnection){
        const videoTrack = myStream.getVideoTracks()[0];

        //sender의 track.kind가 video인 부분을 replaceTrack으로 바꿔줌 
        const videoSender = myPeerConnection
            .getSenders()
            .find(sender=>sender.track.kind=="video");
        videoSender.replaceTrack(videoTrack);
    }
}

이렇게해주면됨

---

모바일 문제

모바일에서 정상작동하지 않음
이건 나중에 해야할듯 여기서는 그냥 url을 만들어서 로컬에서 돌리는걸 접근가능하게 하는데 우리는 실제로 배포할거니까

Data Channel

음성, 영상 외에 다른 데이터를 주고받기 위해 Data Channel 사용

socket.on("welcome", async () => {
    
    //offer를 만드는 peer가 DataChannel 만듬 
    myDataChannel = myPeerConnection.createDataChannel(`chat`);
    //메세지를 받으면 이벤트처리 (콘솔에출력)
    myDataChannel.addEventListener(`message`,event=>console.log(event.data));
    console.log(`made data channel`);

    const offer = await myPeerConnection.createOffer(); // 다른 사용자를 초대하기 위한 초대장!! (내가 누구인지를 알려주는 내용이 들어있음!)
    myPeerConnection.setLocalDescription(offer); // myPeerConnection에 내 초대장의 위치 정보를 연결해 주는 과정 https://developer.mozilla.org/ko/docs/Web/API/RTCPeerConnection/setLocalDescription
    console.log("sent the offer");
    socket.emit("offer", offer, roomName);
})

socket.on("offer", async (offer) => {

    //offer를 받는 쪽에서는 새로운 dataChannel이 있을 때 eventListener 추가함 
    myPeerConnection.addEventListener(`datachannel`,event=>{
        myDataChannel = event.channel;
        myDataChannel.addEventListener(`message`,event=>console.log(event.data)); //메세지 받을 때 이벤트처리 (콘솔에출력)
    });



    console.log("received the offer");
    myPeerConnection.setRemoteDescription(offer); // 다른 브라우저의 위치를 myPeerConnection에 연결해 주는 과정
    const answer = await myPeerConnection.createAnswer();
    myPeerConnection.setLocalDescription(answer); // 현재 브라우저에서 생성한 answer를 현재 브라우저의 myPeerConnection의 LocalDescription으로 등록!!
    socket.emit("answer", answer, roomName);
    console.log("sent the answer");
})

채팅은 각각의 브라우저에서 myDataChannel.send()를 통해 보낼 수 있음