仕組み的には、カメラが対応してればHDとかでも撮れる。
別に音だけでもいけるので、ポッドキャストとかにも。(とりあえず雑に回した感じ、45分くらいは問題なく撮れた)
getUserMedia()
とかWebRTCでなんかやりたいな?注: フロントエンドの話をしています(˘ω˘ )
getUserMedia()
ね?簡単でしょ?
iOS Safari OR other browsers
↑ ↑
WebRTC
↓ ↑
Chrome or Firefox -> MediaRecorder
↓
fetch() w/ .webm
↓
Node.js -> ffmpeg -> .ts + .m3u8 = HLS
なんちゃってmonorepo風。
3つのエンドポイントがあるだけ。
/api/initialize/:liveId
/api/chunks/:liveId
.webm
を受けて.ts
へトランスコードffmpeg
が頑張ってる/api/finalize/:liveId
.m3u8
を手動で作る.ts
を数えるレベル(画質)をいくつか用意したり、リアルタイムで見れるようにもできそう。今回は雑に単一画質でアーカイブのみ。
こういうマニフェストを手書きするだけ。
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:5
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:4.0,
http://localhost:9999/live/1e26162b-2435-41c0-8140-667bf08ff072/1.ts
#EXTINF:4.0,
http://localhost:9999/live/1e26162b-2435-41c0-8140-667bf08ff072/2.ts
...
#EXTINF:4.0,
http://localhost:9999/live/1e26162b-2435-41c0-8140-667bf08ff072/99.ts
#EXT-X-ENDLIST
仕様: https://tools.ietf.org/html/draft-pantos-http-live-streaming-23
.ts
ファイルならなんでも動くEXTINF
を適当にすると、上手く再生されなくなる・・?Safari最高!
.webm
をmultipart
で受けるところにハマったくらいasync / await
も標準対応でシュッとしてていい感じなんでもいいけど合宿の度にNodeでサーバー書いてる気がする。
// こういう感じで
ffmpeg()
.input(inputPath)
.videoCodec('libx264')
.audioCodec('libfdk_aac')
.audioChannels(2)
.format('mpegts')
.outputOptions([
'-mpegts_copyts 1',
])
.output(outputPath)
.on('error', err => {})
.on('end', () => {})
.run();
ただし「Looking for a new maintainer」らしい・・・!
ffprobe
でまとめてduration
を取得する処理で出たexecFile
してもダメerr
は常にnull
なのに出る、拾えない・・NODE_ENV=production
にするとエラーが見えなくなることが判明した結局、処理タイミングを一括処理から逐次処理に変えたら出なくなった・・お手上げ\(^o^)/
こちらも3つの構成要素。
.webm
にしてサーバーへJSフレームワークとかは使ってません!
mimeType
をコンストラクタに渡せる(仕様上)#start(timeSlice)
の存在意義が不明.webm
が出力される.webm
にだけ、ヘッダがついてる.ts
に変換もできないどういうユースケースを想定した結果この実装になってるのか・・。
.webm
を結合する#start()
/ #stop()
を繰り返す.webm
ができる動画コンテナ・コーデックに関わると時間を無限に持っていかれる・・。