H4-2

HTML5 によるストリーミング教材配信基盤の構築
川口 雄一 ∗
目時 光紀 ∗
小島 洋一郎 †yuuichi@tenshi.ac.jp
metoki@tenshi.ac.jp
kojisan@gt.tomakomai-ct.ac.jp∗ 天使大学 看護栄養学部 (北海道 札幌市)
† 国立 苫小牧工業高等専門学校 理系総合学科 (北海道 苫小牧市)
概要
学生が自宅等で自学自習する場合だけでなく、学生の実習先で実習内容を確認する場合や、卒業生が全国の配属部署で学び直す場合など、様々な場面でディジタル教材を活用できる。
ディジタル教材は LMS 等に置かれ配信される (川口, 2007, 2010 等)。一般的な環境では、音声や動画などサイズの大きい教材の場合、ダウンロード完了まで、再生する前に長い待ち時間がかかる。遠隔地で距離が長いなど経路品質が悪い場合、ダウンロードに失敗することも有り得る。
このため、サイズの大きなディジタルコンテンツをオンライン配信するためには、ストリーミング技術を用いることが多い。これは、ダウンロードと再生を同時並行しておこなう技術であり、前述の問題点に対する解決となり得る。
本研究では、本学学生や卒業生による遠隔地からの利用を想定し、視聴覚教材をストリーミング配信する基盤を構築することを目的とする。
キーワード

HTML5, HLS, ストリーミング, ディジタル教材.

1 はじめに

1.1 用語・概念

情報技術を教育に応用することにより、例えば、授本研究で中心となる概念「ストリーミング」は、業を丸ごと録画して、欠席した学生や反復して授業用語として厳密に定義されたものではない。ネットを受けたい学生などに提供するようなことも、情報ワークを通じて動画等を配信するための一つの方法・技術の応用により、かつてより低費用・低労力 (コス技術である。

ト) で可能となってきている。

映画などサイズの大きなコンテンツを配信する場

このような動画像や音声録音 (以降「動画等」) は、合、すべてをダウンロードして一旦、ファイル等に保CD や DVD に記録して静的に提供するよりも、イン存し、これを再生する方法をとるなら、ダウンロードターネットを通じて動的に提供するほうが低コストに長い時間がかかることが予想される。また、ネッである。

トワークの帯域幅によっては、途中でサーバとクラ本研究では、このような状況を踏まえ、授業で使イントの接続が切断されてしまうことも考えられる。

用する動画等の教材コンテンツをストリーミング配

この場合、最初からダウンロードを遣り直さなけれ信するための基盤を構築する。

ばならないことも多い。

大学 ICT 推進協議会 2012 年度 年次大会, 神戸市, 2012 年 12 月 17 日 ∼19 日.

これに対して、ストリーミング技術を利用する場
合、ダウンロードと再生を並行する。微小部分を再生するのに充分なデータがダウンロードされ次第それを再生しつつ、次の微少部分をダウンロードする。
この部分においてダウンロードとストリーミングは異なる。この形式を「プログレッシブダウンロード」と呼ぶこともある。
また、ストリーミングでは、ローカルにキャッシュを与える。
実際の配信には、主として「さくらインターネッ
ト」から提供されている「さくらのレンタルサーバ(スタンダード)」を利用した (c.f., 4 現在の取組み)。
公表されている、または標準的に取得可能な諸元(2012 年 11 月現在) を示す。
HDD 10 (GB)を残さない実装であることが多く、また、ダウンロー

CPU/mem. Intel Xeon 3.0 (GHz) / 3.25 (GB)ドしたコンテンツを保存できないことが多い。ただOSし、この部分は「ストリーミング」の必須部分ではhttp サーバ Apache 1.3.42なく、実装により異なる。

FreeBSD 7.1 (i386)

現在は実験的な試用段階でもあり、著作権への配慮など、コンテンツを扱うための細部を未だ検討しき

2 取組みの結果れていない。このため、apache の.htaccess ファ
イルによりアクセス制限を施している。

本稿執筆時点で、配信サーバを設定し配信用コンテンツを準備した。また、視聴クライアントとして、いくつかの種類のコンピュータを試した。

2.1 配信プロトコルとサーバ
本研究では HLS(HTTP Live Streaming)[1, 2] をストリーミングのためのプロトコルに使用した。この特徴は、• 使用プロトコル: http特別な rtsp などを使わず、既設の HTMLサーバをそのまま利用できる。

• HTML タグ: <video> (HTML5)このため、ブラウザによっては対応していない。

• メディア形式: .ts および .m3u8
配信すべき動画などのコンテンツを、あらかじめ、一定の短かい (e.g., 10 秒) 間隔で細切れ

2.2 コンテンツ
前述のとおり、HLS でストリーミング配信するコンテンツを、あらかじめ配信用に準備しておく必要がある。解説書 [1] によれば、(1) メディア
配信に使用できるメディア形式は、現在のところ “MPEG-2 transport streams with H.264

video and AAC audio” と記載がある。
(2) セグメント
配信すべきメディアを保存したファイルを、適当な均等な長さに細分する。

(3) プレイリスト
各細分セグメントの長さや、並ぶ順番などを記載したファイルを用意する。にしておく必要がある (ts 形式*1 )。ブラウザ

これら三つの手順が必要である。これらのためのへは、コンテンツの一覧 (インデックスまたはツールは Apple のサイト*3 から取得できる (要 Ap-プレイリスト) となるファイル (m3u8 形式*2 )ple ID)。

*1 an MPEG-2 Transport Stream*2 an m3u playlist containing UTF-8 encoded text
*3 http://connect.apple.com/*4 http://www.videolan.org/

