†IPFSをコマンドラインで実行しながら学んでいく小ネタ~動画ファイルの保存と再生~ †

IPFSを動画ファイルの保存と再生に使うこともできます。

mp4の保存と再生

いつも通りipfs addコマンドでmp4の動画ファイルを追加します。

$ ipfs add -q <<path_to_movie_file>> | tail -n1

※ -qオプションを使用することでハッシュのみの出力にできます

※ tail -n1により、最上位フォルダーのハッシュのみが出力されるようにします

ローカルゲートウェイから動画ファイルにアクセスするURLは、

http://localhost:8080/ipfs/<<最上位フォルダーのハッシュ>>　となります。

ブラウザからアクセスした時は、

このようにブラウザに組み込まれているプレイヤーで再生できました。

$ curl -I http://localhost:8080/ipfs/QmQkL8yboMWQVtGt56a2gKc4NaUiSTH2hxAkz3RxuEbt3F
HTTP/1.1 301 Moved Permanently
Accept-Ranges: bytes
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Headers: Range
Access-Control-Allow-Headers: User-Agent
Access-Control-Allow-Headers: X-Requested-With
Access-Control-Allow-Methods: GET
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Content-Length
Access-Control-Expose-Headers: Content-Range
Access-Control-Expose-Headers: X-Chunked-Output
Access-Control-Expose-Headers: X-Ipfs-Path
Access-Control-Expose-Headers: X-Ipfs-Roots
Access-Control-Expose-Headers: X-Stream-Output
Cache-Control: public, max-age=29030400, immutable
Content-Length: 11916526
Content-Type: video/mp4
Etag: "QmQkL8yboMWQVtGt56a2gKc4NaUiSTH2hxAkz3RxuEbt3F"
Location: http://bafybeibdzbijfwavnorsaoe26w3m6w44mlavrhwpmtg5xzywymt667wkby.ipfs.localhost:8080/
X-Ipfs-Path: /ipfs/QmQkL8yboMWQVtGt56a2gKc4NaUiSTH2hxAkz3RxuEbt3F
X-Ipfs-Roots: QmQkL8yboMWQVtGt56a2gKc4NaUiSTH2hxAkz3RxuEbt3F
Date: Mon, 11 Jul 2022 08:14:45 GMT

curlでレスポンスヘッダーを除いてみると、

Content-Typeはきちんとvideo/mp4になっていますね。

hlsでも同じようにアクセスできる？

mp4のファイルをhlsに変換してからipfsに追加してみます。

hlsにするコマンド例)

ffmepgを使って変換します。オプションは特に指定しませんでした。

$ ffmpeg -i sample-15s.mp4 ./hls/sample-15s.m3u8
$ ls -la hls
sample-15s.m3u8
sample-15s0.ts
sample-15s1.ts

このようにm3u8とtsファイルが生成されます。

ではこのhlsフォルダをipfsに追加してみます。

$ ipfs add -r hls
added QmVw9q9TUdPPFqkg7yESpJn9yi7vRGbbQgb7TUSX8J3bp5 hls/sample-15s.m3u8
added QmUexgWEcJUrHMNVNPRUJ3sNsYjqgdv79u3P1jEPyudEr3 hls/sample-15s0.ts
added QmRniMzFBHj9tC11Yu9kdrRrpqy6efkTFmmEgQySYj987P hls/sample-15s1.ts
added QmZ1CUAFpWPRaSYmbrAMM8nT74MyHeP9LZr5cesmab4NfE hls

動画プレイヤーでm3u8のインデックスファイルを指定するとhlsの再生ができるようになるので、ipfsでも同じように

http://localhost:8080/ipfs/m3u8のハッシュ>> でローカルゲートウェイ経由でアクセスしてみましょう。

hls再生プレイヤー

hlsはchromeでは再生できないので、hls.jsを使います。

basic-usage.html をダウンロードし、hlsファイルのパスをipfsのurlに変更します。

20行目のhls.loadSourceの箇所です。

例）

hls.loadSource('http://localhost:8080/ipfs/QmVw9q9TUdPPFqkg7yESpJn9yi7vRGbbQgb7TUSX8J3bp5');

ブラウザでhtmlファイルを表示してみたら、

クルクルがずっと続いて再生はされませんでした。

m3u8のインデックスファイルの読み込みはOKでしたが、tsファイルの読み込みができていないようです。

インデックスはこのようになっていて、

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:8
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:8.341667,
sample-15s0.ts
#EXTINF:7.140467,
sample-15s1.ts
#EXT-X-ENDLIST

プレイヤー側は http://bafybeidq3b547z7mnohv4ytpz7jk2zzllslnkduv4en2zzhbkqutsdfmgi.ipfs.localhost:8080/sample-15s0.ts といった感じでアクセスしようとしていますが、これはもちろん404となってしまいます。

実際はipfsのゲートウェイを介したurlにならないといけない。

hls.jsだけでは再生は難しそうです。

色々とドキュメントを漁っていたところ、

IPFSをJavascriptで操作できるライブラリであるJS-IPFSというもので IPFSによるビデオストリーミングする例がありました。

go-ipfsを使用してコマンドライン上からIPFSにアクセスしていましたが、次回からはjs-ipfsを使ってプログラムからでもIPFSに対する操作ができることを学んでいきたいと思います

参考

• ビデオを保存して再生する