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과 쉽게 통합이 가능해서 글로벌 서비스에 조금 더 적합합니다 그외에도 라이브 스트리..