Never give up

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

이번에는 일반 영상을 올릴 때, 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 케이블을..