AJS-261: Extensions upgrade and allowing configuration of extensions from AdapterJS level

[oooookk7]

Note: New extensions must be approved first, and then the ID and links can be updated to this branch before this PR can be merged. Additionally this blocks the release of ESS-886 since it is tested with this branch.

Summary

This PR is to patch Chrome/IE/Safari "mediaSource" flag not being honoured, and realised that an entire extension update has to be done. This is for us to ensure our polyfills and extensions are up-to-date as of what's the current state of things in implementations. This PR might have huge code changes.

Note that we are not waiting for the extensions to be approved due to time constraints, that will be another mini PR for that.

Changelog:

• Added AdapterJS.extensionInfo object to allow configuration of custom extension using the AdapterJS extension codebase. Developers can override the extension settings by pre-defining the AdapterJS object first then loading the AdapterJS script.

  Example:

  <script>
    var AdapterJS = {};
    AdapterJS.extensionInfo = { ... };
    AdapterJS.options = { ... };
    AdapterJS.pluginInfo = { ... };
  </script>
  <script src="https://cdn.temasys.com.sg/adapterjs/0.14.x/adapter.screenshare.js"></script>
  <script>
    AdapterJS.webRTCReady(function () { /* Start using getUserMedia() and RTCPeerConnection */ });
  </script>

• Removed required need to install Firefox addon for version 52 and above.

  1. Previously, we require an addon which uses the Bootstrapped API, which allows modification of the browser preferences of media.getusermedia.screensharing.enabled to enable screensharing and media.getusermedia.screensharing.allowed_domains) to whitelist the domains.

  2. However, media.getusermedia.screensharing.enabled has been enabled by default and whitelisting has been removed from 52 onwards.

  3. Even so, the Bootstrapped API no longer can be used from 53 onwards and uploaded on the addons.mozilla.org (AMO).

  4. The extension we have - Skylink WebRTC Tools will work with 51 and below and only with our specified domains.

  5. If developers need to enable screensharing for 51 and below, we have to ask them to tell their end-users to modify the about:config manually and set the media.getusermedia.screensharing.enabled to true and media.getusermedia.screensharing.allowed_domains to append the domain they want to enable screensharing.

• Added checks to ensure that required and correct parameters are provided.

  • navigator.getUserMedia() should receive parameters like constraints, successCb and failureCb, else throw an Error.

  • Due to the overrides, when we need to return failureCb() for extension disabled case, it will throw an Error with message like "failureCb() is not a method" which instead we could tell the users to provide the correct mandatory parameters first.

  • Browsers generally throw errors if parameters are not satisfied. Try navigator.mozGetUserMedia({}) or navigator.webkitGetUserMedia({}) and errors should be thrown.

  • Implemented try and catch for navigator.mediaDevices.getUserMedia() which returns a Promise to prevent the Error when thrown to be returned in Promise's reject as part of the Promise methodology.

• Added stringent checks to ensure the types are expected.

  • Example, instead of object && !!object.prop, do this object && typeof object === 'object' && object.hasOwnProperty(prop).

  • Older Firefox versions used to give me this when implementing a similar login in the SDK: "Read a property from a non-object but a Boolean" errors before, it's better to add checks with expected types.

• Fixes to honour the "mediaSource" flag in Chrome / Safari / IE / Firefox.

  • Updated Chrome extensions and detectRTC.html code base to ensure that "mediaSource" flag is honoured. The codebase should be able to be backwards compatible.

  • When "mediaSource" flag is provided in Safari / IE, accept only values like "screen", "window" or a combination of them in an Array.

    • When AdapterJS.WebRTCPlugin.plugin.screensharingKeys is not available, fallback to alternative like AdapterJS.WebRTCPlugin.plugin.screensharingKey || "Screensharing".

  • When "mediaSource" flag is provided in Chrome / Opera, accept only values like "screen", "window", "tab" or a combination of them in an Array.

  • Additionally accept only types like ["tab", "audio"] to retrieve tab audio. If constraints.audio is not enabled (truthy) and ["tab", "audio"] is requested, warn end-users.

  • When "mediaSource" flag is provided in Firefox, accept only values like "screen", "application", "camera" as described by bugzilla ticket.

  • Additionally accept "window" as valid value as described here.

  • If provided as an Array, accept the first valid source value. Example where sources are: ["tab", "screen", "audio", "window"], "screen" will be selected.

  • For "browser" value, the browser preference media.getusermedia.browser.enabled value has to be set to true in about:config as described here.

