【OpenVidu】Web上で映像通信する｜セットアップ
モチベーション
OpenViduはブラウザ上で簡単に映像通信(WebRTCを利用の通信)を行うことができるらしい。研究で、映像通信を行うので確かめてみたい。
大体、ここに書いてあることを行えばok。
環境
- Docker version 19.03.1, build 74b1e89
- iTerm2: Build 3.3.2
- fish: version 3.0.2
- Node.js: v12.4.0
- npm: 6.9.0
- anyenv: 1.1.1
- nodenv: 1.3.0+5.ae0f24a
- Visual Studio Code: Version: 1.37.1
- Google Chrome: バージョン: 76.0.3809.87（Official Build） （64 ビット）
セットアップ
client(browser)のセットアップ
まずは、クライアント側のセットアップをします。クライアント側には、githubにupされているチュートリアルを用います。
▼ fish
git clone https://github.com/OpenVidu/openvidu-tutorials.git
git clone できたら、クライアントのソースをサーブするためにhttp-server をnpmからDLします。
▼ fish
npm install -g http-server
http-server をDLできたら、パスを通します。私の環境だとfishを利用しているので config.fish を修正します・
▼ fish
code ~/.config/fish/config.fish
▼ config.fish
set -x PATH $PATH $HOME/.anyenv/envs/nodenv/versions/12.4.0/lib/node_modules/http-server/bin
▼ fish
source ~/.config/fish/config.fish
パスが通ったので、http-server で以下のコマンドを叩いて、クライアント側を実行しておきます。
▼ fish
http-server openvidu-tutorials/openvidu-hello-world/web
server(openvidu-server-kms)のセットアップ
サーバー側は、Dockerを利用します。以下のコマンドを新しいターミナルを開いて叩いて、サーバーを稼働させておきます。
▼ fish
docker run -p 4443:4443 --rm -e openvidu.secret=MY_SECRET openvidu/openvidu-server-kms:2.11.0
利用
クライアント側とサーバー側をどちらも起動できたので、ブラウザ(Google Chrome)を立ち上げてhttp://localhost:8080にアクセスします。すると以下のようなページが表示されるので、joinを押します。
それを押すとブラウザからカメラとマイクを許可してねと言われるので許可します。この後に、404のページが表示されます。ですが、もう一度http://localhost:8080にアクセスすると404は回避でき、利用することができます。なぜそうなるかは分かりませんでした。
そのあとにブラウザをもう一つ開いてhttp://localhost:8080にアクセスします。そして、joinを押すと以下の画像のように通信をしていることを確認できました。
ちなみに写っているものは、ファミマで購入し飲み干したフルーツミックスです。
参考文献
- リンク切れ
OpenVidu Documentation - openvidu-hello-world, 入手先 https://openvidu.io/docs/tutorials/openvidu-hello-world/ - OpenVidu Docs , 入手先 https://docs.openvidu.io/en/2.13.0/tutorials/openvidu-hello-world/
