본문 바로가기
반응형

전체 글280

🐊 6월 4주차 회고 🐌 hls 원리 이해하기 hls 통신 방법을 이해할 필요성을 이번주에 느꼈다. 원리를 모른상태에서 개발을 하고 있어서, 요즘 생각보다 일의 진전이 없는것같다. 그래서 hls,m3u8,ts 등등 어떻게 동작이 이루어지는지 알아볼 필요가 있다. 🐙 현 회사에서의 한달 현재 회사에서 한달정도 다니고 있다. 스트리밍 서비스를 제공하고 있었고, 처음 해보는 스트리밍 서비스 경험이라, 쉽지 않았다. 아직까지도 많이 부족한 면이 많다. 그리고 현재 회사가 스타트업이다보니 아직 여러가지 준비중인 것들이 많다. 그래서 아직 안정화 작업이 계속해서 진행중이다. 그 안정화 작업을 하는 과정에서 내가 무엇을 해야할지 고민이다.. 2023. 6. 25.
📫 css animation 성능 비교 🎊 성능비교 글을 쓰게 된 이유 이번에 모바일웹에서 장시간으로 켜두면 핸드폰이 빨리 배터리가 닳는다는 말이 나왔다. 그래서 성능차이를 알아보니, 브라우저 CPU가 꽤 많이 잡아먹고 있었다... 원인은 렌더링이 많아져서 연산이 많이 이루어진걸로 확인되었다. "Layout" 많이 이루어져서 장시간 켜두면 CPU 사용량이 많아서,.. 배터리가 빨리 닳는다. 🔑 scaleY , height 성능차이 animation을 쓸 경우 width,height를 쓰면 Layout이 많이 일어난다. 그러므로 Layout 줄이는 방향으로 가야한다. 아래 사진은 height를 이용하여 animation 사용했을때의 Perfomance와 구현화면 이다. "Layout" 빈번하게 일어난것을 볼 수 있다. 아래는 "ScaleY"를 .. 2023. 6. 22.
😆 6월 3주차 회고 🐡 Video 정책 확인 기본적으로 chrome도 그렇고 Video같은 경우 자동재생할 경우 음소거 상태에서만 가능하다. 항상 사용자의 액션(버튼클릭)을 해야만 가능하다. 그 전에는 Video를 쓸일이 많지는 않아서 잘 몰랐는데, 그렇다는것을 이번에 처음 알았다. 그리하여 어떻게하면 자동재생이 아니더라도 사용자가 편하게 Video,Audio를 실행시킬수 있을지 고민해볼 필요도 있다. 🦟 Hls.js Retry 하기 Hls.js를 쓰다보면, 어떤 에러든 발생 할 수 있다. NETWORK ERROR, MEDIA ERROR 가 발생 할 수 있는데, 그것을 Retry해보는 것을 이번에 해보았다. Retry는 성공했으나 어떻게 복구 시킬것인가는 고민을 좀 더 해볼 필요가 있다. 🦎 Canvas,WebWorker .. 2023. 6. 18.
Hls.js 사용 📺 HLS(Http Live Streaming) HLS(HTTP 라이브 스트리밍)은 가장 널리 사용되는 비디오 스트리밍 프로토콜입니다. HTTP "라이브" 스트리밍이라 불리지만 주문형 스트리밍이자 동시에 라이브 스트리밍입니다. HLS는 비디오 파일을 다운로드할 수 있는 HTTP 파일 조각으로 나누고 HTTP 프로토콜을 이용하여 전송합니다. 클라이언트 장치는 이러한 HTTP 파일을 로드한 후 비디오로 재생합니다. 🔋 Hls.js Hls.js는 http live streaming을 구현하는 javascript 라이브러리입니다. ios/safari 같은 경우 빌트인이 되어있기때문에 지원하지는 않고, 다른 브라우저에서는 Hls.js를 통해서 스트리밍이 가능합니다. 💰 Hls.js 라이브러리 사용 cdn 방식으로.. 2023. 6. 14.
반응형

티스토리툴바