일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Game js
- segment
- html2canvas
- hls.js
- Raycasting
- babel
- three.js
- code editor
- M3U8
- KakaoMap
- Image Resize typescript
- swagger-typescript-api
- Flutter
- uint8array
- HLS
- REST API
- Prism.js
- typescript
- webrtc
- userevent_tracker
- Excel
- react
- node
- Three-fiber
- Redux
- uint16array
- Babel standalone
- jszip
- web track
- http live streaming
- Today
- Total
목록M3U8 (3)
Never give up
이번에는 일반 영상을 올릴 때, 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 케이블을..