AI

超簡単にエックスサーバでストリーミング配信する

#HLS#FFmpeg#動画処理

エックスサーバでストリーミング配信しているサービスを見つけました。一番ランクの低いエックスサーバのみでストリーミング配信ができるということで、HLSを使っていて、webサーバはhttpd.confの編集レベルで動くようになってるのかなと思い、やってみました。

HLSファイルをつくる

まずは、mp4、movなどの動画ファイルをHLSファイルにする必要があります。HLSファイルは、FFmpegで下記のように簡単に作成できます。

sudo ffmpeg -i movie.mov -c:v copy -c:a copy -map 0 -f segment -segment_format mpegts  -segment_time 5 -segment_list  movie/movie.m3u8 movie/movie_%3d.ts

https://blog.logicky.com/2019/03/18/094600 — blog.logicky.com

作成したHLSファイルを、エックスサーバにアップロードします。

FTPでもいいですし、SCPだと下記のような感じでやります。

$ zip -r movie.zip movie
$ scp movie.zip hogehoge.com:~

閲覧用HTMLを作成します。

iOSなどHLSに対応しているブラウザであれば、HLSファイルをvideoタグで読み込むだけで表示されますが、Ubuntuのchromeとかだと表示されません。表示するには、video.jsを使うのが流行っているようです。

https://github.com/videojs/video.js — github.com

<html>
  <head>
    <title>Movie Test</title>
    <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
    <style>
    body {
      background: black;
      color: white;
      padding: 20px;
    }
    #player1 {
      width: 500px;
      height: 300px;
    }
    </style>
  </head>
  <body>
    <h1>Movie Test</h1>
    <video-js
      id="player1"
      class="vjs-default-skin"
      controls
      autoplay
    >
      <source
        src="./movie/movie.m3u8"
        type="application/x-mpegURL"
      >
    </video-js>
  </div>
  <script src="https://vjs.zencdn.net/7.4.1/video.js"></script>
    <script>
      var player = videojs('player1');
    </script>
  </body>
</html>

これだけで、HLSファイルが表示されました。httpd.confの設定すら不要でした。お手軽。

f:id:edo1z:20190318114444p:plain

大きいファイルだと厳しいですので、スマホの画面サイズくらいの動画を数十人同時接続くらいだったらいけるのかなと思いました（結構適当な感想です）。なんで数十人かというと、そのサービスの実績紹介のところに、３０人同時接続と書いてあったからです。今度自分でも確認してみようと思いました。