Never give up

마지막으로 완성된 예제와 삽질 포인트 그리고 깃헙 링크와 함께 마무리 하도록 하겠습니다 필자가 작업하면서 마주친 삽질 포인트 1. 상대방의 media가 연결이 안될 때 iceCandidate가 잘 연결되었는지 확인이 필요합니다 sveltekit으로 개발할 때, npm run을 했을 때 서브된 ip가 여러개가 나온것을 확인했습니다 정상적으로 하나의 ip에서 작동되고 있는지 확인이 필요합니다 2. 소리가 echo처럼 울릴 때 본인의 미디어 사운드를 끕니다 안그러면 계속해서 울리고 더 심해지면 귀가 아파질 정도였습니다.. 3. media 를 전달 하거나 전달 받을 때, on/off할 때 media를 track하는 부분에 조금 더 신경을 써야됩니다 turn on/off과정에서 이전 track을 확실하게 초기화 ..

먼저 사용한 패키지는 3가지입니다 1. flutter_webrtc : webRTC를 사용하기 편하도록 개발해놓은 패키지 2. socket_io_client : 소켓연결 3. vibration : 전화 온것같은 효과(?) 여기서 상태관리는 어디있냐 라는 의문이 들 수 있는데 해당 예제에서는 기본으로 제공하는 setState, ValueListenableBuilder로 구현했습니다 main.dart import 'package:flutter/material.dart'; import 'package:web_rtc/view/webrtc_main_view.dart'; void main() { runApp(const MaterialApp(home: WebRTCMainView())); } models // iceCa..

web은 svelte로 개발하고 react로 옮겨서 다시 작업을 했습니다 하다보니 svelte가 정말 편하구나.. 싶었던 순간이 많았던것 같습니다 상태관리 라이브러리는 사용하지 않았고 socket io로 소켓 통신을 처리했습니다 src/main/index.tsx import React from "react"; import useWebRTCHook from "src/hooks/useWebRTCHook"; import BtnArea from "./BtnArea"; import CallPopup from "./CallPopup"; import UserListArea from "./UserListArea"; import VideoArea from "./VideoArea"; import styles from '...

이전 포스트에서 peer와 peer를 연결할 때 signaling server를 이용한다고 했는데 필자는 socket으로 구현을 해봤습니다 const ip = require('ip') const express = require('express'); const app = express(); const server = app.listen(9000, ip.address(), () => { const address = server.address() console.log(`[scoket] on ${address.address}:${address.port}`) }); const io = require('socket.io')(server, { cors: { origin: "*", } }) let userList = ..

최근에 Web RTC를 개발해볼 기회가 생겨서 한번 간단하게 예제를 만들어봤는데 이것저것 설명할 부분, 그리고 node, react, flutter 이렇게 3가지를 구현해서 각각 간단하게(?) 설명드리고자 포스트를 여러개로 나눴습니다 ---- 서론은 여기까지 하고 WebRTC(Web Real-Time Communication)은 별도의 서버를 사용하지않고 peer와 peer가 연결을 해서 음성, 영상 통화 및 데이터 등을 교환할 수 있는 기술입니다 자세한 설명은 MDN을 참고하시길 바랍니다 (링크 : https://developer.mozilla.org/ko/docs/Web/API/WebRTC_API) 먼저 WebRTC로 영상통화 구현을 위해 필요한 지식들은 크게 3가지로 1. STUN(Session T..