From a146b92d3dc1d1655a5c83fbc8602c09fda331a7 Mon Sep 17 00:00:00 2001 From: Hussain Khalid <72780625+hussain-khalid@users.noreply.github.com> Date: Fri, 5 Jul 2024 11:57:14 +0500 Subject: [PATCH] Endoc-265 Web screen sharing updates (#1552) * updates * review updates --------- Co-authored-by: saudsami --- .../project-implementation/web.mdx | 73 +++---------------- 1 file changed, 12 insertions(+), 61 deletions(-) diff --git a/shared/video-sdk/develop/screen-sharing/project-implementation/web.mdx b/shared/video-sdk/develop/screen-sharing/project-implementation/web.mdx index 744407598..b45c91007 100644 --- a/shared/video-sdk/develop/screen-sharing/project-implementation/web.mdx +++ b/shared/video-sdk/develop/screen-sharing/project-implementation/web.mdx @@ -7,75 +7,26 @@ This section shows you how to implement in your Web SDK supports on Chrome 58 and higher with or without using a extension. +The Web SDK supports on Chrome version 58 and higher. Follow these steps to share your screen. - - +Call `createScreenVideoTrack` to create a track. - -This method requires Chrome 74 or above. If the version you are targeting does not meet this requirement, use the extension to share the screen. - - -Call `createScreenVideoTrack` directly to create a track. +This method requires Chrome 74 or above. If you are using an older version, use the screen sharing plug-in to share the screen. - -{`AgoraRTC.createScreenVideoTrack({ +```javascript +AgoraRTC.createScreenVideoTrack({ // Configure screen sharing encoding parameters, see API documentation for details encoderConfig: "1080p_1", // Set the video transmission optimization mode to prioritize quality ("detail"), or smoothness ("motion") optimizationMode: "detail" }).then(localScreenTrack => { /** ... **/ -});`} - - - - - -Take the following steps to download and set up the screen sharing extension: - -1. Download the [ Chrome plug-in](http://download.agora.io/sdk/release/chrome-extension.zip) and unzip the package: - - ![Chrome Extension](/images/video-sdk/chrome-plugin-step1.png) - -1. Open the `manifest.json` file and add your web page domain name. For example, if you use `localhost`, add `*://localhost/*` to the `matches` field: - - - {`"matches": [ - "*://localhost/*", - "*://*.agora.io/*", - "*://webdemo.agora.io/*", - "*://webdemo.agorabeckon.com/*", - "*://videocall.agora.io/*" - ]`} - - -1. Open your Chrome browser, click the settings button in the upper right corner of the screen, select **Extensions** > **Manage Extensions**. The extension page opens. - -1. On the extensions page, enable **Developer mode**. - -1. Click **Load unpacked** to load the unzipped extension. Navigate to the `chrome-extension` folder you just unzipped, and click **Select**. A message appears, indicating that the extension has been loaded. - -1. After installing the extension, find its ID directly on the extension page. You use this ID to configure the extension from your code: - - ![Extension Id](/images/video-sdk/extension-id-step3.png) - -1. Use the extension ID to specify the `extensionId` parameter when creating the screen video track. - - - {`AgoraRTC.createScreenVideoTrack({ - extensionId: 'minllpmhdgpndnkomcoccfekfegnlikg', - }).then(localScreenTrack => { - /** ... **/ - });`} - - - - +}); +``` #### Share audio -The Web SDK supports simultaneous and locally played background sounds on Windows and macOS platforms with the Chrome browser version 74 and higher. +The Web SDK supports simultaneous sharing the screen and locally played background sounds on Windows and macOS platforms with the Chrome browser version 74 and higher. When calling the `createScreenVideoTrack` method, set the `withAudio` parameter to `enable`. @@ -92,13 +43,13 @@ AgoraRTC.createScreenVideoTrack({ }); ``` -##### Additional notes + +- After you call the method, the end user must check **Share Audio** in the popup box for the setting to take effect. -- After the method is called, the end user must check **Share Audio** in the popup box for the setting to take effect. + ![Chrome Screen Share](/images/video-sdk/tmp_screen-sharing-web-chrome.png) - If you choose to share a single app window, the audio cannot be shared. - -![Chrome Screen Share](/images/video-sdk/tmp_screen-sharing-web-chrome.png) + ### Edge browser