Perl で作るメディアストリーミングサーバー

Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.

Perl で作るメディアストリーミングサーバー

Hideo Kimura


アジェンダ

自己紹介ストリーミング技術の種類 Perl + HTML5 での実装まとめ


自己紹介


自己紹介

木村秀夫 (@hidek) 株式会社ディー・エヌ・エー

⁃ 技術系執行役員⁃ Mobage オープンプラットフォーム統括


ところで…

とある転職サイトのインタビューでこんなことを言っていた…

「コードを書かないマネージャーはありえない」

今、仕事でコード書いてますか？

書いてますか？書いてますか？ … すみません

… っていうか、仕事でコード書いたら怒られます＞＜


この人に


実際…

プレイングマネージャー難しい局所最適 vs 全体最適組織の規模が大きくなればなるほど薄く広

く見なければいけないだけどコード書きたいジレンマ…


なので…

家で細々と書いてます

「自分を支える技術」で、今回のお題は…


今回のお題

会社で音楽聴きながら仕事したい家にある音楽ファイル全部はスマートフォンに入りきらないデスクトップもいいけどできればスマートフォンもデバイスとしたい

そうだ！ストリーミングサーバーを作ろう！

Perl で書く必要ないけど書きたいから書こう！ここまでスピリチュアルな話、こっから趣味の話


ストリーミング技術の種類


ストリーミングとは

マルチメディアコンテンツ ( 映像や音声 ) をダウンロードしながら再生する技術

ストリーミングを支える技術⁃ 圧縮 / 転送 / 制御

圧縮プロトコル⁃ MPEG-2 / AAC / Vorbis / WM(V|A)

転送 / 制御プロトコル⁃ 独自プロトコル (RTMP/MMS) vs HTTP

今回のスコープは転送、制御プロトコルをどうするか


ストリーミングの種類 : TCP/UDP Streaming

専用プロトコルと専用ソフトを使うことによって実現する

Adobe:

⁃ RTMP(E/S)

⁃ Flash Player & Flash Media Server

Microsoft:

⁃ MMS

⁃ Windows Media Player & Windows Media Server

Perl 実装 : Kamaitachi by typester

⁃ FMS の Perl 実装⁃ AnyEvent


ストリーミングの種類 : TCP/UDP Streaming (RTMP/MMS)

Pros:

⁃ ライブ配信ができる⁃ コンテンツ保護ができる⁃ マルチビットレート対応ができる

Cons:

⁃ 専用クライアント・サーバーソフトが必要 = Flash & FMS

スマートフォンの時代になり iOS で Flash が使えない = 致命傷⁃ 今回 Kamaitachi を使わない理由の一つ


ストリーミングの種類 : HTTP Progressive Download

いわゆる先読みダウンロード読み込んだところまでで seek 可能

Pros:

⁃ HTML5 ブラウザーで再生可能⁃ HTTP サーバーは特に対応しなくていい

Cons:

⁃ 開始位置の指定はできない⁃ ライブストリーミングはできない⁃ コンテンツ保護はできない⁃ マルチビットレート対応はできない

厳密にはストリーミングではない


ストリーミングの種類 : HTTP Streaming (HLS/HDS)

メディアファイルを 10 秒程度の断片と分けてプレイリストで管理する

Apple: HLS (HTTP Live Streaming)

Adobe: HDS (HTTP Dynamic Streaming)



HLS

⁃ Apple が提唱⁃ IETF で標準化• http://tools.ietf.org/html/draft-pantos-http-live-streaming-11

⁃ 対応クライアント• iOS 3.0+

• Android Browser 3.0+

• Flash Player 11+

• QuickTime 10+

⁃ 対応サーバー• 普通の HTTP サーバー

http://tools.ietf.org/html/draft-pantos-http-live-streaming-11





サーバーの設定⁃ mime type の設定を加えるだけ⁃ Apache だったら

クライアント⁃ video タグ

AddType application/x-mpegURL .m3u8AddType video/MP2T .ts

… <video width="1280" height="720" src=”playlist.m3u8" ……



Pros:

⁃ 多くの HTML5 ブラウザーが対応している⁃ スマートフォンでも動く⁃ マルチビットレート対応ができる⁃ ライブ配信ができる⁃ HTTP サーバーは mime types の設定のみ

Cons:

⁃ segmenter などでファイルを分割してプレイリストを用意する必要がある


ストリーミングの種類 : HTTP Pseudo-Streaming

HTTP 1.1 の Range Request と Partial Response を利用した疑似ストリーミング

ダウンロード開始位置を byte で指定 (Range Request)

指定された位置からコンテンツを返す (Partial Response)

これにより seek が可能



Range Request

Partial Response

GET /music.mp3 HTTP/1.1Host: localhostRange: bytes=500-999…

