映像制作 eラーニングのことならビズバレー
文字サイズの変更 標準 
大きい
ホーム > スタッフブログ
スタッフブログ
k.takahashi
k.taguchi
j.hashimoto
j.katou
y.hotate
m.kawai
s_inomata
t.saito
ビズバレーは、東京都 千代田区で活動する、映像制作、DVD、eラーニングを扱う会社です。

エンジニア:田口

<コメント>
15年以上 eラーニング業界にさまざまな立場で関わってきました。教材開発からLMSの企画開発、コンシューマ向けeラーニングの経験を経て、多様なラーニングの企画開発を行っています。専門分野 Web技術全般、Adobe AIR、動画配信技術など。
日本イーラーニングコンソシアム認定 SCORM技術者。

<制作実例>
スマートフォンアプリ開発、LMS開発・運用、SCORM教材開発

<趣味>
一眼レフカメラ撮影

今回は、Debian Linux7.2を使い、一般ユーザーでroot権限の操作をできるように設定をしてみましょう。通常、CentOSでは、suでrootユーザーに変更して操作したり、Ubuntuでは、そのままsudoコマンドが使えたりしますが、Debianでは動作しません。

試しに、sudoでコマンドを実行してみると。下記のようになります。

taguchi@debian:/$ sudo apt-get update
[sudo] password for taguchi:
taguchi は sudoers ファイル内にありません。この事象は記録・報告されます。
taguchi@debian:/$
Debian では、sudoを実行できるユーザーは、既定では、rootと、sudoグループに限られています。つまり、sudoグループに所属させれば、利用することが簡単にできます。

このような感じですね。
root@debian:/etc# gpasswd -a taguchi sudo
ユーザ taguchi をグループ sudo に追加
ログオフ・ログインをし直して、もう一度、同じようにsudoでコマンドを実行してみましょう。
taguchi@debian:/etc$ sudo apt-get update
[sudo] password for taguchi:
ヒット http://ftp.jp.debian.org wheezy Release.gpg
ヒット http://ftp.jp.debian.org wheezy-updates Release.gpg
ヒット http://ftp.jp.debian.org wheezy Release
ヒット http://ftp.jp.debian.org wheezy-updates Release
ヒット http://ftp.jp.debian.org wheezy/main Sources
ヒット http://ftp.jp.debian.org wheezy/main amd64 Packages
ヒット http://ftp.jp.debian.org wheezy/main Translation-ja
ヒット http://ftp.jp.debian.org wheezy/main Translation-en
ヒット http://ftp.jp.debian.org wheezy-updates/main Sources
ヒット http://ftp.jp.debian.org wheezy-updates/main amd64 Packages/DiffIndex
ヒット http://ftp.jp.debian.org wheezy-updates/main Translation-en/DiffIndex
ヒット http://security.debian.org wheezy/updates Release.gpg
ヒット http://security.debian.org wheezy/updates Release
ヒット http://security.debian.org wheezy/updates/main Sources
ヒット http://security.debian.org wheezy/updates/main amd64 Packages
ヒット http://security.debian.org wheezy/updates/main Translation-en
パッケージリストを読み込んでいます... 完了
taguchi@debian:/etc$
このように動作するようになりました。Ubuntuでは、rootユーザを使わせないように、sudoで代用?していますが、元々の目的は、rootコマンドの一部を一般ユーザーに委譲したりすることで、リスクを軽減させることです。また、sudoでのコマンド処理は、ログに残るので何をしたかが分かるというメリットがあります。

