saitoxu.io

AboutTwitterGitHub

appear.inのAPIを使って簡単ビデオチャット

April 05, 2017

appear.inという手軽にビデオチャットができるサービスがあります。

最近、自分のサイトに簡単に埋め込める API があるのを知ったので、ちょっと使ってみました。

ドキュメントはこちら

1. サンプルアプリ

チャットルームを生成して、そのルーム参加者とビデオチャットできるものを作りました。

appearin-sample

使い方のイメージはこんな感じです。

Image

2. 実装

SDK は script タグで直接読み込むか、 npm モジュールとして公開されているのでそれを読み込むことで使えるようになります。

基本的な使い方は、

  1. AppearInクラスのインスタンスを生成
  2. ブラウザがビデオチャットに対応しているか確認
  3. 空いているビデオチャットルーム名を生成
  4. iframe に appear.in のビデオチャットを埋め込み

となります。 実際のコードだとこんな感じです ↓

// 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)
view raw sample.js hosted with ❤ by GitHub

また、サンプルアプリのコードはこちらに載せています。

3. おわりに

かなり簡単に使えたので、プライベートのサービスやプロトタイプを作るときなどに役立ちそうです。


© 2020, Yosuke Saito