RTSP로 전송되는 CCTV영상을 브라우저에서 스트리밍하는 과정에 대해 정리하고자 합니다. 요구사항은 간단했습니다. RTSP URI를 이용하여 브라우저에서 스트리밍 하는 것입니다. 단, 이때 스트리밍되는 데이터들은 백엔드를 거쳐서 프론트엔드로 전송되어져야 합니다. 기존방식 - HLS로 스티리밍 애초에 브라우저에서는 RTSP 프로토콜을 지원하지 않기 때문에, RTSP URI를 브라우저에서 직접 사용할 수는 없습니다. 이 방식은 RTSP로 받은 데이터들을 브라우저에서 지원하는 HLS 방식으로 convert(m3u8파일들)해서 해당 파일들을 프론트엔드로 전송해주는 방식이었습니다. 참고로 m3u8파일은 아래와 같은 구조를 가지고 있습니다. // 이 파일이 M3U8플레이 리스트 라는 것을 의미 #EXTM3U //..
전체보기
Vue3 CompositionApi에서 Svg를 사용하는 방법들에 대해 소개하고, 개인적으로 가장 효율적이라고 생각되는 Svg 컴포넌트화 방식에 대해 자세히 설명한다. Loading a standard HTML SVG vue의 template부분에 직접적으로 svg파일을 사용하는 방식으로 크게 아래 두가지가 있다. vue의 template안에 직접 태그 작성 태그의 src에 svg파일의 위치 연결 장점 크게 고민할 필요 없이 사용가능하며, svg 코드 값을 직접 수정, 변수를 전달 할 수도 있다. 단점 svg파일이 조금만 복잡해져도 가독성이 매우 저하된다. vue-svg-loader 사용 vue에서 직접적으로 svg를 load 할 수 있도록 도와주는 vue-svg-loader 라이브러리가 있다. 아래 코..
AnyORM을 사용하다가 개인프로젝트에 새롭게 prisma를 도입했다. 전체적으로 너무 만족스러웠지만, 고질적인 Timezone이슈가 있다는 것을 보고 어떻게 해결했는지 정리해본다. prisma Date 타입지정 - DateTmie @db.Date Mysql은 날짜관련 여러가지 타입을 제공하고 있지만, 내가 싶었던 날짜 형식은 Date("YYYY-MM-DD")였다. Prisma는 기본적으로 모든 DateTime을 Date 오브젝트로 리턴하기 때문에, 이 부분을 설정해줘야 했다.(프리즈마 참고문서) 1. shema.prisma 설정 스키마에서 due_day라는 필드 타입을 아래처럼 설정해 주었다. due_day DateTime @db.Date 2. TZ 이슈 발생 나의 서비스는 일정관리를 해주는 서비스였..
CS50에서 제공하고 있는 SQL강의를 듣고, 그 내용에 대해 정리하고자 한다.(강의링크) Relations 하나의 데이터베이스는 여러 개의 테이블을 가질 수 있고, 각 테이블들은 관계를 가질 수 있다. 이러한 테이블들간의 관계는 아래 중 하나로 표현 될 수 있다. 1:1관계 1:N관계 M:N관계 예를 들어 간단히 설명해 보자. 한 명의 작가가 하나의 책만 쓸 수 있다면, ➡ 작가와 책은 1:1관계를 가질 것이다. 한 명의 작가가 여러 개의 책을 쓸 수 있다면, ➡ 작가와 책은 1:N의 관계를 가질 것이다. 하나의 책은 여러 명의 작가가 함께 집필 할 수도, 한 명의 작가가 여러 개의 책을 쓸 수도 있다면 ➡ M:N의 관계를 가질 것이다. Entity Relationship Diagrams(ERD) - ..
CS50에서 제공하고 있는 SQL강의를 듣고, 그 내용에 대해 정리하고자 한다.(강의링크) Requirements 1. cs50 강의자료 강의에 필요한 자료들은 아래 링크에서 다운 받을 수 있다. https://cs50.harvard.edu/sql/2023/weeks/0/ 2. Sqlite3 터미널 포맷팅 sqlite3를 터미널에서 쓸 때 보기 편하게 하기 위해 아래처럼 세팅하자. vi ~/.sqliterc //아래 부분 추가 && wq .mode box .headers on .separator ROW "\\n" .nullvalue NULL Database? 1. 데이터베이스 사용 이유 데이터들을 저장하고 관리하기 위해 엑셀과 같은 스프레드 시트가 아닌 데이터 베이스를 사용 했을 때 얻을 수 있는 이점은..
Docker파일 안에서 prisma migrate를 하기 위해 npm run migrate:dev를 RUN 키워드와 함께 실행 시켰지만, Error: P1001 에러와 함께 db컨테이너에 접속 할 수 없다는 메시지를 보게 되었습니다. 잊지 않기 위해 어떻게 해결 하였는지 정리해봅니다. 혹시 컨테이너간에 어떻게 통신해야 하는지 잘 모른다면 이전에 올린 포스트를 참고해 주시길 바랍니다. (docker-compose로 db, 백엔드 컨테이너 연결 포스트) Docker Prisma 연결 실패 앞선 포스트에서처럼 커스텀 브릿지 설정을 통해 백엔드 컨테이너 내부에서 db컨테이너로 연결이 잘 되었지만, docker-compose up -d 명령어를 이용하면 항상 아래와 같은 에러가 발생했습니다. 이 당시 나의 doc..