ログファイルは、 /var/log/auth.log に溜まります。例えばこのような感じで見ることができます。一部抜粋。
Dec 10 13:50:33 debian sudo: taguchi : ユーザーが sudoers 内にありません ; TTY=pts/0 ; PWD=/home/taguchi ; USER=root ; COMMAND=/usr/bin/apt-get update
Dec 10 13:52:43 debian su[7106]: pam_unix(su:auth): authentication failure; logname=taguchi uid=1000 euid=0 tty=/dev/pts/1 ruser=taguchi rhost= user=root
Dec 10 13:52:45 debian su[7106]: pam_authenticate: Authentication failure
Dec 10 13:52:45 debian su[7106]: FAILED su for root by taguchi
Dec 10 13:57:53 debian su[7133]: + /dev/pts/1 root:taguchi
Dec 10 13:57:53 debian su[7133]: pam_unix(su:session): session opened for user taguchi by taguchi(uid=0)
Dec 10 13:58:02 debian sudo: taguchi : TTY=pts/1 ; PWD=/etc ; USER=root ; COMMAND=/usr/bin/apt-get update
さらに、このユーザーに、このコマンドだけ実行できるようにしたい、パスワードなしで実行したいなどを指定したい場合は、visudoというコマンドを使い編集を行います。

前回は、HTTP Live Streamingの概要について、書きましたので今回は、実際に作ってみましょう。

動画を用意する

HLSで配信する動画として、「Big Buck Bunny」を素材にします。この動画は、Creative Commonsのライセンスでクレジットを表示すれば、商用、二次的著作物でも利用できる使い勝手の良い動画です。たまに見かける動画ですね。

Big Buck Bunny
(c) copyright 2008, Blender Foundation / www.bigbuckbunny.org

ダウンロード
http://www.bigbuckbunny.org/index.php/download/

1280x720のMP4ファイルをダウンロードします。

エンコードする

今回は、WiFiをターゲットとして下記のようにしました。

コンテナフォーマット MPEG-2 TS
映像 H.264
音声 ACC
サイズ 640 x 360
オーディオサンプルレート 22.05 kHz
オーディオビットレート 40 kbps
ビデオビットレート 1200 kbps
キーフレーム 90
フレームレート 24(元映像のフレームレート)

エンコーダーは、コマンドラインのffmpegなど何でも良いですが、Xmedia Recodeを利用しました。









エンコードすると、tsファイルができあがります。

セグメンターで映像を分割する

動画を分割するには、セグメンターを利用します。ここでは「httpsegmenter」を利用します。

httpsegmenter

Windowsで作業しているため、ready binary for Windows の「segmenter-r6.7z」をダウンロードします。ただ、7zで圧縮されているので、7-Zipなどのファイルアーカイバで解凍して、C:\segmenter-r6 (Cドライブ直下)に配置します。


tsファイルは、Cドライブにmvフォルダを作りコピーします。

コマンドプロンプトで、mvフォルダに移動して、次のパラメータを付けて、segmenter.exeを実行します。

(例)
C:\segmenter-r6\segmenter.exe big_buck_bunny_720p_surround.ts 10 bunny bunny.m3u8 http://localhost/

(意味)
segmenter.exe [指定するMPEG-TSファイル] [セグメント間隔(秒数)] [出力するMPEG-TSファイルのプレフィックス] [出力するm3u8ファイル] [httpプレフィックス]

httpプレフィックスは、動画 .tsファイルへのパスを記載します。ここでは、例として、localhostを指定しています。適宜、書き換えてください。

20130119-12
実行すると、動画がバラバラと分割されます。
20130119-10
m3u8のプレイリストファイルの中身を見ると、一連の動画がリスト化され、httpプレフィックスで指定したパスに、tsファイルが付いていることがわかります。※ 相対パスでも動作します。


作成した、bunny.m3u8と、分割されたtsファイルを、Webサーバーにアップロードします。

Webサーバー MIME タイプの設定

.htaccessファイルを作り下記2行を追加します。

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

※ VPSなど、直接Apacheに設定を加える場合は、httpd.conf などのファイルを編集してください。

iPadで確認

すべて整いましたので、動作確認をとります。アップロードしたbunny.m3u8ファイルにアクセスします。この場合は、http://localhost/bunny.m3u8 になります。Windowsで確認したい場合は、VLC media playerや、SMPlayerでm3u8にアクセスすると表示されます。(ただしタイムコード、シークバーの位置は正確に表示されませんでした。)

20130119-11
iPadで、再生されましたね。ただMacのSafariでは、直接bunny.m3u8にアクセスしても再生されません。HTML5 Videoにすると再生できるようになります。

