Develop/Zoom만들기17 Zoom. 기능 추가사항 ( +오류 해결 ) 2023.9.10 수정사항) 방 입장 / 퇴장메시지 전달하기. 문제 : 방을 입장할때는 입장했다는 메시지가 출력되는데, 나갈때는 퇴장 메시지 전달 x 원인1) : 브라우저1 /브라우저 2 로 접속했을 때, 브라우저2가 나갈 때, 나갔다는 메시지를 브라우저1에게 전달해야함. 하지만 브라우저 2가 나가면 브라우저 2가 해당되어있던 socket자체가 소멸되어 누가 나갔는지 disconnect메서드에 올바른 파라미터(인자)값을 전달할 수 없음. 원인2) : 브라우저2가 꺼지면, 저장되어있던 roomName의 값도 소실되어 어느방으로 부터 나갔는지 disconnect메서드에 올바른 인자값을 전달할 수 없음. 원인1 해결방법) socket.to로 emit(강제함수실행) 메서드를 보내지 않고 wsServer자체에 값.. 2023. 9. 11. Zoom 만들기 15. 모바일에서 사용하기 1. 모바일에서도 사용할 수 있게 하기. 1-1) local tunnel 사용하기 localtunnel은 서버를 전 세계와 공유할 수 있게 해준다. localhost:3000에서만 되던 것을 누구나 접근해서 볼 수 있도록 URL을 생성해 주기 때문이다. 더보기 npm i -g localtunnel local tunnel을 다음과 같은 명령어로 다운받으면 LT명령어를 사용할 수 있다. 터미널에 'lt'를 입력하면 사용법을 확인할 수 있다. 1-2) 포트 공유하기 터미널에서 'npm run dev'로 서버를 실행시키고 'lt --port 3000' 이라는 명령어를 실행하면 특정 url을 제공해준다. 저 링크로 들어가면 모바일로도 마치 내 localhost:3000 ip로 들어간것과 같게 처리된다. 1-3) .. 2023. 9. 9. Zoom 만들기 14. WebRTC (2) 3. p2p 연결 생성하기 3-1) icecandidate 이해하기 offer 와 answer이 끝날 때, p2p연결의 양쪽에서는 icecandidate 이벤트를 실행할 것임. 여기서ice는 internet connectivity establishment를 의미하며 '인터넷 연결 생성'을 의미한다. icecandidate는 통신할 때 필요한 프로토콜과 라우팅 정보인데, 연결이 이루어지고 나면 이를 이용해 서로 데이터 교환을 시도할 수 있다. WebRTC연결이 처음 시작되면 일반적으로 icecandidate가 각 peer에서 여러개 만들어진다. 우리는 그중 하나를 연결에 이용하면 됨. 3-2) 이벤트 핸들러 함수 정의하기 //offer 받는 쪽. socket.on("offer", async(offer) =.. 2023. 9. 9. Zoom만들기 13. WebRTC WebRTC는 web real-time communication을 뜻한다. WebRTC는 네가지 스텝을 통해 동작한다. Signalling Connecting Securing Communicationing 그리고 peer-to-peer로 데이터를 교환할 수 있게 해준다. 1. 그럼 peer-to-peer이 뭔데? 인터넷에 연결된 다수의 개별 사용자들이 중개 기관을 거치지 않고 데이터를 직접 주고받는다는 뜻이다. ※ socket.io로 만든 채팅 앱은 peer-to-peer가 아님. 왜냐하면 하나의 서버에 웹소켓이 여러개 이어져 있어서 서버가 중개 기관 역할을 했기 때문... 언제나 서버를 이용할 필요도 없다. 실시간 소통 속도도 빠르다. 서버를 유지하는데 드는 여러가지 비용도 줄일 수 있다. 다만 그렇다.. 2023. 9. 5. Zoom 만들기 12. 비디오와 오디오 제어하기 영상, 소리와 같은 미디어를 스트림으로 받아오는 작업을 해봤는데, 우리가 생성한 스트림 안에 있는 트랙(Track)이라는 것을 사용하면 비디오와 오디오를 따로 제어할 수 있음. 1. 트랙 살펴보기 스트림에서 트랙이란 스트림을 구성하는 미디어 요소 하나하나를 구분하는 일종의 단위이다. → 각 트랙은 배열로 표현되는데, 배열을 구성하는 객체에는 kind라는 키가 있고 여기에 트랙의 종류가 표시돼. ex) MediaStreamTrack {kind: 'audio'} / MediaStreamTrack {kind: 'video'} 2. 비디오와 오디오 제어하기 두 버튼의 핸들러 함수로 가서 버튼을 각각 클릭할 때마다 enable의 값이 변경되도록 변경. const socket = io(); const myFace .. 2023. 9. 5. 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. 이전 1 2 3 다음 반응형
