WebRTC->HLS配信

誰かのツイートかなんかで存在知ったのですが
[Unreal Media Server](http://www.umediaserver.net/umediaserver/download.html)
というサーバーアプリが、WebRTCに対応しているということでWebRTC->HLSができるか試してみたら、できたのでその手順を書きます。


## ダウンロード
上記のリンクから、OSのビットに合わせてDownload x86 Edition/Download x64 Editionいずれかのリンクよりダウンロードします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/17554/ac5ea10b-418e-2b17-89d0-ffc5914939fe.png)

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

## 起動
Unreal StreamingにMedia Server Configuratorがありますのでそれをクリックして起動します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/17554/5e1d4645-ca76-fe64-a732-f91b7da38011.png)  
![image.png](https://qiita-image-store.s3.amazonaws.com/0/17554/34ed72b5-83b3-52b7-9373-43fa5a6fe244.png)
スクリーンショットの画像は、「Live Broadcasts」配下に何もありませんが、インストール直後はデフォルトで一つ追加された状態となっています。


## 新しいLive broadcastの作成
右側のツリーにある「Live Broadcasts」を右クリックすると、コンテキストメニューで「New live broadcast...」が表示されますので、「New live broadcast...」をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/17554/1c91cfce-0eca-8220-6693-5d9cb3491a7d.png)  
Live Broadcastの種類選択ダイアログが表示されますので、「Rebroadcast live RTMP/RTSP/WebRTC/MPEG-TS/HLS/MMS stream」を選択し、「OK」ボタンをクリックします。
 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/17554/a53d1c26-f767-496a-36f6-f36efa0ce755.png)  
「New live broadcast」という設定画面が表示されますので、下記の画像のように
「Live broadcast Alias」に適当な名前を入力
デフォルトでは"rtsp://"が選択されているドロップダウンリストを「WebRTC」に切り替え、右のテキストボックスに適当なパスワードを入力し、「OK」ボタンを入力します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/17554/8861f8e0-eb80-880c-9dca-d4ec03f2d234.png)  
これで、右側のツリーの「Live broadcasts」の配下に新しいLive broadcastが追加されました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/17554/1a340ec5-e2e7-bdd6-04d9-c9fc54986040.png)
  
## サーバー起動
「Unreal Media Server Configuration」画面の右下(ステータスバー)に「Media Server is stopped」となっている場合は、サーバーが停止している状態ですので、サーバーを起動します。
もし「Media Server is running」なっていたらこの手順はとばしてください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/17554/c04d6850-2675-4027-df1b-40e75a7f983a.png)  
メニューの「File」をクリックすると一番下に「Start Media Server」がありますのでこれをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/17554/cd38d5a4-454a-2f08-a19c-74655e19dc82.png)  
右下の表示が「Meida Server is Stopped」から
「Media Server is running」となればOKです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/17554/dc669821-9fb3-a32d-8496-a444e3652584.png)  

## WebRTCから接続
デモ用のWebRTC配信ページが用意されていますのでそちらにアクセスします。
[WebRTC配信ページ](https://secure28.securewebsession.com/umediaserver.net/demos/publish.html)  
「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](https://qiita-image-store.s3.amazonaws.com/0/17554/4542d146-9587-d2db-71a8-da816f05879e.png)
すると、「Unreal Media Server Configuration」画面の「Live Encoder Connections」のリストに、WebRTC接続が追加されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/17554/f939357a-5f54-5d44-6ad5-cb81a097fee8.png)  

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

次に「Unreal Media Server Configuration」画面右側のツリーにある「Live broadcasts」配下にある今回作成したLive broadcast(画像では「webrtc」)を右クリックすると、コンテキストメニューが表示されますのでその中から「Start HLS broadcasting...」をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/17554/76c183ab-e1d8-f7d3-b795-ae3814892996.png)
  
「Start Apple Http Live Streaming: xxx」という設定画面が表示されますので、
Web folder URLには"."をWeb folder pathには作成したフォルダのパスを入力し「OK」ボタンをクリックします。
(そのほかの項目は今回はデフォルトのままにします)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/17554/fafc7db3-2c72-6d38-783c-ac59fa2d70a5.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](https://qiita-image-store.s3.amazonaws.com/0/17554/60a09d80-f5ef-f9fe-2857-80aba3c990ea.png)  
フォルダを見ると、確かに.m3u8及び.tsファイルが吐き出されています。  
![image.png](https://qiita-image-store.s3.amazonaws.com/0/17554/5ea09941-2989-47e0-2c8b-7d18cd5896ed.png)  


## Webサーバーの起動
Unreal Media ServerはWebサーバーの機能は備わっていませんので、別途Webサーバーを用意して、Webから
アクセスできるようにします。
今回は、Chromeの拡張機能の簡易Webサーバー[Web Server](https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb)を使用します。
インストールしたら起動し、「CHOOSE FOLDER」ボタンをクリックして、.m3u8が吐き出されるフォルダを選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/17554/93a41ecb-1500-e538-fab8-edc11344658c.png)  
これで、HLS配信完了です。

## Edgeで確認
Edgeで"http://127.0.0.1:8887/webrtc.m3u8"にアクセスします。
("webrtc"部分はlive broadcastの名前なのでもし別の名前を設定した場合はその名前に変更してください。)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/17554/e77e9a13-9c98-1258-8421-fd539a6a4e12.png)

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