針は飲まれぬコンテンツへスキップ針は飲まれぬ誰にも飲まれないようにありたいOpenTokのチュートリアルやってみたTweetこんにちは、@24guchiaです。入社エントリーにある通り、bellFaceに入社しました。bellFace株式会社に入社しましたbellFaceはOpenTokを使っているので、チュートリアルをニート期間中にやってみましたのでまとめておきます。最新の情報はドキュメントを参照してください。使用したい機能をチェックしていくと、opentokをすばやく学ぶための取捨選択と学ぶ順番を決めてくれるのでこれを使いました。進捗が出るのと、Sectionをいくつかに分けてくれるのが便利ですね。僕が選んだ回答だと、Sectionは4つに分かれました。Trackで抽出されたドキュメント同士には特につながりがないのがいまいちだなと感じました。関連性はなく作り直しです。多少過剰でも、一連のチュートリアルがあると楽だなーと思います。platformいわゆるハローワールド系のセクションです。Projectsを作成。Embedのテンプレートを選択すると、プロジェクト名と埋め込むウェブサイトのURLを指定するダイアログが出るのでとりあえず埋めていきます。すると、ビデオチャット用のiframeとscriptがコピーできるようになるので、それを指定したURLに埋め込むとビデオチャットが表示されます。下記エラーが出ました。right.ポートまで指定すると直ります。動くとこんな感じのビデオチャットが表示されます。ngrokでスマホとビデオチャットlocalhostだと、起動しているMacでしか動作確認できないので、とりあえずngrokで公開し、手元のスマホとビデオチャットしました。https://ngrok.com/ngrokはローカル環境をセキュアに外部に公開してくれるサービスで、WebRTC関連だとよくお世話になるサービスです。下記みたいなコマンドを実行するとngrokで外部に公開できます。3000手元のMacとスマホ(Android)でビデオチャットすると、こんな感じになります。小さくワイプで右上に表示されてるのはMacで撮っている動画です。帽子かぶってるのはなんとなく恥ずかしいからですwWebRTCのデバッグ(特にこういうビデオ)でつらいところは、2画面に自分が映るっていうのがなんと言ってもつらいですね。自分の顔を見て何が楽しいのか。ビデオチャットをウェブサイトに埋め込み出来ました。簡単にできていいですね。scriptiframeとscriptの埋め込みタグをtokboxが発行してくれますが、どちらでも動きます。理由はSafariでiframeからマイクとカメラにアクセスできないからと上記ドキュメントに記述がありました。普通にMac,iPhoneのSafariでも動きました。https://bugs.webkit.org/show_bug.cgi?id=182638Webkitのバグチケットに関係ありそうなバグが解決済みとあるので、ドキュメントが古いかも。script,iframe,どっちでもいいんじゃないですかね(適当)僕は一旦、iframeでやりました。Relayedtokboxの管理画面でセッションを作成するときに、MediaModeをRoutedかRelayedを選択できます。下記ドキュメントから概要を抜粋し、違いを列挙しておきます。https://tokbox.com/developer/guides/create-session/RelayedP2P接続するP2Pがファイアーウォールなどで接続できない場合、opentokのTURNサーバを経由するレイテンシーがRoutedより少ないデフォルトではRelayedを利用します。TURNサーバってだいたい追加でお金かかったりするけど、opentokが用意してくれるデフォルト設定だと無料みたいですね。安くはないけど、デフォルトのTURNだと達成できないことも金の力で解決できるのはいいと思います。Routerを使う場合はこちら。機能が多いのが特徴です。参加者が3人までかつ、録画などを使用しない場合はRelayed。参加者が3人より多くなったり、録画やSIPを使う場合はRoutedを使うのが推奨されています。基本的にはRouted使うことなりそうです。チャットルームを分けるiframeのroom部分をクエリストリングで部屋を変えるようにしました。一通り学ぶセクションです。サンプルコードがいまいちだったので、とりあえず下記GitHubに自分が気に入る形で書き直しました。https://github.com/enyuka/opentok_tutorial下記機能を作ってみました。1対1ビデオ通話Pubのリンクを押すとセッション作成して、ランダムに4桁の番号を発行するSubの下にある入力フォームに4桁の番号を入力し、送信。ボタンを押すと画面共有が始まります。ついては次のセクションで学びます。エラーハンドリングとかセキュリティ、セッション保持の方法などめっちゃ適当なので、ご参考程度までにしてください。featuresWeb版ならでの追加機能について学ぶセクションです。Sharinghttps://tokbox.com/developer/guides/screen-sharing/js/動画通話中にアプリなどの画面を相手側に共有する機能がデフォルトで使えます。資料共有とかで使えそう。バージョン52より前IEOpera拡張機能をインストールする必要があります。ChromeとFFは相当古いバージョンなので、あまり気にする必要はなさそうです。利用不可SafariEdge画面共有に限らず、SafariはWebRTC独自路線を突き進んでいるので、なかなか標準サポートが難しそうですね。近々使えるようになるでしょう。Archivinghttps://tokbox.com/developer/guides/archiving/録画機能です。ModeをRoutedにしないと利用できません。Containerにも設定可能です。音声+動画、音声のみ、動画のみも選択可能。音声文字起こしするときは動画部分が不要で、そういうケースは音声のみにするとかで利用するのかな。appデバッグとセキュリティの推奨設定、opentokの接続テストページやインスペクターなどについて学ぶセクションです。運用でにらめっこすることになりそう。デバッグした感じWebRTCやる人ならみんな見る、chrome://webrtc-internalsをビデオ通話中に見ました。VP8この辺は普通ですね。Planは将来やる的なことが書いてありますが、PlanBの削除は2020年の1Q中に予定されています。間に合うのだろうか・・・https://bugs.chromium.org/p/chromium/issues/detail?id=857004PlanB使用率が3〜4%で、ちょっと見直す的なこと書いてあるので、もしかしたら予定は伸びるかも?ただ、PlanB削除に間に合わなくてChromeでopentokが使えなくなる!ってなったら恐ろしい。チュートリアルやってて気になったところシグナリングはWebSocketshttps://tokbox.com/developer/guides/basics/#connectionシグナリングがWebSocketsっていまいちだよねってたまに聞くので少し気になった。何が正解かはわかっていない。ドキュメントにそごが合ったりするjsファイルをコピーせよ→コピーしたjsファイルにホニャララってコメントの下にjsコードをペーストせよ→いや、そんなコメントないけど・・・←イマココまあ、チュートリアルドキュメントにそごがあるのはよくある話ですが、初心者の方はハマりそうですね。戻るとページトップに戻るので、どこまで読んだか再度探す必要がある。右クリックして新しいタブで開くを選ぶと新しいタブで開くけど、コンテキストメニューから選ぶのめんどくさいんですよね。日本マーケットに注力するつもりはなさそうな気がする。チュートリアルのGitHubのコーディングがとっ散らかってるテンプレートファイルがejsだったり、jadeだったり。環境変数に書かせたり、envファイルに書かせたり。引数の取り得る値や戻り値などが網羅されているドキュメントが見つからないですね。自分が気に入る形で書き直したので、それなりの理解が得られました。領域ですが、Voiceの知識が流用できそうでひとまず安心しました。いうわけで、opentokを完全に理解した。エンジニア用語の「完全に理解した」「何も分からない」「チョットデキル」は「ダニング・クルーガー効果」で簡単に説明ができます。これは一種の認知バイアスで能力の低い段階では自分の能力の低さを認識できないためです(過大評価しがち)。その反面で能力が高くなると過少評価しがちです。2020年1月12日こんにちは、@24guchiaです。2020年1月1日こんにちは、@24guchiaです。あけましておめでとうございます。今年もよろしくお願いします。2019年12月29日こんにちは、@24guchiaです。年の瀬ということで、今年、2019年の振り返りです。2019年12月14日こんにちは、@24guchiaです。2019の14日目です。2019年11月1日こんにちは、@24guchiaです。入社エントリーにある通り、bellFaceに入社しました。