Janus + Vue.jsで自前のWebRTCフロントエンドを作ろう！～その１：準備編

JanusというオープンソースのWebRTCサーバーがあり、ビデオチャットやストリーミングのサーバーを自前で構築できます。以前の記事で紹介しました。

前回はJanusをサーバーにインストールして、デモ画面を動かしてみました。でもやっぱり独自画面を作りたいですよね。デモ画面をカスタマイズすることでも作れますが、素のJavaScriptでDOMを直接操作していたり、コールバックのネストが深かったりで、なかなかカスタマイズも手間がかかります。

そこで今回は、Vue.jsで一から独自画面を作ってみました。まずは手頃そうなストリーミングの画面を作ってみます。

Vue.jsのプロジェクト作成

まずはVue.jsのプロジェクトを作成してみましょう。Node.jsがインストールしてあるものとします。 Vue CLIというものをインストールすると、簡単にVue.jsのプロジェクトのひな形ができます。

> npm install -g @vue/cli

これで、Vue CLIがインストールできました。vue create <プロジェクト名>でプロジェクトのテンプレートを作れます。

> vue create janus-streaming

"vue create"が使えない場合は、おそらくvueコマンドのバージョンが1か2の古いバージョンと思われます。"npm uninstall -g vue-cli"で削除したあとで、"npm install -g @vue/cli"でインストールし直してください。

執筆時点(2020年8月)で、Vue2とVue3が選べました。 Vue3はプレビュー版ですし、慣れているのでVue 2にします。他に、手動で様々な機能の有効/無効を選べるManually select featuresもあります。

Vue CLI v4.5.3

? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

今回はシンプルなJanusストリーミング画面のみのプロジェクトにするので、Vue2のDefaultにしました。 Defaultの場合は他に何も聞かれず、自動でダウンロード・構成してくれて、プロジェクトフォルダが完成します。

私の場合はもともとYarnがインストールしてあったからか？yarnがデフォルトで使われました。試しに初期画面を起動してみましょう。

> cd janus-streaming
> yarn serve

ブラウザでhttp://localhost:8080にアクセスして、以下の画面が表示されたら無事にプロジェクトの完成です。

f:id:kimura_khs:20200827000118p:plain:w320

JanusのVue.jsへの組み込み

素のVue.jsプロジェクトができたので、Janusのクライアントライブラリを組み込んでみましょう。検索するといろいろなクライアントライブラリが出てきて、例えばjanus-gateway-jsなどは作りも現代的で便利そうです。

しかし、なかなか情報豊富なものが少なく、無難に本家のものを使うことにしました。ちなみにJanusサーバーはGPLv3ですが、付属のJavaScriptクライアントライブラリ(janus.js)はMITライセンスのようです。以下の公式のドキュメントを参考に組み込んでいきます。

janus.conf.meetecho.com

ライブラリのインストール

まずは、ライブラリを追加します。

> yarn add git://github.com/meetecho/janus-gateway.git

これで、WebRTC Adapterなどの依存ライブラリもインストールしてくれますので便利です。

このJanusクライアントライブラリはJanusオブジェクトをグローバルで保持しています。これをVue.jsに取り込むのにexports-loaderを使います。これもインストールしましょう。

> yarn add exports-loader --dev

これで必要なライブラリの準備が完了です。

Vue.jsへの組み込み

このJanusクライアントライブラリはWebRTC Adapterがグローバル変数として呼び出せることを前提に作られています。そのため、Webpackにちょっと設定をします。公式の例をそのまま移したものがこちらです。

const webpack = require('webpack');

module.exports = {
  plugins: [
    // janus.js does not use 'import' to access to the functionality of webrtc-adapter,
    // instead it expects a global object called 'adapter' for that.
    // Let's make that object available.
    new webpack.ProvidePlugin({ adapter: 'webrtc-adapter' })
  ]
}

さらに、Janusクライアントライブラリでグローバル変数として定義されているJanusオブジェクトを取り込むために、exports-loaderを使います。これも公式の例のコピーです。

module.exports = {
  module: {
    rules: [
      // janus.js does not use 'export' to provide its functionality to others, instead
      // it creates a global variable called 'Janus' and expects consumers to use it.
      // Let's use 'exports-loader' to simulate it uses 'export'.
      {
        test: require.resolve('janus-gateway'),
        loader: 'exports-loader',
         options: {
           exports: 'Janus',
         },
      }
    ]
  }
}

Vue.jsにこれらのWebpack設定を反映させるには、プロジェクトフォルダのトップにvue.config.jsというファイルを作成します。中身は２つを合わせて、このようにします。

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({ adapter: 'webrtc-adapter' })
    ],
    module: {
      rules: [
        {
          test: require.resolve('janus-gateway'),
          loader: 'exports-loader',
          options: {
            exports: 'Janus',
          },
        }
      ]
    } 
  }
}