Vonage Video APIを利用する I

2021-05-08
Vonage
Video API

みなさん、こんにちはマユリです。　今日はVideo APIを利用してビデオチャットをする仕組みを紹介したいと思います。

Vonage社が提供するVideo APIとChat APIを利用します。

 

Video APIに関してはこちらをご参照ください。
ビデオAPI | Vonage (vonagebusiness.jp)

開発ドキュメントはこちらをご参照ください。
Client SDKs | Vonage Video API Developer (tokbox.com)

過去にはtokbox.comとい名前で提供していたサービスになります。買収されて今ではVonage Video API サービスとなっています。

では早速みて行きましょう。

Vonageでは簡単に埋め込むだけでビデオチャットができる仕組みとAPIを使ってカスタマイズできるパターンの二つがあります。開発トップページにてメニューも分かれています。

"Get Started with the API"を選択して進みます。

"Hello World"から始めてみましょう。ここではウェブサイトで自身のカメラを介して閲覧できるようにしてみます。

まずは下記のようなコードを準備します。

<html>
<body>
<!-- OpenTok.js library -->
<script src="https://static.opentok.com/v2/js/opentok.js"></script>
<script>

// credentials


// connect to session

  
// create subscriber


</script>
</body>
</html>

ステップ 1 クレデンシャル

// credentials
の下部分に下記のコードを挿入します。

var apiKey = '45828062'; 
var sessionId = '1_MX40NTgyODA2Mn5-MTYxMjUxMzg5Mjk3N35ocnNLdHZTa0ZVUjBHK1czanVxWG1kMFR-UH4'; 
var token = 'T1==cGFydG5lcl9pZD00NTgyODA2MiZzaWc9MmVmZTRkYzgzZDY5N2NhYjE1NTE1N2FhYjNjZGI5OThlZjg0N2M5NjpzZXNzaW9uX2lkPTFfTVg0ME5UZ3lPREEyTW41LU1UWXhNalV4TXpnNU1qazNOMzVvY25OTGRIWlRhMFpWVWpCSEsxY3phblZ4V0cxa01GUi1VSDQmY3JlYXRlX3RpbWU9MTYxMjUxNzA2NSZub25jZT0wLjIzMjUzODA3MTI1NjQ5MzA2JnJvbGU9cHVibGlzaGVyJmV4cGlyZV90aW1lPTE2MTI2MDM0NjU=';

ステップ 2 セッションの作成とサブスクライバーの作成

次はセッションの作成とサブスクライバー（視聴者）の生成します。

// connect to sessionの下に下記のコードを挿入します。

var session = OT.initSession(apiKey, sessionId);

// create publisher
var publisher = OT.initPublisher();
session.connect(token, function(err) {
   // publish publisher
   session.publish(publisher);
});

ステップ 3 パブリッシャーの作成

次はセッションの作成とサブスクライバー（視聴者）の生成します。

// connect to sessionの下に下記のコードを挿入します。

session.on('streamCreated', function(event) {
   session.subscribe(event.stream);
});
これでおしまいです。次回はこれらのコードの詳細をみて行きます。
公開日: 2021-02-05