HTTP/1.1 206 Partial ContentAccept-Range: bytesContent-Length: 500Content-Range: bytes 500-999/99999…



サーバーの設定⁃ MP4 のストリーミングをする場合にはモジュール組み込みが必

要⁃ Apache: mod_h264_streaming

⁃ lighttpd: mod_h264_streaming

⁃ nginx: http_mp4_module

クライアント⁃ video タグ



Pros:

⁃ HTML5 ブラウザーで再生可能⁃ スマートフォンでも動く⁃ 多くの HTTP サーバーはモジュール組み込みで対応できる

Cons:

⁃ ライブストリーミングはできない⁃ コンテンツ保護はできない⁃ マルチビットレート対応はできない


ストリーミングの種類

HTTP TCP/UDP

Progressive Download Pseudo-Streaming HLS/HDS RMTP/MMS

ライブストリーミング

× × ○ ○

動的ビットレート × × ○ ○

コンテンツ保護 × × △ ○

ファイルの設置そのまま置けるそのまま置ける断片に分割して置くそのまま置ける

シーク位置最初からバイト単位断片 + バイト単位時間単位

クライアントソフト HTML5 ブラウザ Flash / WMP

サーバーソフト HTTP サーバー FMS / WMS


今回の要件

ライブ配信 : いらないコンテンツ保護 : 自分のファイルだからいらないマルチビットレート制御 : 自宅 or 会社なのでいらないコンテンツ : すでにリッピングしてるファイルを使いたい

HTTP Pseudo-Streaming でよい


ストリーミングの種類

HTTP TCP/UDP

Progressive Download Pseudo-Streaming HLS/HDS RMTP/MMS

ライブストリーミング

× × ○ ○

動的ビットレート × × ○ ○

コンテンツ保護 × × △ ○

ファイルの設置そのまま置けるそのまま置ける断片に分割して置くそのまま置ける

シーク位置最初からバイト単位断片 + バイト単位時間単位

クライアントソフト HTML5 ブラウザ Flash / WMP

サーバーソフト HTTP サーバー FMS / WMS


Perl + HTML5 での実装


Perl + HTML5 での実装 : Perl

サーバーサイド⁃ Partial Response: Plack::Middleware::Static::Range

⁃ by audrey

…builder {…enable 'Plack::Middleware::Static::Range', path => qr{^(?:/mp3/)}, root => '.';…


Perl + HTML5 での実装 : Perl デモ

Progressive Download

⁃ http://localhost:5000/pd/music.mp3

⁃ すぐ再生はされるけど seek できない HTTP Pseudo-Streaming

⁃ http://localhost:5000/hps/music.mp3

⁃ seek できる

*.mp3 などの mime type が URL に含まれると、ブラウザが勝手にタグを描画してくれる

Plack::Middleware::Static::Range では Accept-Range ヘッダを返してないので、一部ブラウザだと動かないかも ( ブラウザ実装依存 ?)

簡単ですね！

http://localhost:5000/pd/mp3.mp3




Perl + HTML5 での実装 : HTML5

HTML5 クライアント⁃ video/audio タグでガリガリ書くのしんどい⁃ jPlayer http://jplayer.org/

http://jplayer.org/

http://jplayer.org/

http://jplayer.org/


Perl + HTML5 での実装 : HTML5

jPlayer

⁃ メディアプレイヤー written by JavaScript

⁃ jQuery プラグイン⁃ js だけではなく swf もついてくる⁃ skin 対応

$(‘#jp').jPlayer({ ready: function(event){ $(this).jPlayer('setMedia', { mp3: './mp3/music.mp3', }).jPlayer('play’);},


Perl + HTML5 での実装 : HTML5 デモ

open demo.htm


Perl + HTML5 での実装 : その他必要なもの

Web Application

⁃ 認証⁃ ファイルブラウジング⁃ プレイリスト管理⁃ Amon2

メディアクローラー⁃ 指定パス以下の mp3 ファイルを検索してファイルパスと ID3 タ

グを得してデーターベースに保存する⁃ MP3::Info

これから！！


まとめ

最近の HTML5 ブラウザはマルチメディア対応が結構充実してるので特定技術に依存しなくても良さそう

オンデマンドなコンテンツ配信であれば HTTP Pseudo-Streaming でも十分実用的

個人で使うのであれば Perl でも問題ない

余談⁃ ビジネスで使う場合には DRM などが問題になりそうなので

HLS + AES

⁃ ライブストリーミングが必要な場合にはノータイムで HLS


ホビープログラミング楽しいですよ！

偉くなったら仕事でコード書かせてもらえなくなるので今のうちですよ


Thank you!

Perl で作るメディアストリーミングサーバー

Technology

Transcript of Perl で作るメディアストリーミングサーバー