Skip to content

Latest commit

 

History

History
 
 

desktopCapture

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
background-script.js
background-script.js
 
 
content-script.js
content-script.js
 
 
icon.png
icon.png
 
 
manifest.json
manifest.json
 
 

README.md

Chrome desktopCapture extension

This chrome extension simply captures content of your screen. It returns source-id to callee; and that source-id can be used as chromeMediaSourceId in WebRTC applications to capture screen's MediaStream.

List of applications that are using same extension:

  1. getScreenId.js - a tinny javascript library that be used in any domain, application or WebRTC wrapper library.
  2. RTCMultiConnection.js - a WebRTC wrapper library providing approximately all possible WebRTC p2p-mesh-based features.
  3. Screen.js - a screen capturing library along with multi-user p2p screen streaming.
  4. Pluginfree Screen Sharing - a standalone application, providing multi-user p2p screen streaming in HD format.

Recommendations?

It is recommended to use getScreenId.js to capture screen. In that case, you don't need to publish this chrome extension yourself in Google App Store.

<script src="//cdn.WebRTC-Experiment.com/getScreenId.js"></script>
<video controls autoplay></video>
<script>
getScreenId(function (error, sourceId, screen_constraints) {
    navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
    navigator.getUserMedia(screen_constraints, function (stream) {
        document.querySelector('video').src = URL.createObjectURL(stream);
    }, function (error) {
        console.error(error);
    });
});
</script>

How to install?

How to publish yourself?

First step: modify allowed-domains in manifest.json file:

{
    "content_scripts": [ {
       "js": [ "content-script.js" ],
       "all_frames": true,
       "run_at": "document_start",
       "matches": ["*://www.domain.com/*"]
    }]
}

To test locally, you can add *://localhost:*/* in the matches list.

Second step: make ZIP of the directory.

Third step: navigate to Chrome WebStore Developer Dashboard and click Add New Item blue button.

To learn more about how to publish a chrome extension in Google App Store:

How to add inline-install button?

Make sure that you added and verified your webpage/domain using Google WebMaster tools. Additional instructions available here.

<!DOCTYPE html>
<html>
    <head>
        <!-- head; this <link> tag MUST be in <head> section -->
        <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/your-chrome-extension-id">
    </head>
    <body>
        <!-- body; the button element that is used to invoke inline installation -->
        <button onclick="" id="install-button" style="padding: 0;background: none;height: 61px;vertical-align: middle;cursor:pointer;">
            <img src="https://www.webrtc-experiment.com/images/btn-install-chrome-extension.png" alt="Add to Chrome">
        </button>
        
        <script>
            document.querySelector('#inline-install').onclick = function() {
                !!navigator.webkitGetUserMedia 
                    && !!window.chrome 
                    && !!chrome.webstore 
                    && !!chrome.webstore.install && 
                chrome.webstore.install(
                    'https://chrome.google.com/webstore/detail/your-chrome-extension-id', 
                    successCallback, 
                    failureCallback
                );
            };
            
            function successCallback() {
                location.reload();
            }
            
            function failureCallback(error) {
                alert(error);
            }
        </script>
    </body>
</html>

For more information

For additional information, click this link.

Credits

Muaz Khan:

  1. Personal Webpage: http://www.muazkhan.com
  2. Email: [email protected]
  3. Twitter: https://twitter.com/muazkh and https://twitter.com/WebRTCWeb
  4. Google+: https://plus.google.com/+WebRTC-Experiment
  5. Facebook: https://www.facebook.com/WebRTC

License

Chrome-Extensions are released under MIT licence . Copyright (c) Muaz Khan.