2023/12/03 4

방예담 <하나만 해(Only One)>에 숨은 저스틴 비버의 노래들

저스틴 비버의 팬이자 코리안 저스틴 비버인 방예담의 노래를 듣다 깜짝 놀랐다! 가사에 저스틴 비버의 노래가 마치 팬송처럼 섞여나오고 있었기때문이다 ㅋㅋㅋ 빌리버는 빌리버를 알아보는 법... 오랜만에 저스틴 비버 노래를 정주행 할 겸, 방예담의 에 숨은 저스틴 비버 노래들을 알아보도록 하겠다. (주관적 억지 있음) Baby just believe in yourself 자꾸 널 속이려 해 다른 누구보다 멋진 남자가 돼주고픈 맘을 왜 그렇게 멋대로 흔들어 놓고선 baby "believe" Justin Bieber - Believe 앨범의 수록곡 Believe다. 저스틴 비버의 팬송이라고 보면 된다. 난 이 노래를 그렇게 자주 듣진않지만 Believe 앨범, 특히 Acoustic 버전은 아주 명반이다. 얼마나 ..

나/이슈 2023.12.03

DASHI 채팅, 영상 Preview 업데이트

벌써 일요일 2시인가...? 저지 아이즈도 해야하는데 Dashi 업데이트에 토요일 전체와 일요일 절반을 날려버렸다. 하지만 지금은 이게 저지 아이즈보다 재밌으니까 어쩔 수 없다... 오늘의 업데이트 어제 아침에 업데이트 계획을 세우고, 하고싶은거 부터 해봤는데 트위치 채팅 재생, Seek 프리뷰 이미지 업데이트에 성공했다. 사실 이것만으로도 엄청 쓸만해진 것 같다. - 영상 녹화를 하면서 채팅 서버에서 채팅을 받아와 자막 파일로 구성 - 녹화된 영상에 대해서 썸네일 생성 후 프리뷰용 Sprite 이미지 생성 VOD에 대한 고민 Twitch 계정 연동은 사실 연동해서 뭘 할 기능이 없어서 안해도 될거같고... VOD 다운로드가 문제다. 실제로 몇일 돌려보니 방송하나의 용량이 18GB 분량이 되는걸 목격했다..

나/이슈 2023.12.03

[VideoJS] 영상 타임라인에 프리뷰를 표시하는 방법

유튜브나 트위치에서 SeekBar에 마우스를 가져다대면, 특정 주기마다 영상 프리뷰가 살짝살짝씩 보인다. 당연히 될거라고 생각했던 기능이지만 이 프리뷰는 (당연히 ㅎㅎ) 손수 만들어주어야한다. 과정은 다음과 같다. 1. 영상을 특정 Interval 마다 잘라서 썸네일을 만든다. 2. 만들어진 썸네일을 한 장의 Sprite 이미지로 만든다. 3. VideoJS에 videojs-sprite-thumbnails Plugin을 적용해서 Sprite를 영상에 설정해준다. 나는 ts파일이 이미 10초 단위로 쪼개져있었기 때문에 폴더안의 모든 파일을 돌면서 한 장씩 썸네일을 만들어주었다. ffmpeg -i -s 160x90 -vframes 1 .jpg 그리고 만들어진 사진들을 imagemagick의 montage를 ..

영상자막을 채팅처럼 표현하기

DASHI 서비스를 계속 발전시키는 도중에, 트위치 채팅도 다시볼 수 있었으면 좋겠다고 생각했다. 문제는 채팅이 영상과 맞게 정확한 시간에 올라와야한다는 건데, 그래서 채팅을 WebVTT로 만들었다. 즉 영상 자막이 된다는 건데, 일반적인 영상 자막처럼이 아니라 세로로 스크롤하며 올라오는 채팅포맷이어야 했다. var track = video.textTracks[0]; track.oncuechange = function() { var cue = this.activeCues[0]; if (cue) { console.log(cue.text); } }; 영상에 자막을 추가하고, 영상자막이 변경될때마다 console에 로그를 찍는 코드다. 이를 이용해서 Container에 채팅 Element를 하나씩 추가하고 스..