[Ｑ＆Ａ]ScreenShareのchrome拡張機能の読込について

508 views
Skip to first unread message

vsess...@gmail.com

unread,
Feb 8, 2016, 12:02:00 AM2/8/16
to SkyWay Technical Forum
こんにちは

日本トータルシステム（株）の赤坂と申します。
Skywayを使わせていただき、WebRTCを試しています。

拡張機能に関して全く理解していないまま、
https://html5experts.jp/yusuke-naka/16445/　（SkyWay ScreenShareを使ってWebRTCの画面共有機能を実装しよう）、
https://github.com/nttcom/SkyWay-ScreenShare　（nttcom/SkyWay-ScreenShare）
を見ながらchromeで画面共有を行ってみました。

なんとか画面共有の選択画面が表示され、自分のカメラストリームを画面共有ストリームに変えて、相手ブラウザで画面共有を確認出来ました。
ただ、拡張機能インストール後、すぐに画面共有ができません。
具体的にいうと、拡張機能をインストールした後、下記javascriptの screen_share.isEnabledExtension が true にならず、
アラートが出るばかりです
ページを一度リロードすると、普通に画面共有することが出来ます。

マニフェストに関するページ（英語ToTなので厳しい）をgoogle翻訳しながら見ましたが、コレだというものを見つけられませんでした。

appear.inやBizMeeといったチャットサービス？などは、拡張機能をインストール後、すぐに画面共有が可能な様に動作します。
拡張機能インストール後に、ページリロードせずに画面共有するための方法はありますでしょうか？



拡張機能に必要な　manifest.json、background.js、content.jsはサンプルのまま使っています。
 "matches": [""]だけは、自分のローカルＩＰアドレスに変えました
　
npmのバージョンは 2.14.7
chromeのバージョンは 48.0.2564.103 m
webサーバーとpeerjsサーバーはローカルに構築しています

拡張機能はデベロッパーモードにして「パッケージ化されていない拡張機能を読み込む」、
また$5かけて、Chromeウェブストアのダッシュボードから拡張機能を追加したものをインストールしても同じ事象です


<ul class="dropdown-menu" role="menu">

<li id="c_click1"　role="presentation"><a role="menuitem" tabindex="-1" href="#"> カメラ向き切替</a></li>
<li id="c_click2"　role="presentation"><a role="menuitem" tabindex="-1" href="#"> カメラ映像</a></li>
<li id="c_click3"　role="presentation"><a role="menuitem" tabindex="-1" href="#"> 画面共有</a></li>

</ul>


