シェア:
){kind=small}
メグナはサンフランシスコを拠点とするVonageのソフトウェア・エンジニアリング・インターンである。彼女はイリノイ大学アーバナ・シャンペーン校のコンピューター工学科3年生。メグナは、イノベーションについて学ぶことに情熱を注ぎ、次世代のために革新的なテクノロジーを構築したいと考えている。
Experience Composer を Vonage Video API で使用する
所要時間：1 分
エクスペリエンス・コンポーザー エクスペリエンス・コンポーザー（EC）APIは、Vonage Video API（旧 OpenTok）セッションに公開されるストリームとして、Web サイトのレイアウトをキャプチャできる強力なツールです。Web サイトは、エクスペリエンス・コンポーザーがアクセスし、そこからストリームを生成する、一般にアクセス可能な URL である必要があります。
たとえば、以下に私がホストとなり、セッションに公開されたYouTubeビデオのExperience Composerストリームを使用したVonage Video APIセッションを示します。これは、Youtubeビデオのビデオとオーディオとともに、Youtubeウェブサイトをストリーミングしています。
Vonage Video API session with Experience Composer stream of Youtube
このツールは、ホワイトボードやスライドのような共有するコンポーネントがある教育アプリケーションには特に強力です。しかし、これらのコンポーネントは、Vonage Video APIのアーカイブ・ツールではキャプチャされません。そこで、ホワイトボード、スライド、カスタム レイアウト、ダイナミック コンポーネント、その他の Web 要素のストリームをセッションに公開し、アーカイブにキャプチャできるようにする Experience Composer が登場します。
この記事では、開発者がエクスペリエンス・コンポーザーを使用できるさまざまな方法のうち、2つのアプリケーションについて説明します：
Video API セッションへの公開
アーカイブされたVonage Video APIストリームでウェブサイトのレイアウト全体をキャプチャ
私のサンプル・アプリケーションの目標は、Videoストリーマーがビデオを編集する時間を節約し、他のことに時間を使えるようにすることです。Vonageのエクスペリエンス・コンポーザー・ツールを使うことで、ストリーマーはライブ・ストリームとリアクションのビデオ録画、そして自分のカスタム・レイアウトを同じ場所で同時に録画することができます。Experience Composerは、ホストのレイアウトやストリームのビデオを含むアプリケーション全体を録画するために使用することができ、録画後、視聴者に公開する準備が整います。
このサンプル・アプリケーションでは、ストリーマーが Vonage Video API セッションに参加し、ライブストリームの URL を送信して、エクスペリエンス・コンポーザを開始します。これにより、ストリーマーは自分のビデオを左上に表示するパブリッシャーとして機能し、ライブストリームはエクスペリエンス・コンポーザーを介して中央に表示されます。
Vonage Video API session with Experience Composer
アーカイブでは、エクスペリエンス コンポーザーを使用して Web サイトのビデオ ストリームを録画し、ユーザーとライブ ストリームの両方、およびすべての CSS 要素とレイアウトをキャプチャできます。Web ページをアーカイブするには、EC アーカイブ開始ボタンをクリックして、新しいセッションとエクスペリエンス コンポーザを作成する必要があります。この新しいエクスペリエンス コンポーザーは、元のセッションをサブスクライブし、新しいセッションにパブリッシュします。
Video APIアカウント。アカウントをお持ちでない場合は Video API ダッシュボード.
さらに、アカウントにエクスペリエンス コンポーザー アドオンを追加し、プロジェクトで有効にする必要があります。
Video API アカウントで、左側のメニューの［アカウント設定］をクリックします。次に、アカウント アドオンのリストに Experience Composer を追加します。
アカウントでエクスペリエンス コンポーザを有効にした後、プロジェクトの一覧でプロジェクトを選択して、プロジェクトでエクスペリエンス コンポーザを有効にします。プロジェクト設定]で、エクスペリエンス コンポーザーを構成します。
Node.jsバージョン >= 17.7.2
Opentokバージョン >= 2.14.3
まず、クライアントサイドのコード用のフォルダとサーバーサイドのコード用のフォルダを作成します。ここでは、アプリケーションのサーバーサイドの側面に焦点を当てます、 React Hooks で Video API アプリケーションを実装するを参考にしてください。
serverフォルダに、server.jsファイルとpackage.jsonを作成する。必ず Node.jsと Video Node SDKの両方をダウンロードしてください。この記事で書かれたコードは、他に指定がない限り、すべて server.js ファイルに含まれます。
エクスペリエンス・コンポーザを作成する前に、アプリケーション用のサーバーを作成する必要があります。
まず、すべての依存関係をインポートし、プロジェクトの apiKeyと apiSecretをサーバーに保存します。
const https = require('https');
const express = require('express');
const OpenTok = require('opentok');
const apiKey = YOUR_API_KEY;
const apiSecret = YOUR_API_SECRET;便宜上 を使うことをお勧めする。を使うことをお勧めする。しかし、こちらの記事も参考にしてほしい、 Node.js APIを構築する5つの方法をご覧ください。
Expressアプリを初期化し、新しい opentokオブジェクトをインスタンス化します。
const app = express()
var opentok = new OpenTok(apiKey, apiSecret);次にVonage Video APIセッションを作成します。 createSession.(セッションをアーカイブするには、ルーティングする必要があります）。
opentok.createSession({mediaMode:"routed"},function (err, session) {
if (err) return console.log(err);
app.set('sessionId', session.sessionId);
});サーバーを未使用のポートで実行するように設定します。
app.listen(process.env.PORT || 3001, function () {
console.log('Server listening on PORT 3001');
});ここで、Videoを送信するためのGETリクエストを作成する必要があります。 apiKey, sessionIdと tokenをクライアントに送信します。
app.get('/api', (req, res) => {
var sessionId = app.get('sessionId');
var token = opentok.generateToken(sessionId);
app.set('token', token);
res.json({apiKey:apiKey, sessionId:sessionId, token:token});
});
最後に、エクスペリエンス・コンポーザーの使用を開始します！
エクスペリエンス・コンポーザーを作成するには、次の URL に HTTP POST 要求を行う必要があります： https://video.api.vonage.com/v2/project/<API_Key>/render/
リクエストのヘッダーには、HTTPヘッダー X-OPENTOK-AUTHと有効な JSON ウェブトークンが含まれていなければなりません。
リクエストの本文には dataVonage Video API セッションの id, tokenなどのプロパティが含まれます。これらのプロパティには、クライアントからの入力 URL が含まれます。URL は、エクスペリエンス・コンポーザーがページ全体をキャプチャできるように、一般に公開する必要があります。
(を参照してください。 エクスペリエンス コンポーザー REST ドキュメントドキュメントに従ってください)。
(<API_Key>をAccountのAPI Keyに、<JSON_Web_Token>を有効なJWTトークンに置き換える必要があります)
app.post('/store-data',(req, res) => {
//retrieve URL from user input
let URL= req.body.ecidURL;
var ECID = '';
const data = JSON.stringify({
"sessionId": (app.get('sessionId')),
"token": (app.get('token')),
"url": (URL),
"maxDuration": 1800,
"resolution": "1280x720",
"properties": {
"name": "Live Stream"
}
});
const options = {
hostname: 'api.opentok.com',
port: 443,
path: '/v2/project/<API_Key>/render',
method: 'POST',
headers: {
'X-OPENTOK-AUTH':<JSON_Web_Token>,
'Content-Type': 'application/json'
},
};
var body =[];
const request = https.request(options, response => {
response.on('data', (chunk) => {
body.push(chunk);
}).on('end', () => {
body = Buffer.concat(body).toString();
var InfoObj = JSON.parse(body);
ECID = InfoObj.id;
app.set('experienceComposerId', ECID);
});
});
request.on('error', error => {
console.error(error);
});
request.write(data);
request.end();
res.redirect('http://localhost:3000/');
});このHTTPリクエストの後、サーバーはクライアントにリダイレクトする。
これで、Vonage Video API セッションにサブスクライブされているエクスペリエンス コンポーザが正常に開始されました！
このエクスペリエンス・コンポーザー・ストリームを停止するには、次の URL に HTTP 削除要求を送信します：
https://video.api.vonage.com/v2/project/<API_Key>/render/<ExperienceComposerId>/
このリクエストは、上記のPOSTリクエストとよく似ているが、ヘッダーメソッドが DELETEの代わりに POSTになり、リクエストのボディはセッション idと token.
app.get('/stopEC', (req, res)=>{
var experienceComposerId = '';
experienceComposerId = app.get('experienceComposerId')
const data = JSON.stringify({
"sessionId": (app.get('sessionId')),
"token": (app.get('token')),
}
});
const options = {
hostname: 'api.opentok.com',
port: 443,
path: `/v2/project/47525941/render/` + String(experienceComposerId),
method: 'DELETE',
headers: {
'X-OPENTOK-AUTH':(projectJWT),
'Content-Type': 'application/json'
},
};
const request = https.request(options, response => {
console.log(`statusCode: ${response.statusCode}`);
response.on('data', d => {
process.stdout.write(d);
});
});
request.write(data);
request.end();
res.redirect('http://localhost:3000/');
});
これにより、Experience Composer ストリームが停止し、Vonage Video API セッションから削除されます。
現在のセッションとウェブサイトのレイアウトをアーカイブするには、新しいセッションとトークンを作成します。
を呼び出す。 createSessionと generateToken関数を呼び出し、新しいセッション idと tokenを保存します。
opentok.createSession({mediaMode:"routed"},function (err, sessionECArchive) {
if (err) return console.log(err);
app.set('sessionIdECArchive', sessionECArchive.sessionId);
});
var tokenECArchive = opentok.generateToken(sessionIdECArchive, option);
app.set('tokenECArchive', tokenECArchive);新しいセッション idと tokenがあるため、上記と同じ HTTP POST 要求を呼び出して、新しいエクスペリエンス・コンポーザーを開始します。必要な変更は、新しいセッション idと tokenを、Web サイトを共有する URL に変更することです。 <host_link>をWebサイトを共有するURLに変更することです。(リンクは一般にアクセス可能である必要があることを忘れないでください。 Herokuまたは ngrok).さらに、エクスプレス・アプリケーションでエクスペリエンス・コンポーザー idをexpressアプリ内に別の名前で保存し、このExperience Composerにアクセスできるようにする必要がある。
app.post('/startArchivingEC', function(req, res){
var ECIDArchive = '';
const data = JSON.stringify({
"sessionId": (app.get('sessionIdECArchive')),
"token": (app.get('tokenECArchive')),
"url": (host_link),
"maxDuration": 1800,
"resolution": "1280x720",
"properties": {
"name": "Live Stream"
}
});
const options = {
hostname: 'api.opentok.com',
port: 443,
path: '/v2/project/47525941/render',
method: 'POST',
headers: {
'X-OPENTOK-AUTH':(projectJWT),
'Content-Type': 'application/json'
},
};
var body =[];
const request = https.request(options, response => {
response.on('data', (chunk) => {
body.push(chunk);
}).on('end', () => {
body = Buffer.concat(body).toString();
console.log(body);
var InfoObj = JSON.parse(body);
ECID = InfoObj.id;
console.log(ECIDArchive);
app.set('ECIDArchive', ECIDArchive);
});
});
request.on('error', error => {
console.error(error);
});
request.write(data);
request.end();
コンソールに、新しいセッションで新しいエクスペリエンス・コンポーザーが正常に作成されたことが表示されます。新しいセッションで startArchive関数を呼び出すことで、このセッションのアーカイブを開始できます。 id.返されたアーカイブ idを express アプリに保存しておく必要があります。
setTimeout(() => {
opentok.startArchive(app.get('sessionIdECArchive'), function (
err,
archive
) {
if (err) {
return console.log(err);
} else {
console.log("new archive:" + archive.id);
app.set('archiveIdEC', archive.id);
}
}) }, 5000);
res.redirect(host_link);
})
現在のセッションと Web サイト レイアウトのアーカイブを停止するには、上記と同じ HTTP DELETE 要求を実行してエクスペリエンス コンポーザーを停止する必要があります。
app.post('/stopArchivingEC', function(req, res){
var ECIDArchive = '';
ECIDArchive = app.get('ECIDArchive');
console.log('ECID: ');
console.log(ECIDArchive);
const data = JSON.stringify({
"sessionId": (app.get('sessionIdECArchive')),
"token": (app.get('tokenECArchive'))
});
const options = {
hostname: 'api.opentok.com',
port: 443,
path: `/v2/project/47525941/render/` + String(ECIDArchive),
method: 'DELETE',
headers: {
'X-OPENTOK-AUTH':(projectJWT),
'Content-Type': 'application/json'
},
};
const request = https.request(options, response => {
console.log(`statusCode: ${response.statusCode}`);
response.on('data', d => {
process.stdout.write(d);
});
});
request.write(data);
request.end();
その後に stopArchive関数を呼び出す。
opentok.stopArchive(app.get('archiveIdEC'), function (err, archive) {
if (err) return console.log(err);
console.log("Stopped archive:" + archive.id);
});
res.redirect(host_link);
})
Experience Composer にはさまざまなアプリケーションがあります。このチュートリアルでは、ビデオ、ドキュメント、スライド、ホワイトボード、その他の機能など、Web サイトのストリームを作成し、Vonage Video API セッションに公開するために使用できることを示しました。さらに、ロゴ、Web コンポーネント、フォーマットされたレイアウトを使用して自分の Web サイトを完全にカスタマイズし、Experience Composer ストリームの形で完全なエクスペリエンスをキャプチャすることもできます。
このチュートリアルで、エクスペリエンス・コンポーザーの使用例と、それを自分のプロジェクトにどのように適用できるかをご理解いただけたと思います！エクスペリエンス・コンポーザーをどのように楽しんでいるか、当社の VonageコミュニティSlackまたは ツイッター.