シェア:
){kind=small}
ミーシャは カスタマー・ソリューション・エンジニアVonage のカスタマー・ソリューション・エンジニアで、Video API の開発に専念している。サンフランシスコの喧騒からウィスコンシン州ミルウォーキーの魅力へ移り、現在は中西部の隠れた魅力を発見することに余暇を費やしている。
友達や同僚と画面を共有する
所要時間：1 分
特定のシナリオでは、複数の画面を同時に共有する必要があるかもしれません。Vonage Video APIを使えば、まさにそれが可能になります。
このブログ記事では、Vonage Video APIを利用して、複数の画面共有ストリームを同時に表示できる簡単なJavascriptアプリケーションの作り方を紹介します。これは、共同作業や、友人や家族と一緒に三目並べゲームをするような単純な楽しみのために役立ちます。
このプロジェクトを開発するには、以下のものが必要だ：
Vonage Video APIアカウント
JavaScriptの基礎知識
ビデオAPIドキュメント
特定のGitHubリポジトリをクローンする
このチュートリアルでは、Opentok GithubディレクトリのBasic Video Chatサンプルを出発点として使用します。以下のリポジトリをダウンロードしてください。 https://github.com/opentok/opentok-web-samplesこのリポジトリの Basic Video Chat の部分を使用します。
Vonage Video APIアカウントから生成されたセッションIDとトークンを使用します。以下をご覧ください tokbox.com/accountに情報をコピーペーストしてください。 config.jsファイルにコピーペーストしてください。デプロイされたアプリケーションでは、セッション ID とトークンは バックエンドサーバー.
基本ビデオチャットのサンプルアプリで、index.html に移動し、画面共有用のボタンを追加しましょう。
HTMLページの <body>HTMLページの
<button onclick=”screenShare()”>Share your screen </button>
次に js/app.jsに移動し、以下を追加する。 screenShare()関数を追加します：
function screenShare() {
OT.checkScreenSharingCapability(function(response) {
if(!response.supported || response.extensionRegistered === false) {
console.log("screen sharing is not supported")
} else if (response.extensionInstalled === false) {
console.log("older browser like IE might require a plugin")
} else {
// Screen sharing is available. Publish the screen.
var publisher = OT.initPublisher('screenshare',
{videoSource: 'screen'},
function(error) {
if (error) {
console.log(error);
} else {
session.publish(publisher, function(error) {
if (error) {
console.log(error);
}
});
}
}
);
}
});
}この後 index.htmlファイルに戻り <div>を追加する：
<div>
<div id=”subscriber”></div>
<div id=”publisher”></div>
<div id=”sceenshare”></div>
</div>
パブリッシャー、サブスクライバー、スクリーン共有のストリームを分離し、スクリーン共有のアクティビティ中にユーザーがお互いを見ることができるようにしたいと思います。レイアウトのスタイルを追加するために css/app.cssファイルを更新してレイアウトのスタイルを追加することができますが、何も変更しなければ、画面共有ストリームは左上隅に表示されます。
テストするには、ブラウザ（Google Chromeなど）で index.htmlファイルをブラウザ（Google Chromeなど）で開き、動画を公開し、動画ストリームの下にある「画面を共有」ボタンをクリックしてください。その後、別のデバイスやブラウザから参加し、これをテストしてください！
最後に、この記事では基本的なビデオチャットアプリに画面共有機能を追加して、ユーザーが同時に画面を共有できるようにする簡単な方法を紹介しました。これは、既存の OpenTok GitHub リポジトリの HTML ファイルと JavaScript ファイルを拡張することで実現しました。