Added "getChromeExtensionStatus" method.

getChromeExtensionStatus method allows you detect chrome-extension-status from any domain.
muaz-khan · Feb 16, 2017 · 121be53 · 121be53
1 parent a1168db
commit 121be53
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 105 deletions.
diff --git a/README.md b/README.md
@@ -40,6 +40,10 @@ Nope open: `https://localhost:9001/`
 <script src="https://cdn.rawgit.com/muaz-khan/getScreenId/master/getScreenId.js"></script>
 ```
 
+# `getScreenId`
+
+This method allows you get chrome-media-source-id; which can be used to capture screens.
+
 ```javascript
 getScreenId(function (error, sourceId, screen_constraints) {
     // error    == null || 'permission-denied' || 'not-installed' || 'installed-disabled' || 'not-chrome'
@@ -104,6 +108,18 @@ getScreenId(function (error, sourceId, screen_constraints) {
 });
 ```
 
+# `getChromeExtensionStatus`
+
+This method allows you detect whether chrome extension is installed or not:
+
+```javascript
+getChromeExtensionStatus(function(status) {
+    if (status === 'installed-enabled') alert('installed');
+    if (status === 'installed-disabled') alert('installed but disabled');
+    // etc.
+});
+```
+
 # How it works?
 
 * Your script will make a `postMessage` request to `getScreenId.js`

diff --git a/getScreenId.html b/getScreenId.html
@@ -19,11 +19,11 @@
 
 DetectRTC.screen = {
     chromeMediaSource: 'screen',
-    getSourceId: function (callback) {
+    getSourceId: function(callback) {
         screenCallback = callback;
         window.postMessage('get-sourceId', '*');
     },
-    onMessageCallback: function (data) {
+    onMessageCallback: function(data) {
         // "cancel" button is clicked
         if (data == 'PermissionDeniedError') {
             DetectRTC.screen.chromeMediaSource = 'PermissionDeniedError';
@@ -42,45 +42,65 @@
             if (screenCallback) screenCallback(DetectRTC.screen.sourceId);
         }
     },
-    getChromeExtensionStatus: function (callback) {
+    getChromeExtensionStatus: function(callback) {
         // https://chrome.google.com/webstore/detail/screen-capturing/ajhifddimkapgcifgcodmmfdlknahffk
         var extensionid = 'ajhifddimkapgcifgcodmmfdlknahffk';
 
         var image = document.createElement('img');
         image.src = 'chrome-extension://' + extensionid + '/icon.png';
-        image.onload = function () {
+        image.onload = function() {
+            if (!DetectRTC.screen) DetectRTC.screen = {};
+            if (!DetectRTC.screen.chromeMediaSource) DetectRTC.screen.chromeMediaSource = '';
+
+            if (DetectRTC.screen.chromeMediaSource === 'desktop') {
+                callback('installed-enabled');
+                return;
+            }
+
             DetectRTC.screen.chromeMediaSource = 'screen';
             window.postMessage('are-you-there', '*');
-            setTimeout(function () {
+            setTimeout(function() {
                 if (DetectRTC.screen.chromeMediaSource == 'screen') {
                     callback('installed-disabled');
-                } else callback('installed-enabled');
+                } else {
+                    callback('installed-enabled');
+                }
             }, 2000);
         };
-        image.onerror = function () {
+        image.onerror = function() {
             callback('not-installed');
         };
     }
 };
 
-window.addEventListener('message', function (event) {
-    if (!event.data || !(typeof event.data == 'string' || event.data.sourceId || event.data.captureSourceId)) return;
+window.addEventListener('message', function(event) {
+    if (!event.data || !(typeof event.data == 'string' || event.data.sourceId || event.data.captureSourceId || event.data.getChromeExtensionStatus)) return;
+
+    if (event.data.getChromeExtensionStatus) {
+        DetectRTC.screen.getChromeExtensionStatus(function(status) {
+            window.parent.postMessage({
+                chromeExtensionStatus: status
+            }, '*');
+        });
+        return;
+    }
+
     if (event.data.captureSourceId) captureSourceId();
 
     DetectRTC.screen.onMessageCallback(event.data);
 });
 
 function captureSourceId() {
     // check if desktop-capture extension installed.
-    DetectRTC.screen.getChromeExtensionStatus(function (status) {
+    DetectRTC.screen.getChromeExtensionStatus(function(status) {
         if (status != 'installed-enabled') {
             window.parent.postMessage({
                 chromeExtensionStatus: status
             }, '*');
             return;
         }
 
-        DetectRTC.screen.getSourceId(function (sourceId) {
+        DetectRTC.screen.getSourceId(function(sourceId) {
             window.parent.postMessage({
                 chromeMediaSourceId: sourceId
             }, '*');

diff --git a/getScreenId.js b/getScreenId.js
@@ -1,4 +1,4 @@
-// Last time updated at Oct 24, 2015, 08:32:23
+// Last time updated at Feb 16, 2017, 08:32:23
 
 // Latest file can be found here: https://cdn.webrtc-experiment.com/getScreenId.js
 
@@ -36,8 +36,6 @@ getScreenId(function (error, sourceId, screen_constraints) {
             return;
         }
 
-        postMessage();
-
         window.addEventListener('message', onIFrameCallback);
 
         function onIFrameCallback(event) {
@@ -56,6 +54,8 @@ getScreenId(function (error, sourceId, screen_constraints) {
             // this event listener is no more needed
             window.removeEventListener('message', onIFrameCallback);
         }
+
+        setTimeout(postGetSourceIdMessage, 100);
     };
 
     function getScreenConstraints(error, sourceId) {
@@ -78,14 +78,14 @@ getScreenId(function (error, sourceId, screen_constraints) {
         return screen_constraints;
     }
 
-    function postMessage() {
+    function postGetSourceIdMessage() {
         if (!iframe) {
-            loadIFrame(postMessage);
+            loadIFrame(postGetSourceIdMessage);
             return;
         }
 
         if (!iframe.isLoaded) {
-            setTimeout(postMessage, 100);
+            setTimeout(postGetSourceIdMessage, 100);
             return;
         }
 
@@ -94,6 +94,17 @@ getScreenId(function (error, sourceId, screen_constraints) {
         }, '*');
     }
 
+    var iframe;
+
+    // this function is used in RTCMultiConnection v3
+    window.getScreenConstraints = function(callback) {
+        loadIFrame(function() {
+            getScreenId(function(error, sourceId, screen_constraints) {
+                callback(error, screen_constraints.video);
+            });
+        });
+    };
+
     function loadIFrame(loadCallback) {
         if (iframe) {
             loadCallback();
@@ -111,120 +122,42 @@ getScreenId(function (error, sourceId, screen_constraints) {
         (document.body || document.documentElement).appendChild(iframe);
     }
 
-    var iframe;
-
-    // this function is used in v3.0
-    window.getScreenConstraints = function(callback) {
-        loadIFrame(function() {
-            getScreenId(function(error, sourceId, screen_constraints) {
-                callback(error, screen_constraints.video);
-            });
-        });
-    };
-})();
-
-(function() {
-    if(document.domain.indexOf('webrtc-experiment.com') === -1) {
-        return;
-    }
-
-    window.getScreenId = function(callback) {
+    window.getChromeExtensionStatus = function(callback) {
         // for Firefox:
-        // sourceId == 'firefox'
-        // screen_constraints = {...}
         if (!!navigator.mozGetUserMedia) {
-            callback(null, 'firefox', {
-                video: {
-                    mozMediaSource: 'window',
-                    mediaSource: 'window'
-                }
-            });
+            callback('installed-enabled');
             return;
         }
 
-        postMessage();
-
         window.addEventListener('message', onIFrameCallback);
 
         function onIFrameCallback(event) {
             if (!event.data) return;
 
-            if (event.data.chromeMediaSourceId) {
-                if (event.data.chromeMediaSourceId === 'PermissionDeniedError') {
-                    callback('permission-denied');
-                } else callback(null, event.data.chromeMediaSourceId, getScreenConstraints(null, event.data.chromeMediaSourceId));
-            }
-
             if (event.data.chromeExtensionStatus) {
-                callback(event.data.chromeExtensionStatus, null, getScreenConstraints(event.data.chromeExtensionStatus));
+                callback(event.data.chromeExtensionStatus);
             }
 
             // this event listener is no more needed
             window.removeEventListener('message', onIFrameCallback);
         }
-    };
-
-    function getScreenConstraints(error, sourceId) {
-        var screen_constraints = {
-            audio: false,
-            video: {
-                mandatory: {
-                    chromeMediaSource: error ? 'screen' : 'desktop',
-                    maxWidth: window.screen.width > 1920 ? window.screen.width : 1920,
-                    maxHeight: window.screen.height > 1080 ? window.screen.height : 1080
-                },
-                optional: []
-            }
-        };
-
-        if (sourceId) {
-            screen_constraints.video.mandatory.chromeMediaSourceId = sourceId;
-        }
 
-        return screen_constraints;
-    }
+        setTimeout(postGetChromeExtensionStatusMessage, 100);
+    };
 
-    function postMessage() {
+    function postGetChromeExtensionStatusMessage() {
         if (!iframe) {
-            loadIFrame(postMessage);
+            loadIFrame(postGetChromeExtensionStatusMessage);
             return;
         }
 
         if (!iframe.isLoaded) {
-            setTimeout(postMessage, 100);
+            setTimeout(postGetChromeExtensionStatusMessage, 100);
             return;
         }
 
         iframe.contentWindow.postMessage({
-            captureSourceId: true
+            getChromeExtensionStatus: true
         }, '*');
     }
-
-    function loadIFrame(loadCallback) {
-        if (iframe) {
-            loadCallback();
-            return;
-        }
-
-        iframe = document.createElement('iframe');
-        iframe.onload = function() {
-            iframe.isLoaded = true;
-
-            loadCallback();
-        };
-        iframe.src = 'https://www.webrtc-experiment.com/getSourceId/'; // https://wwww.yourdomain.com/getScreenId.html
-        iframe.style.display = 'none';
-        (document.body || document.documentElement).appendChild(iframe);
-    }
-
-    var iframe;
-
-    // this function is used in v3.0
-    window.getScreenConstraints = function(callback) {
-        loadIFrame(function() {
-            getScreenId(function(error, sourceId, screen_constraints) {
-                callback(error, screen_constraints.video);
-            });
-        });
-    };
 })();
diff --git a/index.html b/index.html
@@ -98,7 +98,7 @@
         </script>
 
         <!-- script used to capture sourceId of the screen -->
-        <script src="https://cdn.webrtc-experiment.com/getScreenId.js"> </script>
+		<script src="https://cdn.webrtc-experiment.com/getScreenId.js"> </script>
     </head>
 
     <body>
@@ -133,11 +133,32 @@ <h1>
             </blockquote>
 
             <section class="experiment" style="text-align:center;">
+				<div id="chrome-extension-status"></div>
                 <br><button id="capture-screen">Capture Your Own Screen</button><hr>
                 <video controls autoplay style="width: 100%;background-repeat: no-repeat;background-size: 100%;background-image: url(https://lh5.googleusercontent.com/6U-gmL_hG9bbquDZdW_ajiA-1bgkfSlHOkzR24aigkyPQzXWXNoRNfyLjXS3rqV92iwq395JSQ=s640-h400-e365-rw);"></video>
             </section>
 
             <script>
+				var maxTries = 0;
+				function showChromeExtensionStatus() {
+					if(typeof window.getChromeExtensionStatus !== 'function') return;
+
+					var gotResponse;
+					window.getChromeExtensionStatus(function(status) {
+						gotResponse = true;
+						document.getElementById('chrome-extension-status').innerHTML = 'Chrome extension status is: <b>' + status + '</b>';
+						console.info('getChromeExtensionStatus', status);
+					});
+
+					maxTries++;
+					if(maxTries > 15) return;
+					setTimeout(function() {
+						if(!gotResponse) showChromeExtensionStatus();
+					}, 1000);
+				}
+
+				showChromeExtensionStatus();
+
                 // via: https://bugs.chromium.org/p/chromium/issues/detail?id=487935#c17
                 // you can capture screen on Android Chrome >= 55 with flag: "Experimental ScreenCapture android"
                 window.IsAndroidChrome = false;
@@ -277,6 +298,24 @@ <h2 class="header specific-h2">
     });
 });
 &lt;/script&gt;
+</pre>
+
+            </section>
+
+			<section class="experiment">
+              <h2 class="header specific-h2">
+                  How to detect whether extension is installed or not?
+			   </h2>
+
+                <pre class="sh_javascript sh_html">
+&lt;script src="https://cdn.WebRTC-Experiment.com/getScreenId.js"&gt;&lt;/script&gt;
+&lt;script&gt;
+getChromeExtensionStatus(function(status) {
+    if (status === 'installed-enabled') alert('installed');
+    if (status === 'installed-disabled') alert('installed but disabled');
+    // etc.
+});
+&lt;/script&gt;
 </pre>
 
             </section>