chrome plugin

misi · Nov 27, 2017 · 17b2543 · 17b2543
1 parent 6edbf8e
commit 17b2543
Show file tree

Hide file tree

Showing 16 changed files with 96 additions and 16 deletions.
diff --git a/app/css/styles.css b/app/css/styles.css
@@ -11,9 +11,8 @@ body {
   position: fixed;
   top: 10px;
   left: 10px;
-  height: 8vh;
-  z-index: 0;
   height: 10vh;
+  z-index: 0;
   -webkit-filter: drop-shadow(0px 0px 3px #222);
   filter: drop-shadow(0px 0px 3px #222); }
 

diff --git a/app/index.html b/app/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
     <head>
+        <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/glaipmkfbnnfjblbajlffkekbnebkpgg">
         <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css">
         <script src="jquery/dist/jquery.min.js"></script>
         <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

diff --git a/app/js/webrtc.js b/app/js/webrtc.js
@@ -877,10 +877,15 @@ function getScreen(){
 
   if(adapter.browserDetails.browser === 'chrome') {
     // Chrome 34+ requires an extension
-    var pending = window.setTimeout(function () {
-      alert('The required Chrome extension is not installed. To install it, go to https://chrome.google.com/webstore/detail/janus-webrtc-screensharin/hapfgfdkleiggjjpfpenajgdnfckjpaj (you might have to reload the page afterwards).');
+    var pending = window.setTimeout(function() {
+      if ( ! chrome.app.isInstalled  ){
+        chrome.webstore.install('',function(){
+            window.location.reload();
+          }
+        )
+      }
     }, 1000);
-    window.postMessage({ type: 'janusGetScreen', id: pending }, '*');
+    window.postMessage({ type: 'getScreen', id: pending }, '*');
   } else {
     if(navigator.mediaDevices.getUserMedia) {
       navigator.mediaDevices.getUserMedia(constraints).then(getScreenSuccess).catch(errorHandler);
@@ -1010,7 +1015,7 @@ if (adapter.browserDetails.browser === 'chrome') {
   window.addEventListener('message', function (event) {
     if(event.origin != window.location.origin)
       return;
-    if (event.data.type == 'janusGotScreen') {
+    if (event.data.type == 'gotScreen') {
       if (event.data.sourceId === '') {
         // user canceled
         console.log('You cancelled the request for permission, giving up...');
@@ -1031,10 +1036,10 @@ if (adapter.browserDetails.browser === 'chrome') {
         };
 
         constraints.video.mandatory.chromeMediaSourceId = event.data.sourceId;
-        // console.log("janusGotScreen: constraints=" + JSON.stringify(constraints));
+        // console.log("gotScreen: constraints=" + JSON.stringify(constraints));
         navigator.mediaDevices.getUserMedia(constraints).then(getChromeScreenSuccess).catch(errorHandler);
       }
-    } else if (event.data.type == 'janusGetScreenPending') {
+    } else if (event.data.type == 'getScreenPending') {
         window.clearTimeout(event.data.id);
     }
   });

diff --git a/chorme_plugin/README.md b/chorme_plugin/README.md
@@ -0,0 +1,3 @@
+This is a modified version of Henrik Joreteg's [Chrome extension](https://github.com/henrikjoreteg/getscreenmedia).
+Based on meetecho screen share extension https://janus.conf.meetecho.com/
+icon: https://www.freefavicon.com/freefavicons/people/iconinfo/community-152-74185.html
diff --git a/chorme_plugin/background.js b/chorme_plugin/background.js
@@ -0,0 +1,25 @@
+/* Background page, responsible for actually choosing media */
+chrome.runtime.onConnect.addListener(function (channel) {
+    channel.onMessage.addListener(function (message) {
+        switch(message.type) {
+        case 'getScreen':
+            var pending = chrome.desktopCapture.chooseDesktopMedia(message.options || ['screen', 'window'], 
+                                                                   channel.sender.tab, function (streamid) {
+                // Communicate this string to the app so it can call getUserMedia with it
+                message.type = 'gotScreen';
+                message.sourceId = streamid;
+                channel.postMessage(message);
+            });
+            // Let the app know that it can cancel the timeout
+            message.type = 'getScreenPending';
+            message.request = pending;
+            channel.postMessage(message);
+            break;
+        case 'cancelGetScreen':
+            chrome.desktopCapture.cancelChooseDesktopMedia(message.request);
+            message.type = 'canceledGetScreen';
+            channel.postMessage(message);
+            break;
+        }
+    });
+});
diff --git a/chorme_plugin/content.js b/chorme_plugin/content.js
@@ -0,0 +1,21 @@
+/* The chrome content script which can listen to the page dom events */
+var channel = chrome.runtime.connect();
+channel.onMessage.addListener(function (message) {
+    console.log('Knockplop extension channel message', message);
+    window.postMessage(message, '*');
+});
+
+window.addEventListener('message', function (event) {
+    if (event.source != window)
+        return;
+    if (!event.data && (
+			event.data.type == 'getScreen' ||
+			event.data.type == 'cancelGetScreen'))
+        return;
+    channel.postMessage(event.data);
+});
+
+var div = document.createElement('div');
+div.id = "knockplop-extension-installed";
+div.style = "display: none;";
+document.body.appendChild(div);
diff --git a/chorme_plugin/icon128.png b/chorme_plugin/icon128.png
diff --git a/chorme_plugin/icon16.png b/chorme_plugin/icon16.png
diff --git a/chorme_plugin/icon48.png b/chorme_plugin/icon48.png
diff --git a/chorme_plugin/knockplop.png b/chorme_plugin/knockplop.png
diff --git a/chorme_plugin/knockplop1280x800.png b/chorme_plugin/knockplop1280x800.png
diff --git a/chorme_plugin/knockplop440x280.png b/chorme_plugin/knockplop440x280.png
diff --git a/chorme_plugin/manifest.json b/chorme_plugin/manifest.json
@@ -0,0 +1,21 @@
+{
+   "name": "Knockplop Screensharing",
+   "short_name": "knockplop screensharing",
+   "description": "This is the knockplop extension utility for screensharing.",
+   "manifest_version": 2,
+   "version": "0.0.2",
+   "background": {
+      "scripts": [ "background.js" ]
+   },
+   "content_scripts": [ {
+      "js": [ "content.js" ],
+      "matches": [ "https://*/*" ]
+   } ],
+   "icons": {
+      "128": "icon128.png",
+      "48": "icon48.png",
+      "16": "icon16.png"
+   },
+   "minimum_chrome_version": "34",
+   "permissions": [ "desktopCapture" ]
+}
diff --git a/dist/css/all.css b/dist/css/all.css
@@ -51,8 +51,7 @@ body {
   top: 10px;
   left: 10px;
   height: 10vh;
-  z-index: 0; 
-  height: 10vh;
+  z-index: 0;
   -webkit-filter: drop-shadow(0px 0px 3px #222);
   filter: drop-shadow(0px 0px 3px #222); }
 

diff --git a/dist/index.html b/dist/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
     <head>
+        <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/glaipmkfbnnfjblbajlffkekbnebkpgg">
         <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css">
         <script src="jquery/dist/jquery.min.js"></script>
         <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

diff --git a/dist/scripts/app.js b/dist/scripts/app.js
@@ -1185,10 +1185,15 @@ function getScreen(){
 
   if(adapter.browserDetails.browser === 'chrome') {
     // Chrome 34+ requires an extension
-    var pending = window.setTimeout(function () {
-      alert('The required Chrome extension is not installed. To install it, go to https://chrome.google.com/webstore/detail/janus-webrtc-screensharin/hapfgfdkleiggjjpfpenajgdnfckjpaj (you might have to reload the page afterwards).');
+    var pending = window.setTimeout(function() {
+      if ( ! chrome.app.isInstalled  ){
+        chrome.webstore.install('',function(){
+            window.location.reload();
+          }
+        )
+      }
     }, 1000);
-    window.postMessage({ type: 'janusGetScreen', id: pending }, '*');
+    window.postMessage({ type: 'getScreen', id: pending }, '*');
   } else {
     if(navigator.mediaDevices.getUserMedia) {
       navigator.mediaDevices.getUserMedia(constraints).then(getScreenSuccess).catch(errorHandler);
@@ -1318,7 +1323,7 @@ if (adapter.browserDetails.browser === 'chrome') {
   window.addEventListener('message', function (event) {
     if(event.origin != window.location.origin)
       return;
-    if (event.data.type == 'janusGotScreen') {
+    if (event.data.type == 'gotScreen') {
       if (event.data.sourceId === '') {
         // user canceled
         console.log('You cancelled the request for permission, giving up...');
@@ -1339,10 +1344,10 @@ if (adapter.browserDetails.browser === 'chrome') {
         };
 
         constraints.video.mandatory.chromeMediaSourceId = event.data.sourceId;
-        // console.log("janusGotScreen: constraints=" + JSON.stringify(constraints));
+        // console.log("gotScreen: constraints=" + JSON.stringify(constraints));
         navigator.mediaDevices.getUserMedia(constraints).then(getChromeScreenSuccess).catch(errorHandler);
       }
-    } else if (event.data.type == 'janusGetScreenPending') {
+    } else if (event.data.type == 'getScreenPending') {
         window.clearTimeout(event.data.id);
     }
   });