Vue.jsで自前のWebRTCフロントエンドを作ろう!~その1:準備編JanusというオープンソースのWebRTCサーバーがあり、ビデオチャットやストリーミングのサーバーを自前で構築できます。以前の記事で紹介しました。www.mikan-tech.net前回はJanusをサーバーにインストールして、デモ画面を動かしてみました。独自画面を作りたいですよね。カスタマイズも手間がかかります。そこで今回は、Vue.jsで一から独自画面を作ってみました。手頃そうなストリーミングの画面を作ってみます。Vue.jsのプロジェクト作成まずはVue.jsのプロジェクトを作成してみましょう。Node.jsがインストールしてあるものとします。CLIというものをインストールすると、簡単にVue.jsのプロジェクトのひな形ができます。CLIがインストールできました。<プロジェクト名>でプロジェクトのテンプレートを作れます。create"が使えない場合は、おそらくvueコマンドのバージョンが1か2の古いバージョンと思われます。@vue/cli"でインストールし直してください。執筆時点(2020年8月)で、Vue2とVue3が選べました。featuresもあります。features今回はシンプルなJanusストリーミング画面のみのプロジェクトにするので、Vue2のDefaultにしました。Defaultの場合は他に何も聞かれず、自動でダウンロード・構成してくれて、プロジェクトフォルダが完成します。私の場合はもともとYarnがインストールしてあったからか?yarnがデフォルトで使われました。試しに初期画面を起動してみましょう。serveブラウザでhttp://localhost:8080にアクセスして、以下の画面が表示されたら無事にプロジェクトの完成です。JanusのVue.jsへの組み込み素のVue.jsプロジェクトができたので、Janusのクライアントライブラリを組み込んでみましょう。検索するといろいろなクライアントライブラリが出てきて、例えばjanus-gateway-jsなどは作りも現代的で便利そうです。情報豊富なものが少なく、無難に本家のものを使うことにしました。ちなみにJanusサーバーはGPLv3ですが、付属のJavaScriptクライアントライブラリ(janus.js)はMITライセンスのようです。以下の公式のドキュメントを参考に組み込んでいきます。janus.conf.meetecho.comライブラリのインストールまずは、ライブラリを追加します。Adapterなどの依存ライブラリもインストールしてくれますので便利です。このJanusクライアントライブラリはJanusオブジェクトをグローバルで保持しています。これをVue.jsに取り込むのにexports-loaderを使います。これもインストールしましょう。--devこれで必要なライブラリの準備が完了です。Adapterがグローバル変数として呼び出せることを前提に作られています。そのため、Webpackにちょっと設定をします。公式の例をそのまま移したものがこちらです。]}さらに、Janusクライアントライブラリでグローバル変数として定義されているJanusオブジェクトを取り込むために、exports-loaderを使います。これも公式の例のコピーです。}}Vue.jsにこれらのWebpack設定を反映させるには、プロジェクトフォルダのトップにvue.config.jsというファイルを作成します。中身は2つを合わせて、このようにします。}}これで準備は完了です。次回はいよいよこのライブラリを使って、ストリーミングの画面を作っていきます!!ぜひご覧ください。Piはパソコンやサーバーと同じLinuxが動きます。»スポンサーリンクスポンサーリンクプロフィール無線モジュールのファームウェア開発を中心に、IoTサービス全般の開発に携わるエンジニアです。reserved.引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。