Experts.jp日本に、もっとエキスパートを。ScreenShareのチュートリアルをお届けします。ScreenShareは、WebRTCのWebアプリケーションで画面共有を簡単に実装できるライブラリ、画面共有に必要なChrome・Firefox向けのExtensionが簡単に実装できるソースコードが含まれています。画面共有機能の概要WebRTCの画面共有機能は、ブラウザ画面やPCのデスクトップ画面をリアルタイムで相手に配信できる機能です。33以上で利用可能です。26で初めてブラウザに実装されました。getUserMedia()というフラグをONにし、getUserMedia()のオプションを指定することで、実現できていました。Appsからしか利用できなくなりました。33から画面共有機能が実装されています。Firefoxの場合は、Chromeとは方式が異なり、about:configのmedia.getusermedia.screensharing.enabledという設定をtrueに設定し、media.getusermedia.screensharing.allowed_domainsという設定項目に、画面共有機能を許可するWebサイトのドメインを追加することで利用できるようになります。media.getusermedia.screensharing.allowed_domainsには、Mozillaが許可したサービスのドメインが予め設定されています。こちらにドメインを追加してもらいたい場合は、このサイトの下部に掲載されているフォームから申請が可能です。(筆者は申請したことはありませんが、恐らく審査があると思われます)標準化の状況WebRTCのJavaScriptAPIの標準化はW3Cで行われています。この画面共有機能についても、今年の2月に仕様書が作られて標準化が進められています。Capture」です。仕様書についての詳細な解説は割愛しますが、現在、ChromeとFirefoxで実装されている画面共有機能はブラウザベンダごとの独自実装であり、今後実装が変更になる可能性は高いと考えられます。ScreenShareの使い方を説明します。はじめに、github.com/nttcom/SkyWay-ScreenShareからファイル一式をローカル環境にcloneして下さい。ここに書いている内容の詳細はREADMEにも掲載していますので、合わせてご覧ください。Extensionの作成まずはマニフェストファイルを修正します。JSONファイルのひな形にそって必要な項目を入力して下さい。アイコンファイルも必要です。ここには、このExtensionのりようを許可するWebサイトのURLを記載します。ご自身のWebサイトのURLを指定して下さい。ワイルドカードを利用して複数のURLにマッチさせることも可能ですが、その場合は、あなたのExntensionを他のWebサイトで利用される可能性があります。セキュリティ上もよろしくありません。["https://*.skyway.io/*"]次にビルドしましょう。SkyWay-ScreenShareではビルド用のgulpタスクとnpm-scriptでエイリアスコマンドを用意しています。SkyWay-ScreenShareディレクトリの直下で、次の2行のコマンドを実行します。npmコマンドは事前に使えるようにしておいて下さい。build-chromeビルドが完了したら、出来上がったファイルをChromeに読み込ませましょう。アクセスし、デベロッパーモードを有効にします。パッケージ化されていない拡張機能を読み込むをクリックし、以下のディレクトリを指定します。extensionのビルド後のファイル一式SkyWay-ScreenShare/chrome-extension/screenshare_chrome_extension/1SkyWay-ScreenShare/chrome-extension/screenshare_chrome_extension/読み込むと以下のようになります。Extensionを読み込みますまた、ディレクトリと同一フォルダにあるscreenshare_chrome_extension.zipは、Chromeウェブストアにアップロードする際に利用できます。Extensionの作成は完了です。Extension(拡張機能)となります。Extensionと表記を統一させて頂きます。Extensionでは、メインプログラムとパッケージファイルの二つを修正します。メインプログラムです。[''];に、画面共有機能を有効にするWebサイトのドメインを指定して下さい。指定方法は以下のようになります。['*.skyway.io']次にパッケージファイルを修正します。ここではExtensionの基本情報を入力していきます。ひな形にそって必要な情報を入力して下さい。アイコンファイルも必要です。Extensionのビルドに必要なツール「cfx」をインストールします。インストール方法はこのサイトを参考にして下さい。build)を行います。ExtensionをビルドするためにはランダムなIDを予めパッケージファイルに記載しておく必要があるため、初回のプレビルドで、パッケージファイルにIDを挿入しています。pre-build-firefox初回のプレビルドでIDが挿入された場合、以下の様なエラーが発生します。これは問題ありません。xpi'再度以下の通り、ビルドを行って下さい。build-firefoxビルドが完了したら、Firefoxに読み込ませて動作確認を行いましょう。about://addonsにアクセスし、作成したExtension本体である、SkyWay-ScreenShare/firefox-addon/screenshare_firefox_addon.xpiをドラッグ・アンド・ドロップさせます。Extensionの配布は、通常のWebサーバ上に上記xpiファイルを設置し行って下さい。Extensionの作成は完了です。JavaScriptライブラリの作成SkyWay-ScreenShareには今まで作成したExtensionを利用するためのJavaScriptライブラリ「screenshare.js」が同梱されています。自分でビルドする場合は、以下のように行って下さい。build-libraryビルドに成功すると、以下の通りライブラリが生成されます。SkyWay-ScreenShare/dist/screenshare.min.js12SkyWay-ScreenShare/dist/screenshare.jsSkyWay-ScreenShare/dist/screenshare.min.jsまた、ライブラリはCDNでも提供しています。src="https://skyway.io/dist/screenshare.min.js"></script>最後に、ライブラリの修正や機能追加などは大歓迎です。TypeScriptのソースファイルを同梱していますので、その際はご利用下さい。ScreenShareの使い方〜アプリ開発編〜ExtensionとJavaScriptライブラリの準備ができたところで、同梱しているサンプルアプリケーションを例に、画面共有機能を使ったアプリの開発方法をご紹介します。newでオブジェクトを作成します。debugオプションを指定するとコンソールログにデバッグログが出力されます。true});次に、startScreenShare()メソッドを利用して、画面共有機能を開始するためのコードを実装していきます。このメソッドの第一引数には、取得する映像の縦横サイズとフレームレートを指定します。Objectが返ってきます。これをVideo要素に入れてあげれば画面が表示されます。第四引数についてはChromeのみ利用できるオプショナルなコールバック関数で、画面共有が何らかの方法で終了した場合に呼ばれます。Firefoxでは現状終了検知が出来ないため、Chrome限定です。Extensionが利用しているブラウザで有効かどうか(インストール済みかどうかも含めて)を判定します。stream;},function(error){console.log(error);},function(){alert('ScreenShareを終了しました');});}else{alert('ExtensionまたはAddonをインストールして下さい');}});次に、画面共有をプログラム側で終了させる場合のコードを実装していきます。現在は終了のための専用メソッドは用意していません。Objectを保持しておき、終了したいタイミングでstop()メソッドを読んで下さい。これで、画面共有が止まります。Objectの管理機能を実装する予定なので、その時には専用のメソッドを用意します。{localStream.stop();});アプリ開発方法の紹介は以上です。おわりに今回は、SkyWay-ScreenShareを使った、WebRTCの画面共有機能の実装方法をご紹介しました。画面共有機能は様々なユースケースで活用できる機能ですので、是非ご自身のアプリケーションに組み込んでみてください!次回は、同じく7月28日にリリースされたSkyWay-DrivingVehicleについてのチュートリアルをお届けいたします。