(参考)
<html>
<head>
<title>HTTP Live Streaming サンプル</title>
</head>
<body>
<video controls>
<source src="bunny.m3u8">
</video>
</body>
</html>

いかがでしたでしょうか?。
少し長くなりましたが、作業自体は、簡単なものです。さらにパラメータのチューニングをすることで、もっと良くなると思いますので、試してみてください。

次回は、「HTTP Live Streaming でアダプティブストリーミングのやり方」について説明いたします。https://bizvalley.co.jp/blog/1215.html

HTTP Live Streaming(以下 HLS) とは、Appleが開発した、動画配信のテクノロジーで、iPhoneなどで動画をストリーム再生したい場合、利用される形式です。

HSLは、特別なストリーミングサーバーを必要とせず、通常のWebサーバーから配信できるため、レンタルサーバーでも、その気になれば、少しの設定で配信することは可能です。

HLSの動作デバイスは

  • MacOS X10.6以降のSafariブラウザ
  • iOS3.0以降
  • Android3.0以降
Windowsでは、VLC media playerで(一応)動作しますが、IE、Chrome、Firefox、そしてMacOSでもChrome、Firefoxといったメジャーなブラウザでは、動作しません。

※追記 2014/7/25 FlashでHLSを再生できるようにしたベンダーがでてきています。(有償です)

HLSの特徴として、通信速度に応じて映像画質を変えるアダプティブストリーミングで再生することができます。これは、ビットレート・画面サイズの異なる同一の動画を複数作り、クライアント側の通信速度に応じて、再生しながら切り替えるストリーミングのことを言います。

同じWebサーバーからの配信で、HLSとの比較に、プログレッシブダウンロードの動画ストリームがあります。この場合、別のビットレートの動画に切り替えることができないため、柔軟性の面で、HLSのほうが優れています。逆に、HLSのネックは、再生環境が限られるといった所でしょうか。

HLS動画の仕組み
HLSの動画フォーマットは、MPEG TS(映像 コーデックH.264)、AAC(音声)です。そして、1つの動画は、10秒ごとに分割された、細切れのファイル(.ts)になり(※ これをメディアセグメントファイルと言います。)、目次に相当するプレイリストファイル(.m3u8)の2つから構成されます。

HSLの仕組み

ファイルが分割されているので、プレイリストの再生指示により、どのファイルからも読み込むことができ、プレイリストの指定順に、次々とファイルが読み込まれます。見た目には、ファイルが分割されていても、スムーズに一体として再生されます。

再生順

1つ1つのファイルは、プログレッシブダウンロードのように読み込まれるため、10秒を超えてあまり長い分割だと、再生に時間がかかったり、細かすぎるとサーバーに負担がかかるため、推奨は10秒になっています。

またベンダー製品のAdobe Media ServerWowza Media Serverでは、HLSをサポートしています。通常のWebサーバーで配信できるなら、ストリーミングサーバーは、必要なさそうですが、ファイルをあらかじめ分割せず配信できたり、Flashなど別の配信フォーマットにも1つの動画ファイルで対応できるといった、特徴があります。

Appleのサイトでは、HSLについてのドキュメントが公開されているので、気になる方は、一読しておくといいでしょう。また、サンプル動画のURLも記載されているので、参考になると思います。
HTTP Live Streamingの概要 (PDFファイル)

次回は、実際に作ってみようと思います。
HTTP Live Streaming 動画配信のやり方 (実践)

参考
「FlashでHLS(HTTP Live Streaming)を再生するには・・・ただし有償」
https://bizvalley.co.jp/blog/7055.html

HTTP Live Streaming は、特別なサーバーアプリケーションを必要とせず、MIME設定を行えば簡単に配信できることを、HTTP Live Streaming 動画配信のやり方 (実践)で、説明しましたが、そのとき、Webサーバーは、Apacheをベースにしていたので、今回は、Windows ServerのIISから配信を試してみようと思います。

とはいっても、MIME設定するだけです。

サーバーを用意する
Windows Serverは、AmazonEC2のクラウドを利用しました。数時間程度の利用なら数百円程度で高スペックなサーバーを利用できるので、とても便利です。

