Tokbox社のOpentokを使ってみたら、瞬速で使えたのでそのときのメモ。

そのまえに

メディアモード
セッション
トークン

上記について。

メディアモード

massie_g氏の
WebRTCプラットフォーム tokboxのopentokを調べてみた(1) 基礎編
でいろいろ書かれていますのでさらっと。

・Relayed(リレーモード)
ダイレクトに接続するため、ネットワーク上のホップが減るため遅延が少ないのが特徴。
ただし、Tokboxメディアサーバ経由じゃないので、便利な機能が使えない。

・Routed(ルートモード)
Tokboxメディアサーバ経由になる。
複数人と会話する場合は、メディアサーバが配信するため、アップロードの通信量が減る。
また、アーカイブ機能（録画してサーバに保存する）や、
オーディオフォールバック（帯域がめっちゃ狭くなると音声のみモードになる）が使える。
ただし、遅延時間が少々増える。

とのこと。
出典：
What is the difference between a Routed vs Relayed Session?

セッション

チャットの感覚でいうところのルームやチャンネルを指す。
まずはセッションを作る必要がある。

トークン

チャットの感覚でいうところのユーザを指す。
セッションに対してトークンを発行し、これを使ってセッションに接続する。

下準備

まずはアカウントを作って、1ヶ月トライアル状態にする。
次に、プロジェクトを作ってAPIキーとSECRETキーを入手する。
そこらへんは気合で。
あと、カメラやマイクを使うにあたってhttpsの通信が必要になるので、
どこかで証明書を発行してもらって通信できるようにしておくことが必要。

使ってみる

OpentokのドキュメントにあるQuick Startでは、手動でセッションとトークンを作って、
JavasctiptにIDをペタッと書いて使っているけれども芸がないので、
セッションとトークンをPHPで作ってみる。
動くことだけを考えてさくっと書いたコードなので、とても雑。

セッションを作る

Opentokが出しているここのサンプルプログラムを参考にして、
composerで環境を作ってPHPで以下のコードを書いてみた。

create_session.php

require "./vendor/autoload.php";

use OpenTok\OpenTok;
use OpenTok\MediaMode;
use OpenTok\ArchiveMode;

$apiKey = '(APIキー)';
$apiSecret = '(シークレットキー)';

$opentok = new OpenTok($apiKey, $apiSecret);

$sessionOptions = array(
    'archiveMode' => ArchiveMode::ALWAYS, // 常に録画
    'mediaMode' => MediaMode::ROUTED // Routedモード
);
// セッションの作成
$session = $opentok->createSession($sessionOptions);

// セッションIDを取得
$sessionId = $session->getSessionId();

echo $sessionId;

ちょう簡単なやつなので、セッションIDはメモっておく。

トークンを作る

トークンを作ってみる。
その後、Javascriptに生成したIDを渡すため、クッキーにIDを入れてみる。

create_token.php

require "./vendor/autoload.php";

use OpenTok\OpenTok;
use OpenTok\Session;
use OpenTok\Role;

$apiKey = '(APIキー)';
$apiSecret = '(シークレットキー)';
$sessionId = '(セッションID)';

$opentok = new OpenTok($apiKey, $apiSecret);

$token = $opentok->generateToken($sessionId,[
    'role'       => Role::MODERATOR, // ロールをモデレータに設定
    'expireTime' => time()+(60 * 60), // 有効期限を1時間に設定
    'data'       => 'name=test'.rand(1000,9999) // 追加情報(name要素を作ってtest+ランダム数字を割当)
]);


// セッションIDをトークンIDをクッキーに入れる
setcookie("tok_session", $sessionId);
setcookie("tok_token", $token);

echo "token created"

フロントエンド

フロントエンドを用意。
Quick Startにあったコードをさくっと流用。

front.html

<!DOCTYPE HTML>
<html>
  <body>
    <script src="cookie.js" charset="utf-8"></script>
    <script src="https://static.opentok.com/v2/js/opentok.js" charset="utf-8"></script>
    <script charset="utf-8">
      var apiKey = '(APIキー)';
      var sessionId = docCookies.getItem('tok_session');
      var token = docCookies.getItem('tok_token');
      var session = OT.initSession(apiKey, sessionId)
        .on('streamCreated', function(event) {
          session.subscribe(event.stream);
        })
        .connect(token, function(error) {
          var publisher = OT.initPublisher();
          session.publish(publisher);
        });
    </script>
  </body>
</html>

接続してみる

ChromeかFirefoxで以下の手順にて接続してみる。

create_session.phpにアクセスして、生成されたセッションIDをcreate_token.phpに書く
create_token.phpにアクセスしてトークンを発行する
最後にfront.htmlにアクセスしておわり

Webcamにアクセスしていいかどうかみたいなメッセージがでると思うので、
そいつを許可してあげると見れると思います。
あとは、シークレットモードや別のPCなどで2と3の手順を行うと、
ブラウザに新しいユーザが追加されて、対話できると思います。

スクショとか用意したかったけど、そのうちに書く気が失せそうだったので、
以上でおわり。

Opentokをとりあえず使ってみるやつ