Peer A와 Peer B가 offer와 answer를 주고 받았다면 이제 IceCandidate이벤트를 실행하여 스트리밍을 진행할 수 있습니다. IceCandidate는 Internet Connectivity Establishment의 약자로 연결 가능한 네트워크 주소 후보 Candidate를 찾는 역할을 합니다. 각 Peer는 Candidate에 연결하여 서로의 데이터를 스트리밍할 수 있습니다. IceCandidate 이벤트 리스닝 RTCPeerConnection이 생성되면 icecandidate 이벤트 리스너가 발동되도록 합니다. 다음으로 스트림(myStream)에 트랙을 추가해줍니다. 로그를 찍어보면 아래와 같은 icecandidate 들이 출력됩니다. // app.js function makeC..

지금까지는 자신의 영상 및 음성을 처리하는 기능을 구현했습니다 이제 동일한 방에 참여한 사람들끼리 영상 채팅을 할 수 있는 기능을 하나씩 구현해보도록 하겠습니다. home.pug에서 채팅방을 입력받을 수 있는 인터페이스를 구현해주겠습니다. // home.pug div#videoRoomSelect form h2 Video input("type"="text", palcehodler="Please select a room", required) button Join div#videoStreaming h2 Video Chat video#myFace(autoplay, playsinline, width="400", height="400") select#cameras select#audios button#audioMu..

안녕하세요. 이번 포스팅에서는 webRTC를 사용하여 브라우저에서 영상 채팅 화면과 소리를 출력하는 방법에 대해 알아보도록 하겠습니다. 지난 웹소켓 포스팅에서 사용했던 코드의 일부를 재사용할 것인데요. 먼저, home.pug로 이동하여 영상을 출력할 수 있는 video 태그를 삽입해주도록 하겠습니다. // home.pug div h2 Video video#myFace(autoplay, playsinline, width="400", height="400") 다음으로 socket IO를 구현하고 있는 app.js로 이동합니다. (이전에 구현했던 텍스트 채팅 영역은 hidden 옵션을 통해 우선은 가려줬습니다) 다음으로 navigator.mediaDevices.getUserMedia()를 통해 영상 및 음성 ..