Geekly Articles each Day

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


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

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

FFの拡張コードの準備


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


最初の方法では、バージョン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アセンブリに含まれています 。

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


以前に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ホスティングにアップロードする必要があります。


スクリプト自体は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 のソースコードをダウンロードします。

Source: https://habr.com/ru/post/J323892/

More articles:


All Articles