まずはビデオチャットシステムを使ってみる

[jinn0027]

SkyWayというオープンソースのシステムが提供されているらしいので、まずはこれを試してみる。

[jinn0027]

参考リンク

SkyWayを使って多人数ビデオチャットを作ってみた https://qiita.com/neriai/items/b96bb88f39903a2abf85

Heroku初心者がHello, Herokuをしてみる https://qiita.com/arashida/items/b2f2e01259238235e187

Getting Started on Heroku with Node.js https://devcenter.heroku.com/articles/getting-started-with-nodejs

The Heroku CLI https://devcenter.heroku.com/articles/heroku-cli

[5分でできる] Node.jsでつくったWebアプリを無料でサーバー公開する方法(前編) https://note.com/w0o0ps/n/n357f57db3e3e [5分でできる] Node.jsでつくったWebアプリを無料でサーバー公開する方法(後編) https://note.com/w0o0ps/n/n2eca493ced5d

[jinn0027]

まずはherokuのwebアプリのnode.jsサンプルをローカルのubuntu@windows10で動かした。

git clone https://github.com/heroku/node-js-getting-started.git
cd node-js-getting-started/
npm install express --save
npm start

これでブラウザが立ち上がるところまでは確認した。 これをHeroku上で動かすのが次のステップ。

[jinn0027]

herokuにアカウントを作成した。 続いてcliをubuntu@windows10上にrootで以下のようにインストールした。

curl https://cli-assets.heroku.com/install.sh | sh

$>heroku --version
heroku/7.42.5 linux-x64 node-v12.16.2

で正しくインストールはできたらしい。

[jinn0027]

次に以下の手順を試す。 SkyWayを使って多人数ビデオチャットを作ってみた https://qiita.com/neriai/items/b96bb88f39903a2abf85

いきなりanywayとかいうのをインストールするらしい。これは何かというと https://qiita.com/yutackall/items/6c48cf56317d8501f6df

anyenv とは、ざっくり言うと、rbenv とか、nbenv とか複数バージョンを インストールできる **env 系をまとめて管理できるツール。 とのこと。

ふーん便利と思ったけど、考えてみたらすでにnode.jsをインストールしていたので、

$>node -v
v10.16.3

このプロセスは一旦スキップ。

[jinn0027]

以下に従ってheroku上にアプリを作成してみる。 https://qiita.com/arashida/items/b2f2e01259238235e187

アプリ名はまずはこの通りhelloHerokuとする。

herokuのcliはemacsのshellからだと正しく動かなかった。 それ以外は全て上のページの通りにした。

$ mkdir helloHeroku
$ cd helloHeroku

$ touch index.php
$ touch composer.json

index.php

＜?php
echo "Hello, Heroku!!!";

$ git init
$ git add .
$ git commit -m "hello heroku commit"

$>heroku create
Creating app... done, ⬢ fierce-tundra-71453
https://fierce-tundra-71453.herokuapp.com/ | https://git.heroku.com/fierce-tundra-71453.git
$>

heroku open

ではブラウザは立ち上がらなかったが https://fierce-tundra-71453.herokuapp.com/ を直接見たら正しく立ち上がっていた。

[jinn0027]

次にSkyWayのアカウントを取得した。 その後、アプリを作成。ドメイン名は先ほどの fierce-tundra-71453.herokuapp.com とする。 これで作成するとアプリケーションキーが取得できた。

[jinn0027]

index.phpとか削除してやってみたらダメだった。 もう一度herokuアプリを作り直してからやった方が良さそう。

次のアプリ名はそのままvideo-chatとしてみる。

[jinn0027]

次は以下

Creating app... done, ⬢ shielded-sierra-92216
https://shielded-sierra-92216.herokuapp.com/ | https://git.heroku.com/shielded-sierra-92216.git

これをSkyWayのアプリケーションに反映する。

[jinn0027]

謎のエラーが発生

(index):1 A cookie associated with a cross-site resource at http://skyway.io/ was set without the `SameSite` attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
peer.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
multiparty.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
screenshare.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
(index):51 Uncaught ReferenceError: MultiParty is not defined
    at (index):51

[jinn0027]

これを見るとビデオのところまでは動いた。ただしSkyWayまでは行っていない。 https://webrtc.ecl.ntt.com/documents/javascript-sdk.html#_4-tips

以下にサンプルがある。 https://github.com/skyway/skyway-js-sdk/tree/master/examples/room

[jinn0027]

https://github.com/skyway/skyway-conf から以下のアーカイブをダウンロードして https://github.com/skyway/skyway-conf/archive/master.zip

npm init (emacs shellだとダメ)
npm run dev

としたらエラーがでた。

sh: 1: webpack-dev-server: not found

ググると https://qiita.com/bumptakayuki/items/01c3ebeb928a127e7af9 に以下のようにしろと書いてあった。 rootで

$ npm install webpack-dev-server -g

でダメでもう一度ググると https://stackoverflow.com/questions/29492240/error-cannot-find-module-webpack では

I see, npm install -g webpack didn't work for me either. But it does with npm install webpack - make sure you are in the app root folder when you call npm install webpack t とあり

$ npm install webpack

をやったら

$ npm run dev

で動いて http://localhost:9000/webpack-dev-server/ で正しく表示された。

[jinn0027]

次に

$ npm run build

でコードを生成し

$ git init
$ git add .
$ git commit -m "."
heroku create

Creating app... done, ⬢ secret-mountain-02812
https://secret-mountain-02812.herokuapp.com/ | https://git.heroku.com/secret-mountain-02812.git

となった。 このドメインをSkyWayに登録。

$ git push heroku master

としてから https://secret-mountain-02812.herokuapp.com/ ではエラー。

[jinn0027]

なんかfavicon.icoが見つからない503エラー。ググると

https://stackoverflow.com/questions/31075893/im-getting-favicon-ico-error

なのでindex.html/conf.htmlのfavicon.icoのところを

  ＜link rel="icon" href="data:;base64,iVBORw0KGgo=">

と修正はしたがダメ。

アクセスのアドレスは以下か。 https://secret-mountain-02812.herokuapp.com:9000/webpack-dev-server/ と思ってやってみたがつながらない。

[jinn0027]

ソースコードをちゃんと理解しないとダメか。

しょうがないので、まずは https://shielded-sierra-92216.herokuapp.com/ でビデオは動いたので、ここから少しずつ学んでいこうと思う。

結局ここが一番近道かもしれない。video-chat https://webrtc.ecl.ntt.com/documents/javascript-sdk.html#_4-tips

[jinn0027]

localでは動いた。 https://github.com/skyway/skyway-js-sdk からファイルを持ってくる。 プロジェクトの先頭（skyway-js-sdk-master)で

$ npm install -s skyway-js

そのあとはpython3だとSimpleHTTPServerではなく

$ python -m http.server 8000

と起動する。 あとは https://localhost:8000 からexamples->room とかをChromeの複数タブで選ぶ。