개발
[WebRTC] 6. 라이브 스트리밍 구현 (2) IceCandidate & Track
Peer A와 Peer B가 offer와 answer를 주고 받았다면 이제 IceCandidate이벤트를 실행하여 스트리밍을 진행할 수 있습니다. IceCandidate는 Internet Connectivity Establishment의 약자로 연결 가능한 네트워크 주소 후보 Candidate를 찾는 역할을 합니다. 각 Peer는 Candidate에 연결하여 서로의 데이터를 스트리밍할 수 있습니다. IceCandidate 이벤트 리스닝 RTCPeerConnection이 생성되면 icecandidate 이벤트 리스너가 발동되도록 합니다. 다음으로 스트림(myStream)에 트랙을 추가해줍니다. 로그를 찍어보면 아래와 같은 icecandidate 들이 출력됩니다. // app.js function makeC..
[WebRTC] 5. 라이브 스트리밍 구현 (1) offer & answer
WebRTC 라이브 스트리밍은 다음의 흐름을 따라 구성됩니다. Peer A가 Offer를 생성하여 서버를 통해 Peer B에 전달합니다. Peer B는 해당 Offer를 받고 Answer를 생성하여 서버를 통해 Peer A에게 전달합니다. Peer A가 candidate를 전달하고 Peer B는 이를 추가합니다. Peer B가 candidate를 전달하고 Peer A는 이를 추가합니다. 스트리밍이 진행됩니다. RTC 연결 생성하기 아래와 같이 RTCPeerConnection을 통해 새로운 RTC 연결을 생성할 수 있습니다. // app.js function showVideoOption() { videoInteface.hidden = true; streamingInterface.hidden = false;..
[WebRTC] 4. 채팅방 기능 구현하기
지금까지는 자신의 영상 및 음성을 처리하는 기능을 구현했습니다 이제 동일한 방에 참여한 사람들끼리 영상 채팅을 할 수 있는 기능을 하나씩 구현해보도록 하겠습니다. 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] 3. 카메라 오디오 전환하기
이제 영상 카메라와 오디오 기기를 변경하는 옵션을 추가해보도록 하겠습니다. home.pug에서 select 옵션 태그를 추가해줍니다. // home.pug div#video h2 Video Chat video#myFace(autoplay, playsinline, width="400", height="400") select#cameras // 카메라 선택 옵션 select#audios // 오디오 선택 옵션 button#audioMute Mute button#cameraOff Camera Off 이제 사용할 수 있는 기기 정보들을 얻어보도록 하겠습니다. enumrateDevice() 메소드를 사용하면 연결된 기기 정보를 모두 불러올 수 있습니다. 다음으로 kind 키를 통해 videoinput과 audio..
[WebRTC] 2. 영상 및 음성 켜고 끄기
지난 포스팅에서는 영상 및 음성을 출력하는 것을 구현했는데요. 이번에는 해당 영상과 음성을 켜고 끄는 버튼을 구현해보도록 하겠습니다. 먼저, home.pug로 이동하여 해당 버튼들을 만들어주겠습니다. // home.pug div#video h2 Video Chat video#myFace(autoplay, playsinline, width="400", height="400") button#audioMute Mute button#cameraOff Camera Off 다음으로 app.js로 이동하여 아래와 같이 요소를 선택합니다. ON/OFF를 판단할 수 있는 변수인 audioOn과 cameraOn도 만들어주겠습니다. // app.js const myFace = document.getElementById("m..
[WebRTC] 1. 영상 채팅 화면과 소리 출력하기
안녕하세요. 이번 포스팅에서는 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()를 통해 영상 및 음성 ..
[WebSocket/Socket IO] 채팅 서비스 구현 10. 관리자 패널 추가하기
socket.io는 관리자 패널 또한 지원합니다. 이번 포스팅에서는 관리자 패널을 설치하고 사용하는 방법에 대해 알아보도록 하겠습니다. 관리자 패널 설치 및 설정 npm i @socket.io/admin-ui // server.js import { instrument } from "@socket.io/admin-ui"; import { Server } from "socket.io"; const ioServer = new Server(httpServer, { cors: { origin: "https://admin.socket.io", credentials: true, }, }); instrument(ioServer, { auth: false, }); 관리자 패널 사용하기 https://admin.socke..
[WebSocket/Socket IO] 채팅 서비스 구현 9. 공개 채팅방 찾고 알림 전송하기
이제 채팅방에서 사용되는 기본 기능을 구현하는 마지막 포스팅입니다. 이번에는 공개 방과 비공개 방을 구분하고, 공개 방에 관한 정보를 업데이트 해보도록 하겠습니다. 공개 방과 비공개 방의 개념 사실 공개 방과 비공개 방의 개념이 낯선 것일 수도 있는데요. 왜냐하면 이제까지는 이를 구분하지 않고 방을 만들고 여기에 참여했기 때문입니다. 앞서 채팅 서비스를 구현하며 소켓의 id로 사용자를 구분했던 것을 기억하시나요? 해당 id는 소켓에 접속하는 사용자에게 부여되는 고유한 아이디로 접속과 실은 동시에 자신만의 프라이빗한 비공개 방에 접속하게 되는 것과 같은 이치입니다. 반면, 우리가 공개 방이라고 정의하는 것에는 이러한 소켓 아이디가 존재하지 않습니다. 공개 방과 비공개 방 구분하기 그렇다면 공개 방과 비공개..
