Mozilla FirefoxのWebRTC Webサイトのスクリーンショット

最近、Google Chromeブラウザ用のスクリーンショット拡張機能の作成方法に関する記事を書きました 。 その結果、スクリーンショット用の独自の拡張機能を作成し、Chromeストアで公開し、1対多モードでWebコールサーバーを介したスクリーンキャストをテストしました。



この記事では、 Firefoxブラウザーでも同じことを行います。 アプローチは同じままで、今回も拡張機能をパッケージ化して公開する必要がありますが、今回はMozillaアドオンで行います 。 その結果、外部の追加ソフトウェアをインストールしなくても、FFからビデオストリームのスクリーンキャストを作成できます。

FFの拡張コードの準備

現在、Firefoxの拡張機能を準備する方法は2つあります

• Webextension
• JPM XPI

最初の方法では、バージョン45以降のFirefoxブラウザー用の拡張機能を準備できます。 2つ目は、xpiファイルを作成することで、バージョン38以降のFirefoxブラウザーに適しています。



Mozillaは、JPMの作成方法を廃止すると宣言しています それにもかかわらず、この方法について説明します。 それをテストする機会があり、うまくいきました。 また、 WebExtensionのドキュメントを参照して、新しい方法で拡張機能を構築することもできます。 ほとんどの場合、パッケージ化と公開のプロセスは、この記事で説明したプロセスと非常に似ています。



Firefoxアカウント Webサイトでアカウントを作成し（そうでない場合）、 Mozillaアドオンに移動します









拡張機能のソースコードをダウンロードします。これは、構成とアイコンのいくつかのファイルです。



FF拡張ソースコード



次に、 package.json構成を開き、独自のドメインで使用するために編集します。



ソース設定は次のようになります。

{ "title": "Flashphoner Screen Sharing", "name": "flashphoner-screen-sharing-extension", "id": "@flashphoner-screen-sharing-extension", "version": "0.0.4", "description": "Enable screen sharing for flashphoner.com", "main": "index.js", "author": "Flashphoner", "engines": { "firefox": ">=38.0a1", "fennec": ">=38.0a1" }, "homepage": "http://flashphoner.com", "license": "MIT" }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここに、たとえば次のような独自のデータを入力する必要があります。

 { "title": "My Screen Sharing Extension", "name": "my-screen-sharing", "id": "@my-screen-sharing", "version": "0.0.1", "description": "Enable screen sharing for mymegacat.com", "main": "index.js", "author": "Me", "engines": { "firefox": ">=38.0a1", "fennec": ">=38.0a1" }, "homepage": "https://mymegacat.com", "license": "MIT" }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

例として、サイトmymegacat.comを入力したことに注意してください-これは、スクリーンブロードキャスト（スクリーンキャスト）があるページからのサイトの疑わしいドメインです。

スクリーンショット拡張パッケージ

次に、拡張コードを.xpiファイルにパッケージ化する必要があります。 JPMはこれに役立ちます。 Windowsでパッケージ化を行います。

1. サイトhttps://nodejs.orgからNode.js + npmをダウンロードしてインストールします 。 Node.jsのインストールには、システムの再起動が必要になる場合があります。
   
   
   
   
   
   
   
   
   
   
   
   
2. NPMが正しくインストールされたことを確認します。
   
   
   
   

    npm -v
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   
   
   
   
   
   
   
   
   
3. JPMをインストールする
   
   
   
   

    npm install jpm –global
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   
   
   
   
   
   
   
   
   
4. JPMがインストールされていることを確認します
   
   
   
   

    jpm
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   
   
   
   
   
   
   
   
   
5. JPMを使用してXPIファイルを作成します。 これを行うには、以前にダウンロードしたfirefox-extensionフォルダーに移動して、コマンドを実行します
   
   
   
   

    jpm xpi
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   
   
   
   
   
   
   

できた



その結果、Mozillaアドオンで公開できるXPI拡張ファイルを入手しました。

Mozillaアドオンに拡張機能を公開する

1. まず、 Mozillaアドオンにログインし、[ツール] / [新しいアドオンを送信]に移動します
   
   
   
   
   
   
   
   
   
   
   
   
2. XPIファイルをダウンロードします。
   
   
   
   
   
   
   
   
   
   
   
   
3. ダウンロード後、拡張機能が検証され、[ 続行 ]をクリックできます。
   
   
   
   
   
   
   
   
   
   
   
   
4. 拡張機能は、 [ツール] / [自分の提出物の管理 ]メニューから管理できます。
   
   
   
   
   
   
   
   
   
   

拡張機能の配布と署名の詳細については、 こちらをご覧ください 。

Firefoxからスクリーンキャスト用のHTMLページを作成する

Firefoxのスクリーンキャストでは、WebRTCテクノロジーとGoogle Chromeを使用しています。 WebRTC-画面からキャプチャされたビデオストリームをブロードキャストするプラットフォームとして、 Web Call Server 5およびflashphoner.jsスクリプトを使用します。これは、サーバーを操作するためのAPIを表し、 Web SDKアセンブリに含まれています 。



