appear.inのAPIを使って簡単ビデオチャット
April 05, 2017
appear.inという手軽にビデオチャットができるサービスがあります。
最近、自分のサイトに簡単に埋め込める API があるのを知ったので、ちょっと使ってみました。
ドキュメントはこちら
1. サンプルアプリ
チャットルームを生成して、そのルーム参加者とビデオチャットできるものを作りました。
使い方のイメージはこんな感じです。
2. 実装
SDK は script タグで直接読み込むか、 npm モジュールとして公開されているのでそれを読み込むことで使えるようになります。
基本的な使い方は、
AppearInクラスのインスタンスを生成- ブラウザがビデオチャットに対応しているか確認
- 空いているビデオチャットルーム名を生成
- iframe に appear.in のビデオチャットを埋め込み
となります。 実際のコードだとこんな感じです ↓
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 1. AppearInクラスのインスタンスを生成 | |
| const appearin = new AppearIn() | |
| // 2. ブラウザがビデオチャットに対応しているか確認 | |
| appearin.isWebRtcCompatible() | |
| // 3. 空いているビデオチャットルーム名を生成 | |
| appearin.getRandomRoomName().then(roomName => { | |
| // do something | |
| }) | |
| // 4. iframeにappear.inのビデオチャットを埋め込み | |
| appearin.addRoomToElementById("appearin-frame", roomName) |
また、サンプルアプリのコードはこちらに載せています。
3. おわりに
かなり簡単に使えたので、プライベートのサービスやプロトタイプを作るときなどに役立ちそうです。
