【ビデオ通話APIを利用し1日で開発】バーチャルランチクラブでのビデオ通話機能の実装方法を紹介します

カジュアルなビジネス1on1マッチングなら - VLC

2020年7月30日 18:16

バーチャルランチクラブの山本です。

2020年7月始めにリリースしたバーチャルランチクラブですが、毎週100件以上の素敵なマッチングが生まれ、ユーザーさん同士でオンラインでビデオ通話を日々楽しんでいただいています！

わたしもこの3週間で約40名の方とオンラインでビデオ通話でお話しさせていただきました。

個人的にバーチャルランチクラブを利用して最も良いと感じたポイントは以下の3点です。

・今まで接点が無かった方とフラットに話せるのが新鮮（ここ数年間、仕事以外であまり新しい人と出会えていなかった）

・ひさしぶりの人と話すきっかけが作れる（リアルで15分だけ話しましょうとはなかなか言えない）

・オンラインでの15分のビデオ通話がとても気軽（話したいことだけを話せるのが良い）

特に3点目のサービス内のビデオ通話機能については、わたしがお話しさせていただいた方からも「便利！」「どうやって作ってるんですか？」とよく言っていただけます。

というわけで、今回の記事ではバーチャルランチクラブでどのようにしてビデオ通話機能を実装しているか紹介したいと思います。

ビデオ通話の実装方法

最初に結論を言うと、、

Daily.co で実装しました！

https://www.daily.co/

以上です！という感じで、Daily.coのデベロッパーフレンドリーなAPIには本当に感謝しています。Tokbox などの他のAPIと比較しても、ライトなビデオ通話機能であればDaily.coが一番開発しやすかったです。実際のビデオ通話機能の開発には1日もかかっていないと思います。

決済APIのStripeのように、ビデオ通話といえばDaily.coみたいになるのではないかというポテンシャルを感じるサービスです。

価格も適正で、現在バーチャルランチクラブでは$9/月+従量課金のプランを利用していますが、現在の利用量だと月$50くらいで収まりそうです。

バーチャルランチクラブのこの3週間のDaily.coのデータ↓

スクリーンショット 2020-07-30 17.38.57

詳しい実装方法

さて、ここからはDaily.coを利用したビデオ通話の詳しい実装方法を紹介します（コードでの説明になります）。

Daily.coの利用方法はいくつかありますが、ここではバーチャルランチクラブ（Ruby on Rails）での利用方法を紹介します。

①開発者登録し、APIキーを取得

②Daily.coの「ルーム作成」APIにPOSTリクエスト

※コードの例

require 'uri'
require 'net/http'
require 'openssl'

url = URI("https://api.daily.co/v1/rooms")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
http.verify_mode = OpenSSL::SSL::VERIFY_NONE

request = Net::HTTP::Post.new(url)
request["content-type"] = 'application/json'
request["authorization"] = 'Bearer '

response = http.request(request)
puts response.read_body

③レスポンスの情報をデータベースに保存

※コードの例

{
 "id": "d61cd7b2-a273-42b4-89bd-be763fd562c1",
 "name": "w2pp2cf4kltgFACPKXmX",
 "api_created": true,
 "privacy":"public",
 "url":"https://api-demo.daily.co/w2pp2cf4kltgFACPKXmX",
 "created_at":"2019-01-26T09:01:22.000Z",
 "config":{
   "start_video_off": true
 }
}

④ビデオ通話画面でスクリプトを実行

※コードの例

<script crossorigin src="https://unpkg.com/@daily-co/daily-js"></script>
<script>
callFrame = window.DailyIframe.createFrame();
callFrame.join({ url: "#{作成したDaily.coのRoomのURL}" })
</script>

⑤完成🎉