일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- redux toolkit
- Flutter
- code editor
- REST API
- KakaoMap
- Dart 2.17.0
- RouteObserver
- identifierForVender
- Game js
- Three-fiber
- swagger-typescript-api
- node
- babel
- methodChannel
- Three js
- Babel standalone
- web track
- Prism.js
- typescript
- webrtc
- Flutter 3.0
- Image Resize typescript
- androidId
- addPostFrameCallback
- Redux
- FirebaseAnalytics
- userevent_tracker
- Raycasting
- Completer
- react
- Today
- Total
목록분류 전체보기 (119)
Never give up
이전에 html을 pdf로 만드는 간단한 예제는 해봤는데 (https://devmemory.tistory.com/98) 수정 가능한 doc file을 만들어야 될 필요가 있어서 한번 만들어 봤습니다 App.tsx const Main = () => { let text: string const downloadDoc = (e: React.MouseEvent, isDownload: boolean) => { e.preventDefault() if (text === undefined) { const quill = document.querySelector('#div_quill > .ql-editor') text = `${quill?.innerHTML}` } const doc = makeDoc(text, 'test')..
마지막으로 완성된 예제와 삽질 포인트 그리고 깃헙 링크와 함께 마무리 하도록 하겠습니다 필자가 작업하면서 마주친 삽질 포인트 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..
화면 이동을 tracking 하는 용도로 사용할 때 RouteObserver를 사용하면 간단합니다 void main() { runApp(MaterialApp( home: const MyApp(), navigatorObservers: [CommonRouteObserver()], )); } MaterialApp의 navigatorObservers에 등록을 해주고 RouteObserver를 상속받은 클래스의 기능을 정의해줍니다 class CommonRouteObserver extends RouteObserver { void _saveScreenView( {PageRoute? oldRoute, PageRoute? newRoute, String? routeType}) { debugPrint( '[track] sc..
먼저 UUID는 범용 고유 식별자로(쉽게 말해 특정 기기의 고유값)으로 개발을 할 때 어떤 기기에 어떤 패키지가 설치되어 있는지 등을 트래킹할 때 사용할 수 있는 고유 값 입니다 이전에 device info plus에서 가져다가 썼었는데, 필요 이상의 데이터를 가지고 왔었고 더군다나 4.0.0버전에서는 가장 필요한 친구(?)를 빼버렸습니다 Breaking change Remove AndroidId getter to avoid Google Play policies violations 구글 정책에 위반되는 부분을 피하려고 한다는데 관련 자료를 검색해보니 광고 ID관련한 부분 문제인거 같습니다 (링크 : https://support.google.com/googleplay/android-developer/ans..