tomatoaiu の Tech Blog

プログラミングやツールについてのまとめブログ

MENU

【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を押します。

openvidu-hello-world
http://localhost:8080/

それを押すとブラウザからカメラとマイクを許可してねと言われるので許可します。この後に、404のページが表示されます。ですが、もう一度http://localhost:8080にアクセスすると404は回避でき、利用することができます。なぜそうなるかは分かりませんでした。
そのあとにブラウザをもう一つ開いてhttp://localhost:8080にアクセスします。そして、joinを押すと以下の画像のように通信をしていることを確認できました。

2つのブラウザで映像通信
2つのブラウザで映像通信|二つ目の映像は左右反転したものになる

ちなみに写っているものは、ファミマで購入し飲み干したフルーツミックスです。

参考文献