Nginxでお手軽なHLSストリーミング

スマホで動画再生コンテンツをお手軽にリリースしたいなーって時に、mp4とかwebmとかだと正直再生までに時間かかるので、ストリーミングをちょっと触る。
Nginxは標準でストリーミング対応できてるっぽいので、これを使う。

お試しの環境はMacで。

下準備(動画変換ライブラリ)

動画変換にはffmpegを使う。
まずは、mp4とかwebmとかmovをHLSで再生できるm3u8に変換したいので、ffmpegを再ビルド・インストールする

$ brew reinstall ffmpeg  --with-fdk-aac --with-libvo-aacenc  --with-libvorbis --with-libvpx --with-openjpeg  --with-theora --with-opencore-amr

動画変換する

動画を下記コマンドで変換かける

$ ffmpeg -i video.mp4 -vcodec libx264  -b:v 768k -s 640x360 -acodec libfdk_aac  -b:a 96k -ar 44100 -flags +loop-global_header  -map 0 -vbsf h264_mp4toannexb -f segment  -segment_format mpegts -segment_time 10  -segment_list video.m3u8 video%03d.ts

video.mp4をm3u8形式に変換する。

マークアップに記述する

ブラウザでhlsを再生するのに、video.jsを使用する
hlsのcontribモジュールも使用する。

index.htmlはこんな感じ
iOSで自動再生するには、<video>タグ内に playsinlinemutedをいれれば自動再生できます

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="//vjs.zencdn.net/6.7/video-js.min.css" rel="stylesheet">
  <title>HTTP Live Streaming Test</title>
  <style>
    .wrapper {
      height: 100%;
      width: 100%;
      position: relative;
    }

    video {
      widows: 480px;
    }
  </style>
</head>

<body>
  <script src="//vjs.zencdn.net/6.7/video.min.js"></script>
  <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
  <script src="./videojs-contrib-media-sources.js"></script>
  <div class="container">
    <header>
      <h1>HTTP Live Streaming Test</h1>
    </header>
    <video class="video-js vjs-default-skin" id="video" width="360" autoplay controls muted playsinline preload="metadata">
      <source src="video/video.m3u8" type="application/x-mpegURL">
    </video>
    <script>
      var player = videojs('video');
      player.play();
    </script>
</body>
</html>

ディレクトリ構成はこんな感じです

/usr/local/var/www/
├── index.html
├── video
│   ├── video.m3u8
│   ├── video000.ts
│   ├── video001.ts
│   ├── .....(many ts file.)
│   ├── video027.ts
│   └── video028.ts
├── videojs-contrib-hls.min.js
└── videojs-contrib-media-sources.js

Nginxを起動して、下記URLにアクセスすると再生されます(ブラウザのdevtoolsのnetworkをみると、ストリーミングで配信されてるのがわかります)

http://localhost/index.html

ほとんど何もせずにできました。多分30分もかからないくらい。先人の方たちに感謝します。
本番でやるにはもう少しちゃんとやらないとですけど、お試しとか少しデータとりたいときにはいいかもですね。

jsで全角・半角変換(英数字のみ)

日本語使うと大体絡んでくるこの全角・半角変換。
いつもやるけど、覚えてられないので、メモ

function replaceHankakuToZenkaku(str){
    if(str.match(/[A-Za-z0-9-=/]/g)){
        return str.replace(/[A-Za-z0-9-=/]/g,function (s) {
            return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
        });
    }
}

function replaceZenkakuToHankaku(str){
    if(str.match(/[A-Za-z0-9]/g)){
        return str.replace(/[A-Za-z0-9]/g,function(s) {
            return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
        });
    }
}

変数にはテキスト渡せばいいだけ。

Vue for Nativescript v 1.0.0リリースされたので 環境つくる

Vue for Nativescript v1.0.0 がリリースされたらしいので、ちょっと触ってみる
Vue for Nativescriptリリース

環境構築はとても簡単
※ npmは入ってること

ツールをインストール

tns コマンドをインストール

$ npm install -g tns

cocoapodsをインストール

nativescriptをiOS用にビルドするにはcocoapodsが必要なので、入ってなかったらインストールする

$ sudo gem install cocoapods

nativescriptを起動する

サンプルアプリをテンプレートから作る

$ tns create hello-ns-vue --template nativescript-vue-template

$ cd hello-ns-vue

起動する

$ tns run ios

シミュレータが起動し、アプリがインストールされてアプリも起動する。

テキスト修正してみる

中身はapp.jsをそのままなので、テキスト修正くらいはしてみる

app.js

const Vue = require('nativescript-vue');

new Vue({
    template: `
        <Page class="page">
            <ActionBar class="action-bar" title="NativeScript-Vue"></ActionBar>
            <StackLayout class="p-20">
                <Label textWrap="true" class="h2" :text="headingText"></Label>
                <Image height="200" class="m-y-10" src="~/images/NativeScript-Vue.png"></Image>
                <Label textWrap="true" class="body" :text="bodyText"></Label>
            </StackLayout>
        </Page>
    `,
    data: {
        headingText: '日本語は表示できるか?',
        bodyText: 'ちょっとフォントがよくない?'
    }
}).$start();

テキスト修正して、保存すると自動でビルドされてアプリ再起動されて反映される。
これはとても便利。
テキスト修正レベルはいいけど、シンタックスエラー時にもビルド -> アプリ再起動をしてしまうので、
syntaxエラーとかビルド成功時だけ、アプリ再起動してほしいかなと。(なんか設定あるんですかね?)

タブを表示してみる

templateの中にapp-with-tab-view.jsがあるので、中身をapp.jsに書き換えて保存するとアプリの中がタブになる

const Vue = require('nativescript-vue/dist/index')

let app = new Vue({
    data: {
        selectedTab: 0,
        tabs: [
            {title: 'First Tab', text: 'im the first tab'},
            {title: 'Second Tab', text: 'im the second tab'},
            {title: 'Third Tab', text: 'im the third tab'},
        ]
    },

    template: `
        <page>
            <stack-layout>
                <button @tap="tabs.push({title: 'added', text: 'added tab'})">Click me!</button>
                <tab-view :selectedIndex="selectedTab">
                    <tab-view-item  v-for="(tab, i) in tabs" key="i" :title="tab.title">
                        <label>{{ tab.text }}</label>
                    </tab-view-item>
                </tab-view>
            </stack-layout>
        </page>
    `,
})

app.$start()

この記述で簡単にできるので、ちょっと触ってみようかと思う。