본문 바로가기

웹소켓2

Zoom 만들기 .11 카메라 불러오기 목표 사용자로부터 영상을 가져와 화면에 보여주기 마이크 음소거나 카메라 켜고 끄는 기능을 제어하는 버튼을 구현 카메라 여러개인 경우를 대비하여 사용하던 카메라를 바꿀 수 있게 할 것임. 1. 영상 출력 요소 추가하기 myFace라는 부를 영상을 만들어야함. home.pug를 다음과 같이 수정 doctype html html(lang="en") head meta(charset="UTF-8") meta(http-equiv="X-UA-Compatible", content="IE=edge") meta(name="viewport", content="width=device-width, initial-scale=1.0") title Zoom //MVP.css는 우리가 태그에 class나 id같은 특성을 추가하지 않아.. 2023. 9. 4.
ZOOM 만들기 7. 실시간 채팅구현 +@ 이전에 실시간 채팅을 구현하였고 이번 포스팅에서는 닉네임과 메시지 구분처리 / 익명처리 / 데이터 모양 다듬기 위주로 부가적인 내용을 다룰 예정이다. 1. 닉네임과 메시지 처리하기 닉네임은 닉네임대로 / 메시지는 메시지대로 처리할 예정. if문 대신에 switch문을 사용하여 가독성을 높힘 server.js코드를 다음과 같이 수정함. wss.on("connection", (socket) => { sockets.push(socket); // 브라우저가 연결됐을 때. console.log("Connected to Browser"); //브라우저가 종료되었을 때를 의미하는 close socket.on("close", () => console.log("Disconnected from Browser")); //브.. 2023. 8. 31.
반응형

티스토리툴바

*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*