見出し画像

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

バーチャルランチクラブ

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

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

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

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

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

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

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

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

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


ビデオ通話の実装方法

画像1

最初に結論を言うと、、

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>

⑤完成🎉

画像3

HTMLだけのサンプルコード

無茶苦茶シンプルですよね!

以下のURLでデモを体験することも可能です。

https://demos.daily.co/static-demos/simple-demo/simple.html


まとめ

今後、ビデオ通話を内蔵したアプリやサービスは増えてくると思いますので、そんな時には Daily.co の利用を検討してみてください!

またDaily.coのビデオ通話機能を実際に体験してみたい方は、ぜひわたしとバーチャルランチクラブでお話ししましょう!

https://www.virtual-lunchclub.jp/u/daisaku






この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
バーチャルランチクラブ
明日から一緒に仕事できるかもしれない人とオンラインで15分だけ話してみよう。15分のビデオ通話で、仕事の情報収集から副業・転職、ビジネスのマッチングまでできます。 https://www.virtual-lunchclub.jp/