MPEG-DASH の Adaptive bitrate streaming を試してみる

Posted 2014年11月17日 by もりもと & filed under 開発.

先日、社内勉強会でベンダーロックインではない Adaptive bitrate streaming 方式として MPEG-DASH (以下DASH) について紹介しました。

社内ストリーミング勉強会

私自身、名前だけ知っていたものの、まだ先の話だろうと考えていました。勉強会向けにちょっと調べたらOS／ブラウザベンダーの足並みが揃いつつあります。まさに勉強会で一番勉強するのは発表者ですね。先の話どころか、いまいまの話でした。

Google: Chrome23+、Android 4.4 KitKat
Mozilla: Firefox31+ (Partial Support、MP4 が未対応？)、DASH Adaptive Streaming for HTML 5 Video
Microsoft: IE11+、Building a simple MPEG-DASH streaming player
Opera: Opera20+？、HTML5 Audio and Video Support in Opera TV Store Applications

新しいもの好きな方のために Chromecast も対応済です。MatchStick は未対応のようです。おそらくは Firefox の正式サポートを待ってからになるのかもしれません。

現時点では Adaptive bitrate streaming のデファクトスタンダードと言える HTTP Live Streaming を提供している Apple はどうでしょうか。

Adobe Primetime Support for MPEG-DASH

OS X Yosemite の Safari では対応しているようです。このニュースを Apple ではなく Adobe が報じているのもおもしろいです。iOS が DASH に対応するのか、するならいつ頃か？というのに注目が集まっています。

前置きが長くなりました。では早速ですが、DASH を試してみましょう。

ここでは、DASH の MPD スキーマを生成するために MP4Box というツールを使います。他にもいろいろなツールがあると思いますが、いくつか試してみた限りではこのツールが簡単でした。MP4Box をインストールするには、GPAC のダウンロードページを参照してください。私の環境 (Ubuntu 14.04) では、ソースをダウンロードしてきて make && make install で簡単にインストールできました。

MP4Box を使って DASH の MPD (Media Presentation Description) スキーマを作成します。ここでは10秒ずつセグメント化しますが、実際にセグメントファイルを作成するのではなく Range を定義しています。

$ MP4Box -dash 10000 -frag 1000 -rap penguin.mp4

1	$ MP4Box -dash 10000 -frag 1000 -rap penguin.mp4

以下の2つのファイルが作成されます。

$ ls
penguin_dash.mpd
penguin_dashinit.mp4

$ ls

penguin_dash.mpd

penguin_dashinit.mp4

mpd ファイルの中身をみてましょう。こんな感じの xml ファイルが作成されます。

<?xml version="1.0"?>
<!-- MPD file Generated with GPAC version 0.5.1-DEV-rev5505  on 2014-11-17T01:02:21Z-->
<MPD xmlns="urn:mpeg:dash:schema:mpd:2011" minBufferTime="PT1.500000S"
 type="static" mediaPresentationDuration="PT0H1M29.96S"
 profiles="urn:mpeg:dash:profile:full:2011">
 <ProgramInformation moreInformationURL="http://gpac.sourceforge.net">
  <Title>penguin_dash.mpd generated by GPAC</Title>
 </ProgramInformation>

 <Period duration="PT0H1M29.96S">
  <AdaptationSet segmentAlignment="true" maxWidth="640" maxHeight="360" maxFrameRate="25" par="16:9">
   <ContentComponent id="1" contentType="video" />
   <ContentComponent id="2" contentType="audio" />
   <Representation id="1" mimeType="video/mp4" codecs="avc1.42c01e,mp4a.40.2" width="640" height="360"
    frameRate="25" sar="1:1" audioSamplingRate="44100" startWithSAP="1" bandwidth="897663">
    <AudioChannelConfiguration schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011" value="2"/>
    <BaseURL>penguin_dashinit.mp4</BaseURL>
    <SegmentList timescale="1000" duration="9044">
     <Initialization range="0-1313"/>
      <SegmentURL mediaRange="1314-1249497" indexRange="1314-1465"/>
      <SegmentURL mediaRange="1249498-2316777" indexRange="1249498-1249649"/>
      <SegmentURL mediaRange="2316778-3442186" indexRange="2316778-2316929"/>
      <SegmentURL mediaRange="3442187-4644676" indexRange="3442187-3442338"/>
      <SegmentURL mediaRange="4644677-5638462" indexRange="4644677-4644828"/>
      <SegmentURL mediaRange="5638463-6708750" indexRange="5638463-5638614"/>
      <SegmentURL mediaRange="6708751-7616222" indexRange="6708751-6708902"/>
      <SegmentURL mediaRange="7616223-9214725" indexRange="7616223-7616374"/>
      <SegmentURL mediaRange="9214726-9911855" indexRange="9214726-9214877"/>
     <SegmentURL mediaRange="9911856-10094227" indexRange="9911856-9911935"/>
    </SegmentList>
   </Representation>
  </AdaptationSet>
 </Period>
