muaz-khan/getscreenid

getScreenId | Capture Screen on Any Domain! This script is a hack used to support single chrome extension usage on any HTTPs domain.

getscreenid's Issues

Share with others

Thanks for tutorial. How can i share my screen with others?

Thank you!

Is it possible to do a screen share implementation without chrome extension on chrome browser through only codes

Problem getting the screen after selecting the window- Screen Share

I'm trying to implement the screen share functionality in Firefox.
I've tried implementing the extension as you said but that didn't work. Then I came to know that I can do that without the extension.

I wrote your code which is in "capture-screen" onclick event.
But, I can select the window(as in your demo) but then I can not see the shared screen.

This is what I do in my JS file in onclick event:

`getScreenId(function(error, sourceId, screen_constraints) {

                    if (IsAndroidChrome) {
                        screen_constraints = {
                            mandatory: {
                                chromeMediaSource: 'screen'
                            },
                            optional: []
                        };
                        
                        screen_constraints = {
                            video: screen_constraints
                        };

                        error = null;
                    }

                    if(error == 'not-installed') {
                      alert('Please install Chrome extension. See the link below.');
                      return;
                    }

                    if(error == 'installed-disabled') {
                      alert('Please install or enable Chrome extension. Please check "chrome://extensions" page.');
                      return;
                    }

                    if(error == 'permission-denied') {
                      alert('Please make sure you are using HTTPs. Because HTTPs is required.');
                      return;
                    }

                    console.info('getScreenId callback \n(error, sourceId, screen_constraints) =>\n', error, sourceId, screen_constraints);

                    navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
                    navigator.getUserMedia(screen_constraints, function(stream) {

                        document.querySelector('video').src = URL.createObjectURL(stream);

                        stream.oninactive = stream.onended = function() {
                            document.querySelector('video').src = null;
                        };

                    }, function(error) {
                        console.error('getScreenId error', error);

                        alert('Failed to capture your screen. Please check Chrome console logs for further information.');
                    });
                });`

I have also getScreenId.js as you stated.

Kindly tell me what I'm doing wrong.

Thank you.

Screen Sharing With Audio

hi, I want to share the screen with audio. Firefox is ok, but chrome is not.
the callback paramter of constraints in chrome is following:
screen_constraints { "video": { "mandatory": { "chromeMediaSource": "desktop", "maxWidth": 1280, "maxHeight": 720, "chromeMediaSourceId": "duqJhQS6UlzRqFpgGB4W5w==", "maxFrameRate": 10 }, "optional": [] }, "audio": true }
in firefox is following:
screen_constraints { "video": { "mozMediaSource": "screen", "mediaSource": "screen", "width": { "max": 1280 }, "height": { "max": 720 }, "frameRate": { "max": 10 } }, "audio": true }

after function getUserMedia(), it will be going to the failed callback, the error message is none as following:
NavigatorUserMediaError {name: "ScreenCaptureError", message: "", constraintName: ""}

How can I do if I want to share screen with audio in chrome?

Thanks!

Chrome extension status is: installed-disabled

I'd like to host all the dependencies myself.
I modified getScreenId.js to embed getScreenId.html served from my own domain.
//iframe.src = 'https://www.webrtc-experiment.com/getSourceId/'; // https://wwww.yourdomain.com/getScreenId.html iframe.src = 'getScreenId.html'; // https://wwww.yourdomain.com/getScreenId.html

But when I click: Capture Your Own Screen in the example provided (index.html) I get the following message:
Chrome extension status is: installed-disabled

The full url is https://localhost:8080/getScreenId.html.
I tried that too but that didn't make a difference.

getScreenId needs to be called twice to work

hello,

I tried to use getScreenId in my own application but it needs to be called twice to work. After investigation, I found the culprit, https://github.com/muaz-khan/getScreenId/blob/master/getScreenId.js#L55. The listener on the message is removed a bit too soon.

During the first call, the value of event.data is

{request: "postUri", uri: "https://www.webrtc-experiment.com/getSourceId/"}

Based on the logic, it will remove the listener before triggering the correct value back to my custom code.

During the second call, the value of event.data is

{chromeMediaSourceId: "xhtC84z5dQzNWCZIFq5owA=="}

If found out that the code works fine in your example (https://github.com/muaz-khan/getScreenId/blob/master/index.html) because you are calling the method getChromeExtensionStatus which will simulate the first call.

Shouldn't we only remove the listener when calling the callback in getScreenId ?

i.e

window.getScreenId = function(callback) {
        // for Firefox:
        // sourceId == 'firefox'
        // screen_constraints = {...}
        if (!!navigator.mozGetUserMedia) {
            callback(null, 'firefox', {
                video: {
                    mozMediaSource: 'window',
                    mediaSource: 'window'
                }
            });
            return;
        }

        window.addEventListener('message', onIFrameCallback);

        function onIFrameCallback(event) {
            if (!event.data) return;

            if (event.data.chromeMediaSourceId) {
                // this event listener is no more needed
                window.removeEventListener('message', onIFrameCallback);
                if (event.data.chromeMediaSourceId === 'PermissionDeniedError') {
                    callback('permission-denied');
                } else callback(null, event.data.chromeMediaSourceId, getScreenConstraints(null, event.data.chromeMediaSourceId));
            }

            if (event.data.chromeExtensionStatus) {
                // this event listener is no more needed
                window.removeEventListener('message', onIFrameCallback);
                callback(event.data.chromeExtensionStatus, null, getScreenConstraints(event.data.chromeExtensionStatus));
                
            }

            // this event listener is no more needed
            //window.removeEventListener('message', onIFrameCallback);
        }

        setTimeout(postGetSourceIdMessage, 100);
    };

Best regards

Adding microphone sound to screen sharing

when screen sharing Setting up audio:true is error

var screen_constraints = { audio:true, video: { mandatory: { chromeMediaSource: error ? 'screen' : 'desktop', maxWidth: window.screen.width > 1280 ? window.screen.width : 1280, maxHeight: window.screen.height > 720 ? window.screen.height : 720 }, optional: [] } };
is error
Can I collect the microphone, how do I do it， Thank you

getChromeExtensionStatus() does not follow the standard NodeJS conventions

According to NodeJS conventions, the callback should be error-first, meaning getChromeExtensionStatus() should return a callback with an error as the first value and the status as the second value.

I am using Bluebird's promisify function with getChromeExtensionStatus() and I have to use .catch because of that.

Promise.promisify(window.getChromeExtensionStatus)()
  .catch(function(error) {
    console.log(error.message) // will get me the status
});

here is my suggestion

window.getChromeExtensionStatus = function(callback) {
    // for Firefox:
    if (!!navigator.mozGetUserMedia) {
      callback(new Error('not-chrome'), null);
      return;
    }

    window.addEventListener('message', onIFrameCallback);

    function onIFrameCallback(event) {
      if (!event.data) return;

      if (event.data.chromeExtensionStatus) {
        if (event.data.chromeExtensionStatus === 'installed-enabled') {
          callback(null, event.data.chromeExtensionStatus);
        } else {
          callback(new Error(event.data.chromeExtensionStatus), null);
        }
      }

      // this event listener is no more needed
      window.removeEventListener('message', onIFrameCallback);
    }

    setTimeout(postGetChromeExtensionStatusMessage, 100);
  };

How can i share link to other users to share my screen.

How can i create the link to share the my screen to other users.
i seen you tube tutorial also bu it is not full

thanks in advance