Never give up

해당 부분에서는 구현한 코드 깃헙 주소와 결과물 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과 쉽게 통합이 가능해서 글로벌 서비스에 조금 더 적합합니다 그외에도 라이브 스트리..

회사에서 진행한 프로젝트 중 CCTV와 연결하는 프로젝트가 있었습니다 맡은 역할은 프론트엔드쪽 WebRTC 연결부분이었지만 전반적인 부분을 이해하고자 간단하게 스터디 한 부분을 남겨볼까 합니다 먼저 NVR과 DVR에 대해 알아보도록 하겠습니다NVR(Network Video Recorder) : 카메라에서 디지털 신호로 변환된 영상을 네트워크를 통해 전송 후 저장DVR(Digital Video Recorder) : 카메라에서 전송하는 아날로그 영상을 디지털로 변환하여 저장먼저 공동점은 다음과 같습니다CCTV 카메라에서 수집한 영상 저장 및 관리실시간 녹화, 일정 시간 후 자동삭제 지원인터넷 연결을 통한 원격 모니터링사용자 인증, 암호 설정 등 보안 기능차이점은 다음과 같습니다카메라NVR : LAN 케이블을..

Three.js를 찍먹만 해보다가 회사에서 우연히 3D circuit viewer를 개발할 기회가 생겼었습니다 근데 어디서 이상한(?) 오픈소스 긁어온거 유지보수 하다보니 문제가 많아서 이렇게 해보면 어떨까 하고 만들어 봤습니다 링크: https://devmemory.github.io/gerber-3d-viewer/ 먼저 Gerber 파일은 PCB 제조할 때 필수적인 파일로 copper layers, solder mask, SilkScreen, Dril files등 pcb의 납땜되는 부분, 홀, 텍스트 등을 표현한 파일입니다 예제 데이터를 하나 보면 G04 Layer: BottomPasteMaskLayer*G04 EasyEDA v6.5.44, 2024-08-30 12:30:28*G04 77815516a5..

압축 파일을 다룰일이 생겨서 간단하게 예제를 만들어봤습니다 먼저 클라이언트에서 압축파일을 사용하게 됐을 때의 장점으로는1. 클라이언트가 여러개의 파일을 다운로드 받지 않아도 된다2. 서버가 파일 리스트를 조회 한 후 넘겨주지 않아도 된다3. 네트워크 리소스를 적게 사용한다4. 별도의 서버작업 없이 파일 압축이 가능하다 정도 될거 같습니다 zipUtil.tsimport { saveAs } from "file-saver";import JSZip, { JSZipObject } from "jszip";export const zipUtil = { /** - extract file list from file url */ async extractFile(url: string) { const res = awa..

어드민 작업을 할 때, excel import, export기능이 필요한 경우가 많습니다 예를들어, 일괄등록, 엑셀로 추출해서 보기 등등 엣날에 서버쪽에서 작업하는 예제를 올렸었는데, 이번에는 클라이언트에서 구현 및 유틸로 만들어봤습니다 클라이언트에서 했을때 장점으로는1. 서버쪽에 굳이 excel 라이브러리를 설치 안해도 된다2. 서버쪽 리소스를 조금이나마 덜 쓸 수 있다3. 파일업로드 방식이 아닌, json으로 데이터 교환 하기 편하다정도 있을 수 있을거 같습니다 excelUtil.tsimport * as XLSX from "xlsx";export const excelUtil = { /** - generate json from excel file */ excelFiletoJson(file: File..