ユーザー名とルーム名を入力すれば、ルームに接続されるはずです。同じように繰り返せば、それら同士でビデオチャットが成立します。ここまでが上手くいったら、いよいよ画面共有機能を追加してみましょう。画面共有機能の追加まであと一歩です。最初に、ブラウザがスクリーンキャプチャに対応しているかを確認してください。これがないと始まりません。ユーザーが画面共有をする際には、まずそのブラウザが何なのかを判定し、そして、ストリームを取得します。これは以前のブログ記事2つに載せてあるコードを使います。Scriptベースでこのような検知ロジックを書くのですが、これまでのブログ記事をご覧いただいて分かる通り、スクリーンキャプチャ自体がまだ標準化されていないのです。仕方ない、美意識に欠けるコードを書かざるを得ません。制約がベースになります。以下でそれをテストできます!!navigator.mediaDevices.getSupportedConstraints().mediaSourceこれはこれでよいテストなのですが、残念なことに全てを賄えるわけではないです。遡るとしているものの、このサポートは信頼できるサイトセットへホワイトリストとして登録されています。以上なのかをチェックする必要があるのです。正規表現でマッチさせて読み取ることができます。テストを行うためのすべての機能を加える!!navigator.mediaDevices.getSupportedConstraints().mediaSourceこれはこれでよいテストなのですが、残念なことに全てを賄えるわけではないです。遡るとしているものの、このサポートは信頼できるサイトセットへホワイトリストとして登録されています。以上なのかをチェックする必要があるのです。正規表現でマッチさせて読み取ることができます。10);}Chromeエクステンションがインストールしてあるかを検知する方法はいくつかありますが、このブログでは範囲を超えてしまうので触れません。この先の記事で触れるのでチェックしてみてください。今回の記事は、Chromeのウィンドー内にあるオブジェクトからコールを発信できるかを試みるのが目的です。window;}それと、スクリーンキャプチャが可能かどうかを判断する方法も探す必要があります。isChrome();}スクリーンをキャプチャするこれまで触れた機能と、過去2つの記事で紹介したノウハウを使い、サポートするブラウザでスクリーンキャプチャができるようになりました。IDが必要になります。プレイスホルダーを、ご自身のIDに置き換えてください。'screen'}});}}これでユーザーが画面を共有したい時に、この機能が使えるようになりました。インターフェイスをこれまでの機能につなげてみます。ルームに入った時に有効化される隠れたボタンがあります。見えるボタンと見えないボタますが、以下を加えます。全てを通してみましょう最後のパートです。インターフェイスをこれまでの機能につなげてみます。ルームに入った時に有効化される隠れたボタンがあります。見えるボタンと見えないボタンが含まれていますが、以下を加えます。ハンドラーを作成します。ファンクションを画面共有ボタンのハンドラーの中に組み入れます。トラックを発行します。全て上手くいけば、他のボタンも変えていきましょう。'inline';});};画面共有解除ボタンについては、トラックの発行を取りやめるようにしたいです。このためには、画面トラックのリファレンスが必要になります。キーワードを取り除いてください。トラックを発行を取りやめます。'none';};これで必要なコードが全てそろいました!画面の共有アプリケーションを再度走らせます。テストを行うのであれば、HTTPS上のWebサーバーで公開されなければいけません。URLをローカルホストへトンネルすれば簡単です。リンクを送るか、ご自身で2つのブラウザを使ってビデオチャットをセットアップします。チャットに入ったら、画面共有ボタンを押し、どの画面を共有するか選択すると、相手側のビデオチャットに表示されます。対応したブラウザでスクリーン共有が自由自在さて、これら3つのブログ記事を通して習得した技術を用いて、ChromeとFirefoxを使ったビデオチャット内画面共有ができるようになりました。(同じChromeエクステンションを使えばOperaでも)これを活用すれば、チームコラボレーションが可能なプレゼンアプリのような物から、ブラウザベースで画面共有ができる拡張顧客サポートツールのような物に至るまで、様々なことが実現します。簡単なものだと、ユーザー画面をプレビューする機能を追加すれば、ユーザー自身が何を今共有しているのか分かるようになります。レポジトリにこれら全てのコードと、過去のブログ記事で紹介したコードを載せています。チェックして、みなさんのビデオチャットアプリへの機能追加に活用してみてください。