また、別な実装として VLC*4 がある。公開されてた易いこと、および、youtube*5 が成功したこともあいる資料 [3] があり、これに従うことで HLS 用のコり、Adobe 社の Flash Video[4] を利用するのが、かンテンツを準備できる。ただし、内部で ffmpeg をつて一般的であった。
近年発表された HTML5 規格 (2008 年, ド ラ フ利用する。このため、あらかじめ導入しておく必要がある。
本研究では VLC を利用した。Apple のツールは利ト)*6 には、動画等を扱うための仕組みが導入されている。本稿で扱う HLS はこれを利用している。

Apple 社は自社製品での Flash Video 対応を止め用していない。

た。この影響で、業界全体において、従来の Flash2.3 視聴クライアント
本研究で、視聴クライアントとして試してみた、OS とブラウザの組合せを示す。
iOS 6 (iPad/iPod touch)• Safari · · · 
Mac OS X (Mountain Lion)• Safari · · · H
• QuickTime Player X · · · M
• Chrome · · · ×
Windows 7 (Pro.)• IE 9 · · · ×• VLC (ver. 2.0.4 / portable) · · · M
Linux (Ubuntu 12.10)• Firefox 16.02 · · · ×• VLC (ver. 2.0.4) · · · Mただし、 は.html ファイル (c.f., 末尾付録) および、.m3u8 ファイルのどちらを指定しても再生できたことを示す。H は.html ファイルの指定のみ、

M は.m3u8 ファイルの指定のみで、それぞれ再生できたことを示す。× はどちらの指定でも再生できなかったことを示す。

3 関連する技術など
3.1

Adobe Flash Video

Video のみという状況は変化しつつある。

3.2

YoutubeYoutube は最近 (2006 年)、google 社に買収され、子会社となった。コンテンツをパブリックとしないためには、コンテンツの提供者・利用者は、youtubeへユーザ登録する必要がある。個人情報を google に提供する意味がある。
本研究では、これを避け、自前でサーバを立ち上げる条件で、開発を進めている。

4

現在の取組み4.1 性能評価
構築したシステムの性能は、(1) 配信用 http サー
バ、(2) ネットワーク経路、(3) 視聴用クライアント、それぞれの性能が総合されて決定される。
現在は、先ず、性能評価のための配信サーバとして、北海道大学のプロジェクトサーバ (S)*7 を利用している (北海道大学 情報基盤センター 共同研究採択課題, 2012 年度, A4-4)。商用サーバは一般的に設置拠点やネットワークの経路が非公開である。北大のサーバであれば、北海道 札幌市に設置され、またSINET と接続しているという明確な状況を用意することができる。
地理的な遠近とネットワーク的な遠近を組合せて、インターネットを通じて動画等をストリーミングそれぞれ例となる地点からのアクセス実験を進めて配信する場合には、再生アプリケーションの入手がいる。例えば物理的に遠いという状況で、九州大学*5 http://www.youtube.com/*6 http://dev.w3.org/html5/spec/*7 http://www.hucc.hokudai.ac.jp/hosting_server.html

• ssh(九州大学 情報基盤研究開発センターの研究用計算機システム) をもう一方の端点とする予定である。

も う ひ と つ 、ssh の ポ ー ト フ ォ ワ ー ド 機

単純なダウンロードであれば、帯域 (bit/sec.) を性能を利用し、秘密鍵を入手できる者のみが能評価の指標として利用できる。しかし、ストリー

localhost からストリーミング コンテンツ

ミングの場合は、このような単純で定番な指標が存にアクセスできるようにした。

在するか、現在、関連する研究などを調査中である。

4.2 安全性の確保
ストリーミングによるコンテンツ配信は、著作権保護と関連づけて検討されることが多い。これは原実際に使用した ssh クライアントを示す。

iOSiSSH*8

OS X ssh (OS 付属)
Windows 7 putty*9 / portforwardar*10
Ubuntu ssh (OS 付属)

理的には混用である。しかし、実際的には、ストリーミング形式を用いると視聴クライアント側では、ローカルにコンテンツを保存することができない、また5は、キャッシュに残らないなどの状況であることが多いため、これを著作権保護のために利用するといまとめ
本研究は主に、天使大学 特別研究費 (2012 年度)により支援を受けている。

う考え方は有り得る。
また、コンテンツ保護のためには、アクセス管理も必要である。本研究では、例えば、配信サーバ(付録) HTML ファイル

(Apache httpd) に付属の BASIC 認証などの認証手段を用いず、Wi-Fi 環境における盗聴などの観点もふまえ、下記のとおり設定した。

※ 主要部分のみ<video controls="controls"
autoplay="autoplay"• .htaccessheight="240" width="320">

学内 LAN からインターネットへのアクセス<sourceは、本学の場合、必ずプロキシを経由する。これを経由するアクセスのみを許可した。

src="http://localhost/(.m3u8) /></video>

参考文献[1] Apple
Inc.,
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/, 2012 Jul. 23.
[2] Apple Inc., https://developer.apple.com/library/ios/documentation/
NetworkingInternet/Conceptual/StreamingMediaGuide/, 2011 Apr. 1.
[3] VideoLANWiki,
http://wiki.videolan.org/Documentation:Streaming_HowTo/Streaming_for_the_iPhone/, 2012 Oct. 30.
[4] Adobe Inc.,
http://download.macromedia.com/f4v/video_file_format_spec_v10_1.pdf,
2010 Aug.
*8 http://www.zinger-soft.com/iSSH_features.html*9 http://portableapps.com/*10 http://http://toh.fuji-climb.org/pf/JP/