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

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);
  };

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!

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

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

Share with others

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

Thank you!

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.

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