Never give up

최근에1. aws s3에 업로드 되는 파일이 보기 편하면 좋겠다(링크, 날짜, 해당 파일 정보)2. 에러 발생시 에러대응 가능하도록 트래킹 할수있게 해달라라는 요구를 받아서 비개발자가 보기에 가장 편한방식이 뭐가 있을까 고민해봤습니다 먼저 개발진행된 상황으로는1. 특정 pc에만 배포되어있는 react, node2. 외부 서버 없음3. 해당 pc는 유저들이 사용하는 pc 그래서 고민해봤던게 2가지로slack을 사용하는 환경으로 webhook추가(빠른 알람 및 대응)google spread sheet를 사용해 줄추가를 해보게 됐습니다 webhook은 url이랑 data약속만 지키면 되니 건너뛰고 예제를 만들어봤습니다(사실 대부분이 url이랑 약속만 잘지키면 됩..)export const appendToGoo..

대부분의 다국어 지원 서비스를 개발할 때, 비개발자랑 같이 진행하게 되는데 json만 던져주고 알아서 수정하라기에는 난이도가 있다보니 google spread sheet를 공유하면서 작업하는게 더 생산성이 높다 생각합니다 그래서 간단하게 예제를 만들어봤는데(오랜만에 localization 작업하다가 정리 안해놨더니 다시 작업할 때 삽질 포인트를 반복해서 적는건 안비밀) 먼저 필자가 원하는 저장경로는 대략 /[lang code]/common.json으로 경로가 다르다면 구현할 때 해당 부분을 조금 신경써주시면 될거 같습니다const Papa = require("papaparse");const fs = require("fs/promises");async function fetchTranslations() {..

최근 여러개의 카메라를 제어할 일이 생겼는데 한번에 모든 카메라를 보여주는 형태는 아니고 원하는 시점에 카메라를 스위칭 후 화면에 보여주고 해당 화면을 원하는 형태로 편집 후 녹화해 주는 기능이 필요했습니다처음에 고민했던 부분은 카메라를 껏다 켯다 해보는거 였는데 media recorder n개를 사용해서 각각 녹화 후 timeline에 맞게 ffmpeg으로 붙여주는 번거로운 작업이 예상 되었고 지연이랑 플리커링 부분 그리고 만약 카메라가 원하는 시점에 안켜지면 서비스 품질이 떨어질거라 예상해 다른 방법을 선택했습니다 1. streaming은 계속 진행2. canvas를 이용해서 카메라 보여주기3. 시간 혹은 특정 이벤트에 따른 video 스위칭4. canvas를 media recorder로 녹화 그럼 ..

(해당 작업은 1.3 .AppImage만 다운로드 가능한 시점에 만들어졌습니다)사용하는 우분투 pc에 cursor ide를 설치하려고 보니 조금 귀찮은 설정이 필요하더군요 간단하게 프로세스를 누가 정리해놔서 확인해보니(링크 : https://gist.github.com/evgenyneu/5c5c37ca68886bf1bea38026f60603b6) 1. appImage 설치2. libfuse2 설치3. appImage 실행 가능하도록 변경4.1 script로 실행4.2 파일로 만들기 뭐 한번 해놓으면 문제 없지만 앞으로 사용할 pc마다 하는건 여간 귀찮은일이 아닐 수 없습니다 그래서 자동화를 한번 해봤습니다 프로세스를 간단히 설명드리자면1. curl을 이용해 cursor appimage download2...

해당 부분에서는 구현한 코드 깃헙 주소와 결과물 gif 그리고 작업하던중 발생한 문제에 대해 공유해보고자 합니다   서버쪽 작업하면서 가장 시간 많이잡아먹은 부분은 다름아닌 nodemon문제 였습니다 nodemon default가 js나 ts가 변경될 때 재시작 되는 특성을 가지는데 ts도 아닌 바이너리 파일(segment.ts)가 변경될때마다 서버가 재시작이 돼서 api는 cancel됐는데 영상은 남아있는 상황이 생겼던거죠.. 이거 원인 찾느라 들인 시간이 구현하는 부분보다 더 많이들었었습니다.. 그리고 클라이언트쪽에서 테스트하는데 serving url잘못 잡아놔서 발생했던 문제가 조금 있었습니다.. 해당 부분을 조금 더 빠르게 지나갔으면 더 빨리 완성했을텐데 하는 아쉬움이 남았습니다.. 전체 예제 깃..

클라이언트쪽은 코드가 상대적으로 많을예정인데 일단 영상 플레이어 자체가 이런저런 기능이 들어가다보니 상대적으로 많아진것도 있습니다 먼저 api 구현부분부터 보면 services/api.tsexport default class Api { private instance: AxiosInstance; constructor( baseURL = "/", timeout = 60000 ) { this.instance = axios.create({ baseURL, timeout, }); this.instance.interceptors.request.use( (config) => { return config; }, (error: Ax..

이번에는 일반 영상을 올릴 때, FFmpeg으로 변환하는 과정과 영상 데이터를 클라이언트에 전달하는 부분을 보도록 하겠습니다 index.tsconst app = express();const options = { origin: "http://localhost:3000", credentials: true, optionsSuccessStatus: 200,};app.use(cors(options));app.use(express.json());app.use(express.urlencoded({ extended: true }));app.use("/api/video", video);app.listen(8080, () => { console.log(`[server] running on localhost:${80..

유튜브, 숲 등 영상 스트리밍 서비스를 하는 곳에서 주로 HLS를 사용하는데 왜 사용하는지 어떤 특징을 가지고 있는지 간단하게 알아보겠습니다 먼저 HLS는 HTTP Live Streaming으로 적응형 비디오 스트리밍 프로토콜입니다 WebRTC와 달리 네트워크 환경에 따라 비트레이트를 조정해 느린 인터넷 환경에서는 저화질, 빠른 인터넷 환경에서는 고화질로 품질을 전환합니다 다만 WebRTC는 실시간성이 좋지만 HLS는 지연시간이 상대적으로 깁니다 Low Latency HLS라는것도 있는데, 영상통화나 회의, 게임등을 할때는 WebRTC를 선택해야됩니다 그리고 HTTP 기반이다 보니 별도의 미디어 서버가 필요하지 않고 CDN과 쉽게 통합이 가능해서 글로벌 서비스에 조금 더 적합합니다 그외에도 라이브 스트리..