WebRTC9 [메타프루츠] WebRTC 기반 포트폴리오 [작품 이름] 메타프루츠(Metafruits) [작품 바로가기] 웹 사이트: https://metafruits.kro.kr [작품 소개] 메타프루츠는 '메타'와 '프루츠'의 합성어로, 메타버스 환경에서 과일이 되어 채팅이나 다자간 화상회의를 진행할 수 있습니다. [개발 기간] 23.09.27~23.10.17 [주요 기능] 1. 다자간 화상회의 2. 채팅 - 전체 채팅 - 회의방 채팅 3. 캐릭터, 닉네임 변경 4. 장치설정 - 카메라, 마이크 제어 - 장치 선택 - 마이크 테스트 5. 모바일웹(사파리 브라우저) [사용 기술] 언어: javascript, HTML, CSS 서버: node.js(express) 라이브러리: Mediasoup, Phaser, Socket.io, Webpack 프로토콜: HTT.. 2023. 10. 17. [Portfolio Log] WebRTC 기반 포폴 기록 8 (가제: 메타프루츠) 1. 포트폴리오 가제 설정 'meta'와 'fruits'의 합성어인 메타프루츠가 될 것 같다. 2. 웹팩 적용 Mediasoup 설치에서 웹팩이나 browserify를 쓰라는 이야기가 있어서 웹팩을 적용했다. 처음 해보는 거라 서버 파일 실행 안 시키고 클라js 파일로 돌리고 있고... Dom Element 접근 안 되는 이슈가 있기는 했는데 결국 고치긴 했다. (footer에서 index.js 참조) https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event 윈도우의 onload를 사용하는 방법도 있다. 3. 코드 분리 과정 기존 index.js에 모여 있던 Socket 코드, UI 코드를 분리하는 과정을 거쳤다. 이 과정에서 잘 모르고 있던.. 2023. 10. 11. [Portfolio Log] WebRTC 기반 포폴 기록 1 최근에 미디어수프를 이용하여 1:N 화상통화까지 구현했고 디테일한 부분(장치 설정, 하단 컨트롤러)은 나중에 작업하려고 한다. 테스트가 필요한 부분까지는 충분히 작업했다고 본다. 다음으로 Phaser를 이용하여 Tilemap 기반의 게임을 개발하는 부분을 작업하고 있다. 순수 javascript 기반으로 게임을 개발하지 않는 이유는 다음과 같다. 1. 게임 프레임워크를 개발하는 시간이 들지 않는다. 게임 하나를 만드는 과정에서 사용자의 입력, 애니메이션 처리, 충돌, 렌더링 같은 다양하게 신경써야 할 요소들이 한 두 가지가 아니다. 근데 이미 만들어둔 게임 프레임워크가 있다면, 빠른 개발을 위해서 충분히 쓸만 하다고 판단했다. 2. 내 기준에서 게임 프레임워크 구현이 포트폴리오의 가치가 있는가? 게임 프.. 2023. 9. 28. [WebRTC] 1:N Peer To Peer 연결 구현 니꼴라스 선생님이 작성해준 1:1 Peer To Peer 예제 소스에서 크게 벗어나진 않는다. https://github.com/Yumin2019/WebRTC-P2P-Implement/tree/p2p-one-to-one 1:1 코드와 달라진 부분) 1:1 코드에서는 미리 PeerConnection을 생성하는 것이 가능했다. 왜냐면 Room에 들어올 인원이 2명으로 한정되어 있었기에 Id값이 없더라도 그냥 Room에 Socket 이벤트를 주는 방식으로 개발되어 있었기 때문이다. 1:N의 방식에서는 새로운 유저가 들어온 시점에 Offer를 만드는 부분과 Answer을 만드는 시점(다른 클라이언트)에 각각 서로의 Id를 key로하는 PeerConnection을 만들어 주는 것이 핵심이다. 1:N을 구현하는 순.. 2023. 9. 16. [WebRTC] WebRTC 미디어 서버와 활용 방안 WebRTC 개발에 사용되는 서버 컴포넌트 Application Server: 만드는 프로그램에서 사용하는 서버, WebRTC와 직접적인 연관성은 없다. Signaling Server: 유저간 통신을 연결하는 데 사용된다. (WebRTC는 자체적인 Signaling Protocol을 소유하지 않음) TURN (and STUN) servers: 방화벽이나 NAT을 통해 미디어를 라우팅하기 위해 사용된다. WebRTC media servers: WebRTC 미디어 패킷을 인프라 구조에서 처리하고 전송하기 위해 사용된다. Media Server의 역할과 Mesh 백엔드 인프라를 통해 미디어 패킷을 전송하는 역할을 한다. 만약 여러 명의 유저가 함께 P2P연결을 해야 한다고 가정해보자. 미디어 서버가 없이 구현.. 2023. 9. 16. [WebRTC] WebRTC 기본 개념과 Peer to Peer WebRTC(Web Realtime Commnunication)란? WebRTC는 브라우저간 Peer to Peer 통신을 가능하게 하는 기술이다. 음성 통화, 영상 통화, P2P 파일 공유 등으로 활용될 수 있다. SDP(Session Description Protocol)란? Peer 서로간의 미디어와 네트워크에 관한 정보를 이해하기 위해 사용되는 프로토콜이다. 코텍, 소스 주소, 오디오와 비디오의 타이밍 정보가 포함된다. ICE(Interactive Connectivity Establishment)란? WebRTC에서 Peer간 연결을 위해 사용하는 프레임워크이다. 공인 IP 주소를 갖지 않은 기기들에 대한 유일한 주소를 부여한다거나 방화벽을 통과 하는 등의 문제들을 해결하기 위해 사용된다. ICE.. 2023. 9. 16. [WebRTC] Real time communication with WebRTC 4 https://codelabs.developers.google.com/codelabs/webrtc-web/#6 7. Set up a signaling service to exchange messages In this step, you'll find out how to: Use npm to install project dependencies as specified in package.json Run a Node.js server and use node-static to serve static files. Set up a messaging service on Node.js using Socket.IO. Use that to create ‘rooms' and exchange messages. Node.js, .. 2022. 6. 19. [WebRTC] Real time communication with WebRTC 3 https://codelabs.developers.google.com/codelabs/webrtc-web/#5 6. Use RTCDataChannel to exchange data 대부분의 내용이 이전 섹션과 동일합니다. 결국에는 RTCPeerConnection을 만드는 과정에서 sendChannel과 receiveChannel에 대한 생성과 메시지를 받아서 뷰에 출력해주는 부분, 버튼 막는 처리 등의 전부입니다. start 버튼을 누르면 connection생성을 시작합니다. 로컬 커넥션에서 sendDataChannel을 만드는 부분이 추가가 되어 있습니다. 각 localConnection과 채널에 callback 처리를 해주고 있는데 채널에는 각 뷰에 대한 활성화처리, 로깅이 되어 있고 onicecan.. 2022. 6. 10. [WebRTC] Real time communication with WebRTC 2 https://codelabs.developers.google.com/codelabs/webrtc-web 5. Stream video with RTCPeerConnection In this step you'll find out how to: Abstract away browser differences with the WebRTC shim, adapter.js. Use the RTCPeerConnection API to stream video. Control media capture and streaming. WebRTC Shim과 adapter.js를 사용하여 브라우저간 차이를 추상화 하는 방법 비디오를 스트림하기 위한 RTCPeerConecttion API를 사용하는 방법 미디어 캡처와 스트리밍 관리 .. 2022. 6. 8. 이전 1 다음