• Added screensharing support for Android Chrome 59, where "mediaSource" should only accept value of "screen".

  • To use and test this, the experimental screensharing flag has to be enabled in chrome://flags as described in here.

• Added support for Opera screensharing. This uses the same codebase for the new Chrome extension.

• Added flag AdapterJS._mediaSourcePolyfillIsDefined to prevent AdapterJS._defineMediaSourcePolyfill() from being invoked again as a form of sanity prevention.

  • Renamed AdapterJS.defineMediaSourcePolyfill to AdapterJS._defineMediaSourcePolyfill with an added _ prefix as it's an internal method.

Testing

Note, we should move these test cases to unit tests.

How is it tested:

• For adapter.screenshare-old.js, go to this link.
• For adapter.screenshare-new.js, checkout to this branch, do grunt publish and copy the publish/adapter.screenshare.js file.
• For detectRTC-old.html, go to this link.
• For detectRTC-new.html, PM.
• For older chrome extension, go to this link.
• For new chrome extension, PM.

This uses the navigator.getUserMedia({ audio: true, video: { mediaSource: xx } }).

Chrome

Use the new extension in development mode.

1. Ensure that when using the new AdapterJS + new DetectRTC + new Chrome extension, whatever "mediaSource" is provided is presented as expected. Like "tab" should result in displaying a list of browser tabs to select. Like ["tab", "audio"] should result in being able to select browser tabs and select audio, or ["tab", "audio"] should return the audio track, or ["screen", "window"] returns a list of screens or windows to select.

2. Ensure that when using any old AdapterJS / DetectRTC / Chrome extension with new AdapterJS / DetectRTC / Chrome extension should not affect previous functionalities where "window" and "screen" sources is presented.

Firefox

1. Ensure that for Firefox 52 when PermissionDenied, the popup installation doesn't trigger.

2. Ensure that for Firefox 51 and below when PermissionDenied, the popup installation does trigger.

3. Ensure that "camera", "browser", "application" are valid sources for "mediaSource".

Opera

Use the new extension in development mode.

1. Ensure that screensharing extension triggers for the list of sources.

---

Test cases tested:

Chrome extension test:

Extension tested in development mode.

• New Chrome extension version: 0.1.4
• New DetectRTC version: 0.1.2

Result	AdapterJS	DetectRTC	Chrome Extension
PASS	Branch	0.1.1	0.1.3
PASS	Branch	0.1.1	0.1.4
PASS	Branch	0.1.2	0.1.3
PASS	Branch	0.1.2	0.1.4
PASS	0.14.1	0.1.1	0.1.3
PASS	0.14.1	0.1.1	0.1.4
PASS	0.14.1	0.1.2	0.1.3
PASS	0.14.1	0.1.2	0.1.4

Firefox versions test:

Result	Firefox	Addon installation popup triggered
PASS	52	No
PASS	49	Yes

Constraints test:

Extensions are tested in development mode, except for Firefox. Note that for the current Chrome extension ljckddiekopnnjoeaiofddfhgnbdoafc as a fallback alternative will not honour the "mediaSource" flag and return ["window", "screen"] as expected. This should be different in the new Chrome extension when approved.

Result	Browser	Constraints - "mediaSource"
PASS	Opera/Chrome	"tab"
PASS	Opera/Chrome	"window"
PASS	Opera/Chrome	"screen"
PASS	Opera/Chrome	["tab", "audio"] audio: false
PASS	Opera/Chrome	["tab", "audio"] audio: true
PASS	Opera/Chrome	["tab", "screen"]
PASS	Opera/Chrome	["tab", "window"]
PASS	Opera/Chrome	["window", "screen"]
PASS	Opera/Chrome	["window", "screen", "tab"]
PASS	Chrome Android	["screen"]
PASS	Chrome Android	"screen"
PASS	Firefox	["screen"]
PASS	Firefox	"screen"
PASS	Firefox	["window"]
PASS	Firefox	"window"
PASS	Firefox	["camera"]
PASS	Firefox	"camera"
PASS	Firefox	["browser"]
PASS	Firefox	"browser"
PASS	Firefox	["application"]
PASS	Firefox	"application"
PASS	Safari/IE	"screen"
PASS	Safari/IE	"window"
PASS	Safari/IE	["screen", "window"]

[oooookk7]

See TWP-704 for plugin. Checked with @miniruwan on the actual way of how it should work and now it works.

[oooookk7]

@miniruwan removed the if else checks for removing mediaSource flag for plugin.

[oooookk7]

@johache due to time constraints for urgent release, we are going ahead for the release.