$('#c_click3').click(function () {
screen_share = new SkyWay.ScreenShare({debug: false});
if (screen_share_mode == 1){
panel_info("<h6>相手が画面共有中です。</h6>");
return;
}
myvideo_mode = 1;
if(screen_share.isEnabledExtension()){
screen_share.startScreenShare({
"Width": 1280,
"Height": 720,
"FrameRate": 10
},function(stream){
// success callback
// If successful, you can get a own stream object
ScStream = stream;
display_bisible('local-screen-content');
display_hidden('local-video-content');
attachMediaStream($('#local-screen')[0],stream);
Stream_switching_Screen();
},function(error) {
// error callback
console.log("screen share error" )
console.log(error)
},function() {
Stream_switching_Camera();
})
}else{
alert('ExtensionまたはAddonをインストールして下さい');
});



Yusuke NAKA

unread,
Feb 14, 2016, 12:38:23 AM2/14/16
to SkyWay Technical Forum
赤坂様

SkyWay開発チームの仲です。
回答が遅くなり申し訳ありません。


ただ、拡張機能インストール後、すぐに画面共有ができません。
具体的にいうと、拡張機能をインストールした後、下記javascriptの screen_share.isEnabledExtension が true にならず、
アラートが出るばかりです
ページを一度リロードすると、普通に画面共有することが出来ます。


私も少し調べてみましたが、これは、Chrome拡張機能側の仕組みだと思うので、すぐに対応策を思いつきませんでした。


マニフェストに関するページ（英語ToTなので厳しい）をgoogle翻訳しながら見ましたが、コレだというものを見つけられませんでした。

appear.inやBizMeeといったチャットサービス？などは、拡張機能をインストール後、すぐに画面共有が可能な様に動作します。
拡張機能インストール後に、ページリロードせずに画面共有するための方法はありますでしょうか？


appear.in の拡張機能の動作を確認すると、拡張機能を有効にしたタイミングで、 inject.js という Content Script（恐らく）が動作して 「ScreenShareInjected」というログがコンソールに表示されるようです。

拡張機能を有効にした時点で Content Scriptを実行できれば、Webアプリ側から拡張機能の有効/無効をハンドリングできそうです。
 
どなたか、やり方ご存知だったら教えていただけると嬉しいです。

vsess...@gmail.com

unread,
Feb 15, 2016, 12:01:38 AM2/15/16
to SkyWay Technical Forum
仲さま　

回答ありがとうございます。
skywayやwebrtcとは別の質問になり申し訳ございませんでした。
拡張機能を有効にしたタイミングでContent　Scriptを実行する方法を調べてみたいと思います。

Yusuke NAKA

unread,
Mar 6, 2016, 11:48:52 PM3/6/16
to SkyWay Technical Forum
赤坂様

仲です。

以前頂いた質問ですが、Chrome Extensionのinline installationという機能を利用すれば実装できることがわかりました。
開発チームのメンバが具体的なやり方をqiitaにあげています。
手順はかなり面倒ですが、よろしければ御覧ください。

尚、SkyWay ScreenShareについては、以下のpullreqで、inline installationに必要な改修を取り込む予定です。

よろしくお願い致します。

2016年2月15日月曜日 14時01分38秒 UTC+9 vsess...@gmail.com:

vsess...@gmail.com

unread,
Mar 10, 2016, 1:19:33 AM3/10/16
to SkyWay Technical Forum
仲さま

回答ありがとうございます
難しそうですが、頑張って見てみます。
skywayのinline installationに必要な改修待ってますので、よろしくお願いします。
Message has been deleted

vsess...@gmail.com

unread,
Mar 21, 2016, 8:31:55 PM3/21/16
to SkyWay Technical Forum
追伸

教えて頂いた内容を参考に、無事対応することが出来ました。
ありがとうございました。
今後ともよろしくお願いします。


参考にして実装した内容です。

■manifest.json（*.*.*にホスト名を指定）
{
  "name": "ほげほげ Extension",
  "short_name": "ほげほげ",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "ほげほげのスクリーン共有拡張機能",
  "icons": {
    "16": "icon_16.png",
    "48": "icon_48.png",
    "128": "icon_128.png"
  },
  "permissions": [
    "desktopCapture",
"tabs",
"https://*.*.*/*"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [{
"matches": ["https://*.*.*/*"],
    "js": ["content.js"],
    "all_frames": true,
    "run_at": "document_end"
  }]
}

■content.js
var port = chrome.runtime.connect();
 
window.addEventListener("message",function(event){
    if (event.source != window) return;
    if (event.data.type == 'getStreamId') {
        port.postMessage('getStreamId', function(response){
            console.log(response);
        });
    }
},false);
 
 port.onMessage.addListener(function(request, sender, sendResponse){
     window.postMessage({type: 'gotStreamId', streamid: request.streamid},'*');
 });

var elt = document.createElement("script");
elt.innerHTML = "window.ScreenShareExtentionExists = true;";
document.body.appendChild(elt);

console.log("script injected.");
window.postMessage({ type: 'ScreenShareInjected' }, '*');


■background.js（*.*.*にホスト名を指定）
var config = {"hostname": "*.*.*"}

chrome.runtime.onConnect.addListener(function(port){
    port.onMessage.addListener(function(message){
        if(message == 'getStreamId'){
            chrome.desktopCapture.chooseDesktopMedia(['screen', 'window'],port.sender.tab, function(streamId){
                console.log(streamId);
                port.postMessage({streamid:streamId});
            });
        }
    });
});
var injectContentScriptToExistingTabs = function() {
  chrome.tabs.query({
    "status": "complete",
    "url": "*://" + config.hostname + "/*",
  }, function(tabs) {
    console.dir(tabs);
    tabs.forEach(function(tab){
      console.log(tab);
      chrome.tabs.executeScript(tab.id, {
        "file": "content.js",
        "runAt": "document_start"
      });
      console.log("content.js executed");
    });
  });
}

injectContentScriptToExistingTabs();

■フロント側js
if(screen_share.isEnabledExtension()){
screen_share.startScreenShare({
～共有処理を記述～
})
}else{
chrome.webstore.install("", function(){
window.addEventListener('message', function(ev) {
if(ev.data.type === "ScreenShareInjected") {
screen_share.startScreenShare({
～共有処理を記述～
})
}
}, false);
});
};

Reply all
Reply to author
Forward
0 new messages