LoginSignup
19
7

More than 5 years have passed since last update.

WebRTC->HLS配信

Last updated at Posted at 2018-05-19

誰かのツイートかなんかで存在知ったのですが
Unreal Media Server
というサーバーアプリが、WebRTCに対応しているということでWebRTC->HLSができるか試してみたら、できたのでその手順を書きます。

ダウンロード

上記のリンクから、OSのビットに合わせてDownload x86 Edition/Download x64 Editionいずれかのリンクよりダウンロードします。
image.png

インストール

ダウンロードされるファイルは.zipファイルですので、解凍するとインストーラーが解凍されますのでインストーラーを実行してインストールします。

起動

Unreal StreamingにMedia Server Configuratorがありますのでそれをクリックして起動します。
image.png

image.png
スクリーンショットの画像は、「Live Broadcasts」配下に何もありませんが、インストール直後はデフォルトで一つ追加された状態となっています。

新しいLive broadcastの作成

右側のツリーにある「Live Broadcasts」を右クリックすると、コンテキストメニューで「New live broadcast...」が表示されますので、「New live broadcast...」をクリックします。
image.png

Live Broadcastの種類選択ダイアログが表示されますので、「Rebroadcast live RTMP/RTSP/WebRTC/MPEG-TS/HLS/MMS stream」を選択し、「OK」ボタンをクリックします。
image.png

「New live broadcast」という設定画面が表示されますので、下記の画像のように
「Live broadcast Alias」に適当な名前を入力
デフォルトでは"rtsp://"が選択されているドロップダウンリストを「WebRTC」に切り替え、右のテキストボックスに適当なパスワードを入力し、「OK」ボタンを入力します。
image.png

これで、右側のツリーの「Live broadcasts」の配下に新しいLive broadcastが追加されました。
image.png

サーバー起動

「Unreal Media Server Configuration」画面の右下(ステータスバー)に「Media Server is stopped」となっている場合は、サーバーが停止している状態ですので、サーバーを起動します。
もし「Media Server is running」なっていたらこの手順はとばしてください。
image.png

メニューの「File」をクリックすると一番下に「Start Media Server」がありますのでこれをクリックします。
image.png

右下の表示が「Meida Server is Stopped」から
「Media Server is running」となればOKです。
image.png

WebRTCから接続

デモ用のWebRTC配信ページが用意されていますのでそちらにアクセスします。
WebRTC配信ページ

「Alias of the webrtc live broadcast:」にLive broadcast作成時に設定したAliasの名前、
「Password」に同じくLive broadcast作成時に設定したパスワードを入力します。
そのほかの項目は今回はデフォルトでOKです。
ちなみに「Video codec」をVP8やVP9にしたら.m3u8や.tsファイルは吐き出されますがEdgeでは再生できませんでした
ですのでHLSで配信する場合は「H264」でないとダメ見たいです。
下にある「Apply」ボタンをクリックした後に、Webカメラプレビューの下にある「Publish」ボタンをクリックします。
image.png
すると、「Unreal Media Server Configuration」画面の「Live Encoder Connections」のリストに、WebRTC接続が追加されます。
image.png

HLSで配信

まず、.m3u8ファイルおよび.tsファイルを配置するフォルダを適当な場所に作成しておきます。

次に「Unreal Media Server Configuration」画面右側のツリーにある「Live broadcasts」配下にある今回作成したLive broadcast(画像では「webrtc」)を右クリックすると、コンテキストメニューが表示されますのでその中から「Start HLS broadcasting...」をクリックします。
image.png

「Start Apple Http Live Streaming: xxx」という設定画面が表示されますので、
Web folder URLには"."をWeb folder pathには作成したフォルダのパスを入力し「OK」ボタンをクリックします。
(そのほかの項目は今回はデフォルトのままにします)
image.png

Web folder URLに"."を設定する理由は、例えばWeb folder URLに"hls"と設定した場合、吐き出される.m3u8ファイルの中身をみると

#EXTM3U
#EXT-X-TARGETDURATION:4
#EXT-X-MEDIA-SEQUENCE:3
#EXTINF:4,
hls/webrtc-00000003.ts
#EXTINF:3,
hls/webrtc-00000004.ts
#EXTINF:4,
hls/webrtc-00000005.ts
#EXTINF:3,
hls/webrtc-00000006.ts

となっていますが、同じフォルダに.m3u8及び.tsファイルが吐き出されるため、たとえ.m3u8ファイルにアクセスできたとしても、これだと.tsファイルはhlsフォルダ配下から取得しようとしてしまい、結果取得できなくなるためです。

「Unreal Media Server Configuration」左下(ステータスバー)に「HLS in progress」と表示されればHLSファイルが吐き出されている状態です。
image.png

フォルダを見ると、確かに.m3u8及び.tsファイルが吐き出されています。

image.png

Webサーバーの起動

Unreal Media ServerはWebサーバーの機能は備わっていませんので、別途Webサーバーを用意して、Webから
アクセスできるようにします。
今回は、Chromeの拡張機能の簡易WebサーバーWeb Serverを使用します。
インストールしたら起動し、「CHOOSE FOLDER」ボタンをクリックして、.m3u8が吐き出されるフォルダを選択します。
image.png

これで、HLS配信完了です。

Edgeで確認

Edgeで"http://127.0.0.1:8887/webrtc.m3u8"にアクセスします。
("webrtc"部分はlive broadcastの名前なのでもし別の名前を設定した場合はその名前に変更してください。)
image.png

あとがき

このように簡単にWebRTCからHLS配信ができてしまいました。
無料版では、5つのLive boradcastまで、およびクライアント同時接続数10までという制限があります。
HLS配信に限らず、MSEやMMS、またマルチビットレート等にも対応しているためいろんな場面で配信できます。
また、こういった製品では珍しくWindowsよりのプロダクトとなっており、SDKもそうですが、DirectShowのフィルターも作成されています。

19
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
7