Pick some changes to 4.2.x. (#149)

* Fix port, line number reference in p2p sample README

Also, fix some formatting and add some helpful text.

Signed-off-by: Geoff Gustafson <[email protected]>

* moving to getDisplayMedia

* apply comments

Author: jianjunz

README.md

@@ -3,7 +3,7 @@
 Open WebRTC Toolkit JavaScript SDK builds on top of the W3C standard WebRTC APIs to accelerate development of real-time communications (RTC) for web applications, including peer-to-peer, broadcasting, and conference mode communications.
 
 ## How to build release package
-1. Run `npm install -g grunt-cli` to install grunt.
+1. Run `npm install -g grunt-cli` to install grunt. (You may need to `chown -R $USER /usr/local` for this to work.)
 2. Go to "scripts" folder.
 3. Run `npm install` to install development dependencies.
 4. Run `grunt`.

src/extension/screen-sharing-chrome-extension/manifest.json

@@ -1,14 +1,18 @@
-#How to run p2p sample
-###1st step: Run Woogeen p2p server
-To run the server, you need to install node and npm, then change directory into server, and install all modules listed as dependencies in package.json by using command **`npm install`**  .
-After dependencies successfully installed,  you can run the peerserver.js by using command **`node peerserver.js`**. It will listen on port 8085/8096.
-###2nd step:  Deploy p2p sample page and sdk on web server
+# How to run p2p sample
+
+## Step 1: Run p2p server
+To run the server, you need to install node and npm, then change into the [owt-server-p2p](https://github.com/open-webrtc-toolkit/owt-server-p2p) source directory, and install all modules listed as dependencies in package.json by using command `npm install`  .
+After the dependencies are successfully installed, you can run the peer server by using the command `node peerserver.js`. It will listen on ports 8095/8096.
+
+## Step 2:  Deploy p2p sample page and sdk on web server
 You need to edit the sample page `peercall.html`:
 
- - Set serverAddress in line 128, change `example.com` to your p2p server address.
- - Set correct ICE server address.
+ - Set serverAddress on line 112: change `example.com` to your p2p server address.
+ - Set correct ICE server addresses below that.
+
+Then choose a webserver such as Apache, and deploy the page and the sdk.
 
-Then choose a webserver such as apache, deploy the page and sdk.
+## Step 3: Visit the website
+You can then visit the page from a web browser, with a URL such as https://server.domain.com:<PORT>/peercall.html
 
-###3rd step: Visit the website
-You can visit the page on web browser
+Open the web page from two clients with cameras connected, and choose two names. On one, type the first name and click **Login**, then type the second name and click **Set Remote Id**. On the other client, swap the names. Then click **Share Camera** on each to stream video.

src/extension/screen-sharing-chrome-extension/script.js

@@ -52,7 +52,7 @@ export class VideoTrackConstraints {
   // eslint-disable-next-line require-jsdoc
   constructor(source) {
     if (!Object.values(MediaFormatModule.VideoSourceInfo)
-        .some((v) => v === source)) {
+      .some((v) => v === source)) {
       throw new TypeError('Invalid source.');
     }
     /**
@@ -94,7 +94,6 @@ export class VideoTrackConstraints {
  * @constructor
  * @param {?Owt.Base.AudioTrackConstraints} audioConstraints
  * @param {?Owt.Base.VideoTrackConstraints} videoConstraints
- * @param {?string} extensionId The ID of Chrome screen sharing extension.
  */
 export class StreamConstraints {
   // eslint-disable-next-line require-jsdoc
@@ -111,19 +110,13 @@ export class StreamConstraints {
      * @instance
      */
     this.video = videoConstraints;
-    /**
-     * @member {string} extensionId
-     * @memberof Owt.Base.MediaStreamDeviceConstraints
-     * @desc The ID of Chrome Extension for screen sharing.
-     * @instance
-     */
   }
 }
 
 // eslint-disable-next-line require-jsdoc
 function isVideoConstrainsForScreenCast(constraints) {
   return (typeof constraints.video === 'object' && constraints.video.source ===
-      MediaFormatModule.VideoSourceInfo.SCREENCAST);
+    MediaFormatModule.VideoSourceInfo.SCREENCAST);
 }
 
 /**
@@ -170,123 +163,63 @@ export class MediaStreamFactory {
           'Cannot capture video from screen cast while capture audio from'
           + ' other source.'));
     }
-    // Screen sharing on Chrome does not work with the latest constraints
-    // format.
-    if (isVideoConstrainsForScreenCast(constraints) && utils.isChrome()) {
-      if (!constraints.extensionId) {
-        return Promise.reject(new TypeError(
-            'Extension ID must be specified for screen sharing on Chrome.'));
-      }
-      const desktopCaptureSources = ['screen', 'window', 'tab'];
-      if (constraints.audio) {
-        desktopCaptureSources.push('audio');
+
+    // Check and convert constraints.
+    if (!constraints.audio && !constraints.video) {
+      return Promise.reject(new TypeError(
+        'At least one of audio and video must be requested.'));
+    }
+    const mediaConstraints = Object.create({});
+    if (typeof constraints.audio === 'object' &&
+        constraints.audio.source === MediaFormatModule.AudioSourceInfo.MIC) {
+      mediaConstraints.audio = Object.create({});
+      if (utils.isEdge()) {
+        mediaConstraints.audio.deviceId = constraints.audio.deviceId;
+      } else {
+        mediaConstraints.audio.deviceId = {
+          exact: constraints.audio.deviceId,
+        };
       }
-      return new Promise((resolve, reject) => {
-        chrome.runtime.sendMessage(
-            constraints.extensionId, {
-              getStream: desktopCaptureSources,
-            },
-            function(response) {
-              if (response === undefined) {
-                return reject(new Error(chrome.runtime.lastError.message));
-              }
-              if (constraints.audio && typeof response.options !== 'object') {
-                Logger.warning(
-                    'Desktop sharing with audio requires the latest Chrome' +
-                    ' extension. Your audio constraints will be ignored.');
-              }
-              const mediaConstraints = Object.create({});
-              if (constraints.audio && (typeof response.options === 'object')) {
-                if (response.options.canRequestAudioTrack) {
-                  mediaConstraints.audio = {
-                    mandatory: {
-                      chromeMediaSource: 'desktop',
-                      chromeMediaSourceId: response.streamId,
-                    },
-                  };
-                } else {
-                  Logger.warning(
-                      'Sharing screen with audio was not selected by user.');
-                }
-              }
-              mediaConstraints.video = Object.create({});
-              mediaConstraints.video.mandatory = Object.create({});
-              mediaConstraints.video.mandatory.chromeMediaSource = 'desktop';
-              mediaConstraints.video.mandatory.chromeMediaSourceId =
-                  response.streamId;
-              // Transform new constraint format to the old style. Because
-              // chromeMediaSource only supported in the old style, and mix new
-              // and old style will result type error: "Cannot use both
-              // optional/mandatory and specific or advanced constraints.".
-              if (constraints.video.resolution) {
-                mediaConstraints.video.mandatory.maxHeight =
-                    mediaConstraints.video.mandatory.minHeight =
-                        constraints.video.resolution.height;
-                mediaConstraints.video.mandatory.maxWidth =
-                    mediaConstraints.video.mandatory.minWidth =
-                        constraints.video.resolution.width;
-              }
-              if (constraints.video.frameRate) {
-                mediaConstraints.video.mandatory.minFrameRate =
-                    constraints.video.frameRate;
-                mediaConstraints.video.mandatory.maxFrameRate =
-                    constraints.video.frameRate;
-              }
-              resolve(navigator.mediaDevices.getUserMedia(mediaConstraints));
-            });
-      });
     } else {
-      if (!constraints.audio && !constraints.video) {
-        return Promise.reject(new TypeError(
-            'At least one of audio and video must be requested.'));
+      mediaConstraints.audio = constraints.audio;
+    }
+    if (typeof constraints.audio === 'object' &&
+        constraints.audio.source ===
+            MediaFormatModule.AudioSourceInfo.SCREENCAST) {
+      Logger.warning(
+        'Screen sharing with audio is not supported in Firefox.');
+      mediaConstraints.audio = false;
+    }
+    if (typeof constraints.video === 'object') {
+      mediaConstraints.video = Object.create({});
+      if (typeof constraints.video.frameRate === 'number') {
+        mediaConstraints.video.frameRate = constraints.video.frameRate;
       }
-      const mediaConstraints = Object.create({});
-      if (typeof constraints.audio === 'object' &&
-          constraints.audio.source === MediaFormatModule.AudioSourceInfo.MIC) {
-        mediaConstraints.audio = Object.create({});
-        if (utils.isEdge()) {
-          mediaConstraints.audio.deviceId = constraints.audio.deviceId;
-        } else {
-          mediaConstraints.audio.deviceId = {
-            exact: constraints.audio.deviceId,
-          };
-        }
-      } else {
-        mediaConstraints.audio = constraints.audio;
+      if (constraints.video.resolution &&
+          constraints.video.resolution.width &&
+          constraints.video.resolution.height) {
+        mediaConstraints.video.width = Object.create({});
+        mediaConstraints.video.width.exact =
+            constraints.video.resolution.width;
+        mediaConstraints.video.height = Object.create({});
+        mediaConstraints.video.height.exact =
+            constraints.video.resolution.height;
       }
-      if (typeof constraints.audio === 'object' &&
-          constraints.audio.source ===
-              MediaFormatModule.AudioSourceInfo.SCREENCAST) {
-        Logger.warning(
-            'Screen sharing with audio is not supported in Firefox.');
-        mediaConstraints.audio = false;
+      if (typeof constraints.video.deviceId === 'string') {
+        mediaConstraints.video.deviceId = { exact: constraints.video.deviceId };
       }
-      if (typeof constraints.video === 'object') {
-        mediaConstraints.video = Object.create({});
-        if (typeof constraints.video.frameRate === 'number') {
-          mediaConstraints.video.frameRate = constraints.video.frameRate;
-        }
-        if (constraints.video.resolution &&
-            constraints.video.resolution.width &&
-            constraints.video.resolution.height) {
-          mediaConstraints.video.width = Object.create({});
-          mediaConstraints.video.width.exact =
-              constraints.video.resolution.width;
-          mediaConstraints.video.height = Object.create({});
-          mediaConstraints.video.height.exact =
-              constraints.video.resolution.height;
-        }
-        if (typeof constraints.video.deviceId === 'string') {
-          mediaConstraints.video.deviceId = {exact: constraints.video.deviceId};
-        }
-        if (utils.isFirefox() &&
-            constraints.video.source ===
-                MediaFormatModule.VideoSourceInfo.SCREENCAST) {
-          mediaConstraints.video.mediaSource = 'screen';
-        }
-      } else {
-        mediaConstraints.video = constraints.video;
+      if (utils.isFirefox() &&
+          constraints.video.source ===
+              MediaFormatModule.VideoSourceInfo.SCREENCAST) {
+        mediaConstraints.video.mediaSource = 'screen';
       }
+    } else {
+      mediaConstraints.video = constraints.video;
+    }
+
+    if (isVideoConstrainsForScreenCast(constraints)) {
+      return navigator.mediaDevices.getDisplayMedia(mediaConstraints);
+    } else {
       return navigator.mediaDevices.getUserMedia(mediaConstraints);
     }
   }