20130210-05

IISでMIMEを設定する
IISは、インストール済みであることを前提として、MIMEの設定を追加します。サーバーマネージャーから、Webサイトの設定を行います。いくつか設定項目がある中から「MIMEの種類」を選択します。

20130210-01

MIMEタイプを追加する
「追加」を選択すると、種類を追加することができます。

20130210-02

ここで、下記2つを追加します。

ファイルの拡張子 .m3u8
MIMEの種類 application/x-mpegURL

ファイルの拡張子 .ts
MIMEの種類 video/MP2T

20130210-03

これで設定は完了です、あらかじめ動画用意すると、このような感じで再生できます。

サーバー側のネットワーク負荷をみると、常に負荷が掛かっている訳でなく、断面化された動画のセグメントファイルを、定期的に送信しているように見えます。このあたり、プログレッシブダウンロードと比べてみると面白いかもしれません。

20130210-04

 


今回は、スマートフォンアプリの作成で避けては通れないマルチ解像度について考えてみたいと思います。スマートフォンのアプリは、画面いっぱいにシングルウィンドウとしてコンテンツを描画するため、端末の解像度を考慮しなければなりません。

例えば、Android端末で800x480ピクセル、1920×1080ピクセルの画面サイズで、800x480ピクセルのコンテンツ(画像)をそのまま表示しようとしたらこのような感じになります。

20150501-1

片方はピッタリ合っていますが、高解像度の端末では、なんらかの対処が必要なのは見ての通りです。さて、ここでどうするかという問題です。思い付くところ3通りの手法があります。

(1)コンテンツのアスペクト比を「無視」して拡大する
(2)コンテンツのアスペクト比を「維持」して拡大する
(3)コンテンツを相対的に作成・配置する

ここでは、アスペクト比を「無視」した方法の記述を見てみましょう。
starlingを起動するまでのコードです。

package
{
  import flash.display.Sprite;
  import flash.display.StageDisplayState;
  import flash.display.StageScaleMode;
  import flash.geom.Rectangle;
  import starling.core.Starling;
  
  [SWF(frameRate="60", backgroundColor="#000")]
  
  public class Main extends Sprite
  {
    public var starling:Starling;
    public static const STAGE_HEIGHT:int = 800;
    public static const STAGE_WIDTH:int  = 480;

    public function Main()
    {      
      stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
      stage.scaleMode    = StageScaleMode.NO_SCALE;

      var viewPort:Rectangle =
       new Rectangle(0, 0, stage.fullScreenWidth, stage.fullScreenHeight);

      starling = new Starling(MainState, stage, viewPort);
      starling.stage.stageWidth  = STAGE_WIDTH;
      starling.stage.stageHeight = STAGE_HEIGHT;
      starling.start();

    }
  }
}

ポイントになる部分は、ビューポートの矩形設定で(0,0)からフルスクリーンでの座標をセットしてStarlingオブジェクト生成時の引数としています。

var viewPort:Rectangle =
       new Rectangle(0, 0, stage.fullScreenWidth, stage.fullScreenHeight);

そして、次のところでコンテンツサイズ(800x480)をセットしています。

starling.stage.stageWidth  = STAGE_WIDTH;
starling.stage.stageHeight = STAGE_HEIGHT;

結果、このように縦横800x480ピクセルの画像がディスプレイのサイズにぴったり合いました。ただし中央の正方形は11ピクセル歪んでいました。

20150510-3

注意したいのは、端末の解像度が1920x1080であっても、コンテンツの高さは1920ピクセルではありません。1776ピクセルとなります。これは画面下部にナビゲーションバー(システムキー)があるためです。端末によっては、画面の外に出ているものもあるため端末の解像度が同じでも、その有無によって表示サイズが異なります。

またステータスバーを表示すると、さらに縦幅は変わってきますので、なかなかやっかいです。個人的には、アスペクト比を無視したやり方は端末により歪みが大きいため、利用していません。

次回は、アスペクト比を「維持」したやり方を見てみようと思います。