지금까지는 자신의 영상 및 음성을 처리하는 기능을 구현했습니다 이제 동일한 방에 참여한 사람들끼리 영상 채팅을 할 수 있는 기능을 하나씩 구현해보도록 하겠습니다.
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#audioMute Mute
button#cameraOff Camera Off
다음으로 사용자에게 방 이름을 입력받고 이를 서버에 전달하여 다시 받아오는 로직을 구현합니다. 앞서 텍스트 채팅에서 구현했던 것과 방식은 동일합니다. 사용자가 입력한 방 이름을 저장한 다음 socket.emit
을 사용하여 서버로 전달하고 이를 다시 socket.on
으로 받아오는 방식입니다.
// app.js
const videRoomSelect = document.getElementById("videoRoomSelect");
const videoRoomSelectForm = videRoomSelect.querySelector("form");
const videoStreaming = document.getElementById("videoStreaming");
videoStreaming.hidden = true;
function showVideoStreaming() {
videRoomSelect.hidden = true;
videoStreaming.hidden = false;
}
function handleVideoRoomSelect(event) {
event.preventDefault();
const input = videoRoomSelectForm.querySelector("input");
videoRoomName = input.value;
socket.emit("videoRoomSelect", videoRoomName, showVideoStreaming);
}
videoRoomSelectForm.addEventListener("submit", handleVideoRoomSelect);
socket.on("videoGreeting", () => {
console.log("Some has joined!");
});
이제 서버 파일로 이동하여 다음과 같이 프론트와의 웹소켓 통신을 구현해줍니다.
// server.js
socket.on("videoRoomSelect", (videoRoomName, showVideoStreaming) => {
socket.join(videoRoomName);
showVideoStreaming();
socket.to(videoRoomName).emit("videoGreeting");
});
아래는 이미지는 현재까지 구현된 사항을 캡쳐한 것입니다!
'개발 > Projects' 카테고리의 다른 글
[WebRTC] 5. 라이브 스트리밍 구현 (1) offer & answer (0) | 2022.12.15 |
---|---|
[WebRTC] 3. 카메라 오디오 전환하기 (0) | 2022.12.14 |
[WebRTC] 2. 영상 및 음성 켜고 끄기 (0) | 2022.12.14 |