webrtc3 [WebRTC] 웹 RTC 구현해보기 - N : N 연결 목적 web Rtc 를 이용하여 클라이언트 간 1 : 1 영상 및 오디오 연결을 진행한다. 이용한 기능들 Front : html , javascript, socket.io back : Nest js (gateway) 기본 세팅 로컬 비디오 연결 설정 및 피어 정보 연결 설정은 기존과 같음 차이점 이전 글의 경우, 비디오 / 오디오 연결을 위한 코드 흐름이 1 :1에만 초점이 되어 있어, 두 번째 이후 사용자에 연결에 대한 대응이 불가능하다. 다중 사용자 연결을 위해서는 연결 정보를 보관하는 변수 ( 이전 글의 경우, peerInfo ) 를 Object 형으로 관리하여 여러 사용자 간의 연결 정보를 보관해야 한다 다음으로, 신규 사용자와의 연결을 진행할 때, 이미 연결된 사용자와의 재연결은 막아야한다. 그.. 2023. 8. 7. [WebRTC] 웹 RTC 구현해보기 - 1 : 1 연결 // 연결 후보 전달을 위한 server 코드 @SubscribeMessage("icecandidate") handleIcecandidateMessage(client: Socket, { candidate, selectedRoom }){ client.broadcast.to(selectedRoom).emit("icecandidate", { userId: client.id, candidate }); } 목적 web Rtc 를 이용하여 클라이언트 간 1 : 1 영상 및 오디오 연결을 진행한다. 이용한 기능들 Front : html , javascript, socket.io back : Nest js (gateway) 과정 및 코드 클라이언트 간 1 : 1 연결은 아래와 같은 순서대로 진행된다. 연결이 완성되기 .. 2023. 7. 15. [Web RTC] 웹 RTC 구현해보기 - 1 1. 내 비디오 & 마이크에서 정보 가져오기async function start() { try { // 로컬 비디오, 마이크 stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }); // 로컬 비디오 트랙과 오디오 트랙 추출 localVideoTrack = stream.getVideoTracks()[0]; localAudioTrack = stream.getAudioTr.. 2023. 7. 1. 이전 1 다음
