Screen-Capturing.js | WebRTC Screen Capturing

HOME © Muaz Khan . @WebRTCWeb . Github . Latest issues . What's New?

You can click any button. Each button explains usage of a unique method:
  1. » Simply get "chromeMediaSourceId" from chrome extension.
  2. » Simply get "chromeMediaSourceId" from chrome extension however pass yoru own array.
  3. » Simply get "chromeMediaSourceId" from chrome extension. (system audio is included)
  4. » Get customized screen constraints.
  5. » Get customized screen constraints. (system audio is included)
  6. » Recommended method to detect presence of chrome extension.
  7. » Not recommended; check if chrome extension is installed and available.
  8. » Render screen in a <video> element.
  9. » Render screen in a <video> element.
You can download chrome extension's full source-code from this link and then you need to modify "manifest.json" to add your domain name (DNS) and last step is simply make ZIP which should be deployed to Google AppStore.

Though, you always having options to make CRX file or directly link the directory in developer mode however Google AppStore is preferred option.

Then you can use this JavaScript file in your own project/demo/library and enjoy fast/direct capturing of the selected content's frames.

  1. Google AppStore deployed extension
  2. Source code of the extension
  3. Source code of Screen-Capturing.js

If I don't want to deploy to Google AppStore?



You can try getScreenId.js which simply uses an iframe-hack to fetch "sourceId" from "www.webrtc-experiment.com" domain. Simply link the library, and use it without any single installation!

How to use Screen-Capturing.js?

// cdn.webrtc-experiment.com/Screen-Capturing.js

// advance users can directly use "getSourceId" method
getSourceId(function(sourceId) {
    if(sourceId != 'PermissionDeniedError') {
        // your code here
    }
});

// otherwise, you can use a helper method
getScreenConstraints(function(error, screen_constraints) {
    if (error) {
        return alert(error);
    }

    navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
    navigator.webkitGetUserMedia({
        video: screen_constraints
    }, function(stream) {
        var video = document.querySelector('video');
        video.src = URL.createObjectURL(stream);
        video.play();
    }, function(error) {
        alert(JSON.stringify(error, null, '\t'));
    });
});

// if you want to check if chrome extension is installed and enabled
isChromeExtensionAvailable(function(isAvailable) {
    if(!isAvailable) alert('Chrome extension is either not installed or disabled.');
});

// instead of using "isChromeExtensionAvailable", you can use
// a little bit more reliable method: "getChromeExtensionStatus"
getChromeExtensionStatus('your-extension-id', function(status) {
    if(status == 'installed-enabled') {
        // chrome extension is installed & enabled.
    }
    
    if(status == 'installed-disabled') {
        // chrome extension is installed but disabled.
    }
    
    if(status == 'not-installed') {
        // chrome extension is not installed
    }
    
    if(status == 'not-chrome') {
        // using non-chrome browser
    }
});

Latest Updates

Feedback

Enter your email too; if you want "direct" reply!