スクリーンキャストコードには次のものが含まれます。

• screen-sharing-ff.html
• screen-sharing-ff.js
• flashphoner.js
• flashphoner_screen_sharing-0.0.9-an + fx.xpi

以前にJPMを使用して作成されたXPI拡張ファイルを使用する必要があります。



ページのHTMLコードは20行で十分単純です：

 <!DOCTYPE html> <html lang="en"> <head> <title>Screen Sharing</title> <script type="text/javascript" src="flashphoner.js"></script> <script type="text/javascript" src="screen-sharing-ff.js"></script> </head> <body onload="init_page()"> <h1>Screen Sharing</h1> <button type="button" id="installExtensionButton" onclick="installExtension()">Install Now </button> <h2>Capture</h2> <div id="localVideo" style="width:320px;height:240px; border: 1px solid"></div> <h2>Preview</h2> <div id="remoteVideo" style="width:320px;height:240px; border: 1px solid"></div> <button id="publishBtn" type="button" onclick="connectAndShareScreen()">Connect and share screen</button> <p id="status"></p> </body> </html>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このページでは、 screen-sharing-ff.jsとflashphoner.jsの 2つのスクリプトを使用しています



init_page（）初期化関数は、ページをロードするために呼び出されます。



installExtensionButtonボタンは、拡張機能をすばやくインストールするために使用されます。



Div- localVideoブロックは 、画面からキャプチャされたビデオをローカルで表示するために使用されます。



Div- remoteVideoブロックは 、サーバーから送信されたビデオブロードキャストを表示するために使用されます。 たとえば、プレーヤーのみを別のページに残したい場合は、1つのDivのみ（ remoteVideoブロック）を使用できます。 この例では、テストを高速化するために、プレーヤーとストリーマーを1ページに配置します。



最後に、 publishBtnボタンがブロードキャストを開始します。



以下は、 Mozilla Firefox 51.0.1で実際に動作するHTMLスクリーンキャストページです。









次に、 screen-sharing-ff.jsスクリプトに目を向け 、そこで何が起こるかを理解します。

 var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS; var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS; var localVideo; var remoteVideo; function init_page() { //init api try { Flashphoner.init(); } catch (e) { //can't init return; } var interval = setInterval(function() { if (Flashphoner.firefoxScreenSharingExtensionInstalled) { document.getElementById("installExtensionButton").disabled = true; clearInterval(interval); localVideo = document.getElementById("localVideo"); remoteVideo = document.getElementById("remoteVideo"); }else{ document.getElementById("installExtensionButton").disabled = false; } }, 500); } function connectAndShareScreen() { var url = "wss://wcs5-eu.flashphoner.com:8443"; console.log("Create new session with url " + url); Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function (session) { //session connected, start streaming startStreaming(session); }).on(SESSION_STATUS.DISCONNECTED, function () { setStatus(SESSION_STATUS.DISCONNECTED); }).on(SESSION_STATUS.FAILED, function () { setStatus(SESSION_STATUS.FAILED); }); } function startStreaming(session) { var streamName = "test123"; var constraints = { video: { width: 320, height: 240, frameRate: 10, type: "screen" } }; session.createStream({ name: streamName, display: localVideo, constraints: constraints }).on(STREAM_STATUS.PUBLISHING, function (publishStream) { setStatus(STREAM_STATUS.PUBLISHING); //play preview session.createStream({ name: streamName, display: remoteVideo }).on(STREAM_STATUS.PLAYING, function (previewStream) { //enable stop button }).on(STREAM_STATUS.STOPPED, function () { publishStream.stop(); }).on(STREAM_STATUS.FAILED, function () { //preview failed, stop publishStream if (publishStream.status() == STREAM_STATUS.PUBLISHING) { setStatus(STREAM_STATUS.FAILED); publishStream.stop(); } }).play(); }).on(STREAM_STATUS.UNPUBLISHED, function () { setStatus(STREAM_STATUS.UNPUBLISHED); //enable start button }).on(STREAM_STATUS.FAILED, function () { setStatus(STREAM_STATUS.FAILED); }).publish(); } //show connection or local stream status function setStatus(status) { var statusField = document.getElementById("status"); statusField.innerHTML = status; } //install extension function installExtension() { var params = { "Flashphoner Screen Sharing": { URL: "../../dependencies/screen-sharing/firefox-extension/flashphoner_screen_sharing-0.0.9-an+fx.xpi", IconURL: "../../dependencies/screen-sharing/firefox-extension/icon.png", Hash: "sha1:96699c6536de455cdc5c7705f5b24fae28931605", toString: function () { return this.URL; } } }; InstallTrigger.install(params); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このスクリプトの操作については、Google Chromeブラウザーからのスクリーンキャストに関する以前の記事で詳しく説明されています 。



この点に関して、Firefoxに固有の違いに焦点を当てますが、そのうち3つしかありません。

1. 初期化中は何も送信しませんが、Chromeでは拡張IDを渡しました。 FFの場合、他の場所に転送されます。
   
   
   
   

    Flashphoner.init();
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   
2. インストールされている拡張機能の確認も、Chromeとは少し異なります。 Flashphoner.firefoxScreenSharingExtensionInstalledフラグがチェックされます。
   
   
   
   

    var interval = setInterval(function() if (Flashphoner.firefoxScreenSharingExtensionInstalled) { document.getElementById("installExtensionButton").disabled = true; clearInterval(interval); localVideo = document.getElementById("localVideo"); remoteVideo = document.getElementById("remoteVideo"); }else{ document.getElementById("installExtensionButton").disabled = false; } }, 500);
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   
3. installExtensionButtonボタンの拡張機能インストールコードは、Chromeの拡張機能インストールコードとは異なり、XPI拡張ファイルを直接使用しますが、Chromeでは、Chromeストアへのリンクを配置します。 Flashphoner Screen Sharingの代わりに、拡張機能のパッケージ化の段階でpackage.jsonで前述したように、拡張機能の名前を示す必要があることに注意してください。
   
   
   
   

     function installExtension() { var params = { "Flashphoner Screen Sharing": { URL: "../../dependencies/screen-sharing/firefox-extension/flashphoner_screen_sharing-0.0.9-an+fx.xpi", IconURL: "../../dependencies/screen-sharing/firefox-extension/icon.png", Hash: "sha1:96699c6536de455cdc5c7705f5b24fae28931605", toString: function () { return this.URL; } } }; InstallTrigger.install(params); }
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

