프로그래밍/WebRTC11 [Mediasoup] 1:N 연결 구현 테스트를 해보고 놀랐던 점은, 내부적으로 동작하는 코드가 효율적인 것 같다는 생각이다. 노트북 CPU 가속을 키지 않은 상태인데도 생각보다 CPU를 많이 사용하지 않는다. 직접 만든 SFU의 경우 서버에서 사용하는 양만 꽤 나갔던 걸로 기억하는데... ㅎㅎ 소스를 내가 작성한 것은 아니고, 유튜브 Amir Eshaq라는 분이 작성하신 소스가 있어서 보면서 학습했다. 기존에 작성했던 SFU 서버의 동작 방식과 크게 다르지는 않다. 다만 Mediasoup의 처리 순서를 따라가다보니 소스코드가 더 많은 것이 사실이다. 코드 내용을 뜯어서 분석했으나 그대로 정리하고 올려도 직접 뜯어보지 않으면 이해하기 어려울 것이다. 그래서 약간의 설명만 남겨두고 마무리하려고 한다. 클라쪽에서는 consumerTransport.. 2023. 9. 24. [Mediasoup] 미디어수프 아키텍처 미디어 수프의 아키텍처를 이해하기 위해서는 사용하는 개념에 대한 내용부터 알고 있어야 한다. Worker는 하나의 서버 같은 개념인데, Core의 수로 한정이 되어 있다. Router는 Room 단위로 분리가 된다. Transport는 Peer를 의미한다. Producer과 Consumer는 이름 그대로 스트림을 보내는 Peer와 스트림을 받는 Peer를 의미한다. 왼쪽 그래프에서 Peer의 수는 9개다. (Transport 9개), 서버로 보내는 피어의 경우 3개이다. (Producer 3개) 스트림을 받는 피어의 경우 6개이다. (Consumer 6개) 왼쪽 그래프에서 Peer의 수는 7개다. (Transport 7개), 서버로 보내는 피어의 경우 3개이다. (Producer 3개) 스트림을 받는 피.. 2023. 9. 22. [Mediasoup] communication-between-client-and-server - 1 https://mediasoup.org/documentation/v3/communication-between-client-and-server/ Communication Between Client and Server 미디어 수프튼 클라와 서버간 통신하기 위해 어떤 시그널링 프로토콜도 제공하지 않는다. 웹소켓, HTTP 혹은 기타 수단을 가지고 통신하고, 미디어수프 관련 파라미터를 교환하며, 요청과 응답을 받는 것은 어플리케이션에 달려 있습니다. 대부분의 상황에서 양방향 통신이 이루져야 하므로 전이중(Full-duflex) 채널이 되어야 합니다. 그러나 어플리케이션은 같은 채널을 재활용할 수 있습니다. (미디어수프와 관련되지 않은 메시지의 교환용으로, 인증 프로듀스, 챗 메시지, 파일 전송 등등) Guide.. 2023. 9. 20. [WebRTC] SFU 서버 구현 SFU 서버 구현은 쉽지 않았다... 라고 하지만 밀로님께서 이미 구현해놓으신 코드가 있어서 많은 참고가 되었다. 로직 자체가 크게 어렵지 않으니까 보다보면 충분히 이해된다. 참고로 Signaling 같은 고급 기술은 포함되어 있지 않다. 단순히 Peer간의 컨셉만 구현했다. SFU 서버 구축에 대한 이해도가 부족해서, 다른 소스는 어떤 식으로 작성이 되었는지 찾아보았다. 서버와 클라간 Peer를 연결하고 서버에서 유저의 스트림을 관리한다는 컨셉은 동일하더라. 핵심 로직에 대한 언급을 하기 이전에 컨셉을 이해 해야 한다. SFU 방식은 브라우저간 직접적인 P2P 통신을 하지 않는다. 각 브라우저는 서버와 P2P 연결을 하는데 서버에 자신의 스트림을 주는 SendPeer와 다른 브라우저의 스트림을 받는 R.. 2023. 9. 19. [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. WebSocket과 Socket.io 차이 HTTP request를 보내면 server가 처리하고 response을 보낸다. Stateless 상태를 저장하지 못하기 때문에 '쿠키' 정보를 클라에서 보낸다. 실시간 X WebSocket 브라우저가 연결을 보내면, 받든 거절하든 한다. 한번 연결된 이후에는 지속적인 연결 Stateful 양방향 통신, 실시간 브라우저마다 지원하는 WebSocket API가 존재한다. HTTP와 WebSocket은 서로 다른 프로토콜이며 같은 포트로 접속할 수 있도록 구성할 수 있다. Socket.io와 WebSocket의 차이는? Socket.io는 웹소켓을 사용하여 구현되기도 하지만, 웹 소켓을 사용할 수 없는 경우에는 다른 기술을 이용한다. (HTTP long polling) 자동으로 재연결 시도 socket.i.. 2023. 9. 10. [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 2 다음
