Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
12
Help us understand the problem. What are the problem?

posted at

updated at

【10分でできる】SkyWayを使ってビデオチャットアプリを作成してHerokuでデプロイする方法

プログラミング勉強日記

2021年3月19日
SkyWayでビデオチャットアプリを作る方法はいくつかのサイトに載っていたが、Herokuでデプロイするのが大変だったので、記事に残しておく。

開発環境と前提条件

  • Windows10
  • Node.jsが入ってる
  • npmコマンドが使える
  • Herokuのアカウント登録がある

ビデオチャットアプリを作る

1. SkyWayの登録・ログインする

 こちらから無料で始めるをクリックして、会員登録をする。

image.png

2. SkyWayでアプリケーションを作成する

 アプリケーション説明文にvideochat-sample, 利用可能ドメイン名にlocalhostvideochat-sample.herokuapp.comを入力する。

image.png

image.png
image.png

アプリを作成するとAPIキーを取得できる。

image.png

3. GitHubからサンプルコードを入手する

 SkyWayで作成したアプリケーション説明文と同じ名前のフォルダを作る。
 SkyWayの公式のGitHubからサンプルコードを取得し、作ったフォルダに入れる。

image.png

image.png

4. ローカルで動かす方法

 _shared/key.jsの中身をSkyWayで取得したAPIキーを入力する。

_shared/key.js
window.__SKYWAY_KEY__ = '<YOUR_KEY_HERE>';

 コードを保存してるディレクトリの中でローカルサーバを立ち上げる。

$ ruby -run -e httpd . -p 8080

image.png

 ブラウザでlocalhost:8080にアクセスすると、以下のようにビデオチャットが作成されてる。
image.png

Herokuを使ってデプロイする方法

1. expressをインストールする

 ディレクトリの中で下記コマンドを入力

$ npm init 
$ npm install express

 色々聞かれるが全てEnterで問題ない。expressのインストールが終了すると、package.jsonpackage-lock.jsonが作成される。
image.png

package.json
{
  "name": "videochat-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node app.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^8.2.0",
    "express": "^4.15.3"
  }
}

2. app.jsファイルを作成する

 ディレクトリ直下にapp.jsファイルを作成する。

videochat-sample/app.js
var express = require('express');
var app = express();

app.use(express.static('public', { hidden: true }));
app.listen(process.env.PORT || 8080);

3. フォルダを整理する

 ページにアクセスしたときにすぐにチャット画面が開くように、ディレクトリの中を整理する。publicフォルダを作成し、_shared, p2p-data, p2p-media, roomをpublicの中に入れる。roomフォルダの中にあるindex.htmlscript.jsをpublic直下に置く。
 文章だとわかりにくいので、以下の写真のようになるようにする。

image.png

 階層を変えたので、public/index.htmlのパスを変更する。

public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SkyWay - Room example</title>
    <link rel="stylesheet" href="_shared/style.css">
  </head>
  <body>
    <div class="container">
      <h1 class="heading">Room example</h1>
      <p class="note">
        Change Room mode (before join in a room):
        <a href="#">mesh</a> / <a href="#sfu">sfu</a>
      </p>
      <div class="room">
        <div>
          <video id="js-local-stream"></video>
          <span id="js-room-mode"></span>:
          <input type="text" placeholder="Room Name" id="js-room-id">
          <button id="js-join-trigger">Join</button>
          <button id="js-leave-trigger">Leave</button>
        </div>

        <div class="remote-streams" id="js-remote-streams"></div>

        <div>
          <pre class="messages" id="js-messages"></pre>
          <input type="text" id="js-local-text">
          <button id="js-send-trigger">Send</button>
        </div>
      </div>
      <p class="meta" id="js-meta"></p>
    </div>
    <script src="//cdn.webrtc.ecl.ntt.com/skyway-4.4.0.js"></script>
    <script src="_shared/key.js"></script>
    <script src="script.js"></script>
  </body>
</html>

 ここで再度ローカルで動くか確認してみてください。

ローカルで動かす
node app.js

4. Herokuにログインする

 Git Bashで以下のコマンドを入力すると、ブラウザが開くのでログインする。

$ heroku login

image.png

5. Herokuでアプリを作成する

 今までと同じ名前でアプリを作成する。

Gitbash
$ heroku create videochat-sample

6. Herokuにデプロイする

$ git init
$ git add .
$ git commit -m "create app"
$ git remote add heroku https://git.heroku.com/videochat-sample.git
$ git push heroku master

 https://videochat-sample.herokuapp.com/にアクセスすると表示される。このとき、httpssを入れることを忘れないように!

image.png

最後に

 4日間かけてアプリを作成してデプロイしたのをまとめた。アプリ名(今回ならvideochat-sample)を全て統一することが重要なので、スペルミス等注意が必要。
 ただ、この方法だと誰でもAPIキーを見れてしまうので、環境変数に入れてうまく隠す必要がある。APIキーを隠す方法もできたら記事に書こうと思う。

 もう1度手順を踏んでやっていたがエラーがあって何度かやり直したので、これだけではいけないかもしれないです…何かありましたらコメントください!
 最後まで読んでいただき、ありがとうございました。

参考文献

【爆速!】5分でビデオチャットを構築する
WebRTC Platform SkyWay
SkyWayを使って多人数ビデオチャットを作ってみた

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
12
Help us understand the problem. What are the problem?