その結果、これらの3つの違いを考慮して、Firefoxに拡張機能とスクリーンキャストをインストールする準備が整った、 有効なscreen-sharing-ff.jsスクリプトを取得しました。

FFでWebRTCスクリーンショットをテストする準備

テストを開始するには、すべてのスクリプトをWebホスティングにアップロードする必要があります。

• screen-sharing-ff.html
• screen-sharing-ff.js
• flashphoner.js
• flashphoner_screen_sharing-0.0.9-an + fx.xpi

スクリプト自体はXPIファイルを使用する必要があります



どこでも-ホスティングおよびスクリプトでは、ドメインを使用する必要があります（拡張機能をパックするときにmymegacat.comを指定したことを思い出してください）。



画面をブロードキャストするためのWebRTCプラットフォームとして使用するWeb Call Server 5サーバーは、Websocketプロトコルを介した接続を受け入れ、別のVPS / VDSまたはWebサイトを持つ1つのサーバーにインストールできます。



サーバーに接続するには、次の形式のWebsocketアドレスが必要です。

 wss://wcs5-eu.flashphoner.com:8443
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

screen-sharing-ff.jsスクリプトでは、このアドレスはハードコーディングされています。 これはデモサーバーです。

サーバーをインストールするか、完成したイメージをAmazon EC2で実行できます 。

FFからのスクリーンキャストをテストし、サーバーを介してストリームを配信します

1. Firefoxブラウザーでscreen-sharing-ff.htmlページを開き、拡張機能がインストールされるまでアクティブな[今すぐインストール ]ボタンをクリックします 。
   
   
   
   
   
   
   
   
   
   
   
   
2. 次に、拡張機能のインストールを確認し、インストールの成功に関するメッセージを受け取ります。 その後、 [今すぐインストール ]ボタンが無効になります 。 screen-sharing-ff.jsスクリプトは、拡張機能が既にインストールされており、ボタンが不要になったことを確認します。
   
   
   
   
   
   
   
   
   
   
   
   
3. [ 接続して画面を共有 ]ボタンをクリックして、テストを開始します。

Firefoxは、どのウィンドウをスクリーニングするかを尋ね、ビデオストリームをWebコールサーバーに送信し、キャプチャしたストリームをHTMLページのlocalVideoブロックに表示します。



ボタンの下に、 PUBLISHINGステータスが表示されます-ビデオが画面からキャプチャされ、ビデオトラフィックがサーバーに送られます。



数秒後、サーバーから受信したビデオはプレーヤー（ remoteVideoユニット）で再生を開始します。 これは、サーバーを経由して再生に戻ったビデオです。 同様の方法で、他のページでライブビデオを再生して、1対多のブロードキャストまたはスクリーンキャストを行うことができます。

参照資料

WebRTCを介したGoogle Chromeブラウザーからのサイトのスクリーンショット

Firefox用のWebExtensionの設計とパッケージング

JPMを使用したFirefoxの拡張機能のパッケージ化

Firefoxアカウント - アカウントを取得

Mozillaアドオン -拡張機能の投稿

JPMでパッケージ化するための拡張ソースコード

Node.js -NPMおよびJPMのクイックインストール

Mozilla拡張機能の配布と署名情報

Web Call Server 5 -WebRTCを介してビデオストリームを中継するためのプラットフォーム

Web SDK-サーバーで作業するためのflashphoner.jsを含むAPIスクリプトのセット

サーバーにWCS5をインストールする

Amazon EC2クラウドでのWeb Call Serverイメージの起動に関する記事

テストページ screen-sharing-ff.htmlおよびscreen-sharing-ff.js のソースコードをダウンロードします。