JavaScript4 [JS] 비디오에서 구간별 썸네일 추출하기 - 1편 안녕하세요. 오늘은 비디오에서 썸네일을 추출하는 방법에 대해서 알아보겠습니다. 간단해 보이지만 전혀 간단하지 않은 이슈였습니다. 1편은 추출하는 방법, 2편은 Safari에서 발생하는 썸네일 추출 불가 문제를 해결하는 방법에 대해서 알아볼 예정입니다. 참고로 Instagram, TikTok도 해결하지 못한 이슈였지만, 저는 해결했습니다. 으하하 Meta 비켜!! 구현 시나리오비디오 파일을 input으로 받는다 동적으로 생성한 video element에 비디오 파일을 넣는다video element의 currentTime을 통해서 원하는 위치로 이동한다.seeked 이벤트로 재생 위치 변경을 감지하고 해당 화면을 캔버스에 그린다캔버스에 그린 이미지를 Blob 객체로 저장 후 ObjectURL로 변경해서 i.. 2025. 2. 8. [JS] canvas를 이용해서 mp4 영상에서 배경 제거하기 (크로마키 기능) 안녕하세요. 오랜만에 글을 쓰는 것 같습니다. 오늘은 배경색이 있는 mp4 파일에서 배경을 제거하는 방법을 알아보겠습니다. PoC로 만들고 꽤 괜찮았지만, 여러 문제가 있어 결국 다른 방법을 택했습니다. 하지만 만들었던게 아까워서 글로 남깁니다. 기능을 개발하게 된 계기요약30MB apng 렌더링 -> 다운로드 속도가 너무 느림 -> 용량 압축을 위해 webp 사용 -> 사파리에서 영상이 끊기는 문제 -> mp4 시도 -> 배경색이 투명하게 되지 않는 문제 요즘은 회사에서 이벤트 페이지를 개발하고 있습니다. 이벤트 페이지의 특성상 최대한 가볍게 만들어서 빠르게 유저와 인터랙션 해야하는데요. 초기 로딩을 빠르게 하기 위해 react 같은 라이브러리 없이 vanilla js만을 이용해서 개발하고 있습니다. .. 2025. 1. 25. [JS] iterable, iterator 살펴보기 - Generator 1 안녕하세요! 오랜만에 기술 포스트를 작성하네요. 이번 글은 시리즈처럼 작성될 예정입니다. babel이 Generator를 transpile한 코드를 이해하고, 어떻게 작동하는지 이해하기 위해 필요한 지식들을 미리 정리합니다. 개요 JS에서 spread operator(...) 또는 for...of를 통해서 배열, 문자열 등을 펼치고 순회할 수 있습니다. Map, Set도 순회가 가능하다는데 이걸 다 암기하거나 매번 실험 할까요?? 이렇게 해도 되긴 합니다. 하지만 브라우저가 어떻게 순회 가능하다고 판단하는지 이해한다면, 암기하지 않아도 되고 다른 코드를 이해할때 큰 도움이 됩니다. Iterable, Iterator protocol iterable, iterator protocol 자체는 브라우저에 내장되.. 2023. 10. 16. [WEB] js docs에 기여를 했습니다. 캬캬캬!!! 행복한 추억 요즘은 DOCS를 시간날때 읽고 있습니다. 다른 글들을 찾아보면 대부분 docs에서 번역해서 올려준 정도더라구요. 가끔 예제를 볼 떄 말고는 docs가 정확한것 같습니다. 또한 자신감이 생기고요. 내 말에 믿음이 생기잖아요? 저번에 포스팅을 하면서, 구조분해 할당에 대해서 찾아봤습니다. 여기가 한국이라 그런지, 한국어로 먼저 나와서 한국어로 읽었습니다. 근데 예제를 아무리 봐도 잘 와닿지가 않아서, 영어로 봤습니다. 그랬더니 아니 !!! 오타가!!! 외국어 example이 훨씬 와닿게 되어있던것입니다!!!!! 그래서 바로 신고를 했습니다. pr이 accept이 되고, merge가 되었습니다 짞짞짞!!!! 최초로 좀 큰 오픈소스에 기여를 했습니다!! js mdn에 기여를 했어요!!!! 이전에 이렇게 되.. 2021. 7. 17. 이전 1 다음 728x90