</MPD>

<?xml version="1.0"?>

<MPD xmlns="urn:mpeg:dash:schema:mpd:2011" minBufferTime="PT1.500000S"

type="static" mediaPresentationDuration="PT0H1M29.96S"

profiles="urn:mpeg:dash:profile:full:2011">

<Title>penguin_dash.mpd generated by GPAC</Title>

</ProgramInformation>

<Representation id="1" mimeType="video/mp4" codecs="avc1.42c01e,mp4a.40.2" width="640" height="360"

frameRate="25" sar="1:1" audioSamplingRate="44100" startWithSAP="1" bandwidth="897663">

<BaseURL>penguin_dashinit.mp4</BaseURL>

</SegmentList>

</Representation>

</AdaptationSet>

</Period>

</MPD>

次にメディアプレイヤーとして DASH クライントの参照実装である dash.js を使います。

$ wget https://raw.githubusercontent.com/Dash-Industry-Forum/dash.js/v1.2.0/dash.all.js -O dash.all-1.2.0.js

1	$ wget https://raw.githubusercontent.com/Dash-Industry-Forum/dash.js/v1.2.0/dash.all.js -O dash.all-1.2.0.js

dash.js を使ってストリーミングを行うサンプルページを作ってみましょう。この html は dash.js の README で紹介されている方法です。

$ vim index.html

1	$ vim index.html

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="dash.all-1.2.0.js"></script>
  </head>
  <body>
    <h1>MPEG-DASH sample</h1>
    <div>
      <video id="videoPlayer" controls="true" />
    </div>
    <script>
      (function() {
        var url = "http://localhost:8999/penguin_dash.mpd";
        var context = new Dash.di.DashContext();
        var player = new MediaPlayer(context);
        player.startup();
        player.attachView(document.querySelector("#videoPlayer"));
        player.attachSource(url);
      })();
    </script>
  </body>
</html>

<!doctype html>

<html>

<head>

</head>

<body>

<h1>MPEG-DASH sample</h1>

<div>

</div>

(function() {

var url = "http://localhost:8999/penguin_dash.mpd";

var context = new Dash.di.DashContext();

var player = new MediaPlayer(context);

player.startup();

player.attachView(document.querySelector("#videoPlayer"));

player.attachSource(url);

})();

</script>

</body>

</html>

これで準備が整いました。では実際にストリーミングしてみましょう。HTTP サーバーは何でも構いませんが、ここでは Python を使って HTTP サーバーを起動します。

$ python -m SimpleHTTPServer 8999

1	$ python -m SimpleHTTPServer 8999

私の環境では IE11, Chrome38, Safari8 (on Yosemite) で再生できました。

リファレンス:

WebM も Mozilla のドキュメントを見ながら試してみたのですが、この内容では Chrome38, Firefox33 ともに再生できませんでした。たぶんやり方が変わっているのでしょうが、私がよく分かっていません。また機会があれば挑戦してみます。

MPEG-DASH の Adaptive bitrate streaming を試してみる

関連文書:

3 Responses to “MPEG-DASH の Adaptive bitrate streaming を試してみる”

@Kengo_TODA

はてブ::コンピュータ・IT非公式bot (@RSS_hateb_Roy)

mat2uken (@mat2uken)

著者一覧

カテゴリー

アーカイブ

最近の投稿

最近のコメント

メタ情報

公式リンク

2021年8月
月	火	水	木	金	土	日
« 4月
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31