docs: add docs for screensharing

GetStream · Oct 3, 2023 · fbdf043 · fbdf043
1 parent f878098
commit fbdf043
Show file tree

Hide file tree

Showing 8 changed files with 179 additions and 21 deletions.
diff --git a/...s/client/docusaurus/docs/javascript/02-guides/03-call-and-participant-state.mdx b/...s/client/docusaurus/docs/javascript/02-guides/03-call-and-participant-state.mdx
@@ -95,6 +95,7 @@ The `StreamVideoParticipant` object contains the following information:
 | `audioStream`             | The published audio `MediaStream`.                                          |
 | `videoStream`             | The published video `MediaStream`.                                          |
 | `screenShareStream`       | The published screen share `MediaStream`.                                   |
+| `screenShareAudioStream`  | The published screen share audio `MediaStream`.                             |
 | `isLocalParticipant`      | It's `true` if the participant is the local participant.                    |
 | `pin`                     | Holds pinning information.                                                  |
 | `reaction`                | The last reaction this user has sent to this call.                          |

diff --git a/packages/client/docusaurus/docs/javascript/02-guides/04-camera-and-microphone.mdx b/packages/client/docusaurus/docs/javascript/02-guides/04-camera-and-microphone.mdx
@@ -11,13 +11,11 @@ If you want to see the device management API in action, you can check out [the s
 ### Start-stop camera
 
 ```typescript
-const toggleCamera = () => {
-  call.camera.toggle();
+call.camera.toggle();
 
-  // or
-  call.camera.enable();
-  call.camera.disable();
-};
+// or
+call.camera.enable();
+call.camera.disable();
 ```
 
 Here is how you can access the status:

diff --git a/packages/client/docusaurus/docs/javascript/02-guides/04-screensharing.mdx b/packages/client/docusaurus/docs/javascript/02-guides/04-screensharing.mdx
@@ -0,0 +1,77 @@
+---
+id: screensharing
+title: Screen Sharing
+description: Managing Screen Sharing
+---
+
+If you want to see the device management API in action, you can check out [the sample app](https://github.com/GetStream/stream-video-js/tree/main/sample-apps/client/ts-quickstart).
+
+## Screen Sharing
+
+### Start/Stop Screen Sharing
+
+```typescript
+call.screenShare.toggle();
+
+// or
+call.screenShare.enable();
+call.screenShare.disable();
+```
+
+### Screen Sharing Status
+
+Here is how you can access the status of screen sharing:
+
+```typescript
+call.screenShare.state.status; // enabled, disabled or undefined
+
+// or, if you want to subscribe to changes
+call.screenShare.state.status$.subscribe((status) => {
+  // enabled, disabled or undefined
+});
+```
+
+### Screen Sharing Settings
+
+The behavior of the screen share video track can be customized, and a few parameters can be set:
+
+```typescript
+call.screenShare.setSettings({
+  maxFramerate: 15, // will be clamped between 1 and 15 fps
+  maxBitrate: 1500000, // will use at most 1.5Mbps
+});
+
+call.screenShare.enable();
+```
+
+### Render Screen Share
+
+Please follow our [Playing Video and Audio guide](../../guides/playing-video-and-audio/).
+
+## Screen Share Audio
+
+### Start/Stop Screen Share Audio
+
+```typescript
+// enable it
+call.screenShare.enableScreenShareAudio();
+
+// publish video and audio (if available, and supported by the browser)
+call.screenShare.enable();
+
+// disable it
+call.screenShare.disableScreenShareAudio();
+```
+
+### Play Screen Share Audio
+
+Please follow our [Playing Video and Audio guide](../../guides/playing-video-and-audio/).
+
+### Caveats
+
+Screen Share Audio has limited support across browsers and platforms.
+For most up-to-date information, please take a look at [Browser Compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture#browser_compatibility).
+
+In addition to that, there are a [few caveats](https://caniuse.com/?search=getDisplayMedia) that you should be aware of:
+
+- On Windows, the entire system audio can be captured, but on MacOS and Lunux, only the audio of a tab can be captured.
diff --git a/...ages/client/docusaurus/docs/javascript/02-guides/11-playing-video-and-audio.mdx b/...ages/client/docusaurus/docs/javascript/02-guides/11-playing-video-and-audio.mdx
@@ -61,6 +61,7 @@ This method can be found in `call.bindAudioElement`. It takes two arguments:
 
 - the audio element to bind to
 - the participant's `sessionId`
+- the kind of track to bind to (either `audioTrack` or `screenShareAudioTrack` for screen sharing)
 
 This method needs to be called only once, usually after the element is mounted in the DOM.
 
@@ -73,6 +74,10 @@ if (!audioElement) {
 
   // bind the audio element to the participant's audio track
   // use the returned `unbind()` function to unbind the audio element
-  const unbind = call.bindAudioElement(audioElement, participant.sessionId);
+  const unbind = call.bindAudioElement(
+    audioElement,
+    participant.sessionId,
+    'audioTrack',
+  );
 }
 ```
diff --git a/packages/react-bindings/src/hooks/callStateHooks.ts b/packages/react-bindings/src/hooks/callStateHooks.ts
@@ -6,11 +6,9 @@ import {
   CallSettingsResponse,
   CallState,
   CallStatsReport,
-  CameraManagerState,
   Comparator,
   EgressResponse,
   MemberResponse,
-  MicrophoneManagerState,
   StreamVideoParticipant,
   UserResponse,
 } from '@stream-io/video-client';
@@ -330,12 +328,7 @@ export const useCallThumbnail = () => {
  */
 export const useCameraState = () => {
   const call = useCall();
-
-  const {
-    camera = {
-      state: new CameraManagerState(),
-    },
-  } = call as Call;
+  const { camera } = call as Call;
 
   const status = useObservableValue(camera.state.status$);
   const direction = useObservableValue(camera.state.direction$);
@@ -353,12 +346,7 @@ export const useCameraState = () => {
  */
 export const useMicrophoneState = () => {
   const call = useCall();
-
-  const {
-    microphone = {
-      state: new MicrophoneManagerState(),
-    },
-  } = call as Call;
+  const { microphone } = call as Call;
 
   const status = useObservableValue(microphone.state.status$);
   const selectedDevice = useObservableValue(microphone.state.selectedDevice$);
@@ -368,3 +356,14 @@ export const useMicrophoneState = () => {
     selectedDevice,
   };
 };
+
+export const useScreenShareState = () => {
+  const call = useCall();
+  const { screenShare } = call as Call;
+
+  const status = useObservableValue(screenShare.state.status$);
+
+  return {
+    status,
+  };
+};
diff --git a/...ative-sdk/docusaurus/docs/reactnative/03-core/03-call-and-participant-state.mdx b/...ative-sdk/docusaurus/docs/reactnative/03-core/03-call-and-participant-state.mdx
@@ -150,6 +150,7 @@ The `StreamVideoParticipant` object contains the following information:
 | `audioStream`             | The published audio `MediaStream`.                                          |
 | `videoStream`             | The published video `MediaStream`.                                          |
 | `screenShareStream`       | The published screen share `MediaStream`.                                   |
+| `screenShareAudioStream`  | The published screen share audio `MediaStream`.                             |
 | `isLocalParticipant`      | It's `true` if the participant is the local participant.                    |
 | `pin`                     | Holds pinning information.                                                  |
 | `reaction`                | The last reaction this user has sent to this call.                          |

diff --git a/...ges/react-sdk/docusaurus/docs/React/02-guides/03-call-and-participant-state.mdx b/...ges/react-sdk/docusaurus/docs/React/02-guides/03-call-and-participant-state.mdx
@@ -143,6 +143,7 @@ The `StreamVideoParticipant` object contains the following information:
 | `audioStream`             | The published audio `MediaStream`.                                          |
 | `videoStream`             | The published video `MediaStream`.                                          |
 | `screenShareStream`       | The published screen share `MediaStream`.                                   |
+| `screenShareAudioStream`  | The published screen share audio `MediaStream`.                             |
 | `isLocalParticipant`      | It's `true` if the participant is the local participant.                    |
 | `pin`                     | Holds pinning information.                                                  |
 | `reaction`                | The last reaction this user has sent to this call.                          |

diff --git a/packages/react-sdk/docusaurus/docs/React/02-guides/04-screensharing.mdx b/packages/react-sdk/docusaurus/docs/React/02-guides/04-screensharing.mdx
@@ -0,0 +1,76 @@
+---
+id: screensharing
+title: Screen Sharing
+description: Managing Screen Sharing
+---
+
+## Screen Sharing
+
+### Start/Stop Screen Sharing
+
+```typescript
+call.screenShare.toggle();
+
+// or
+call.screenShare.enable();
+call.screenShare.disable();
+```
+
+### Screen Sharing Status
+
+Here is how you can access the status of screen sharing:
+
+```typescript
+import { useCallStateHooks } from '@stream-io/video-react-sdk';
+
+call.screenShare.state.status; // enabled, disabled or undefined
+
+// or, if you want to subscribe to changes
+const { useScreenShareState } = useCallStateHooks();
+const { status } = useScreenShareState();
+```
+
+### Screen Sharing Settings
+
+The behavior of the screen share video track can be customized, and a few parameters can be set:
+
+```typescript
+call.screenShare.setSettings({
+  maxFramerate: 15, // will be clamped between 1 and 15 fps
+  maxBitrate: 1500000, // will use at most 1.5Mbps
+});
+
+call.screenShare.enable();
+```
+
+### Render Screen Share
+
+Our SDK provided [`ParticipantView`](../../ui-components/core/participant-view/) component can automatically render the screen share video track.
+
+## Screen Share Audio
+
+### Start/Stop Screen Share Audio
+
+```typescript
+// enable it
+call.screenShare.enableScreenShareAudio();
+
+// publish video and audio (if available, and supported by the browser)
+call.screenShare.enable();
+
+// disable it
+call.screenShare.disableScreenShareAudio();
+```
+
+### Play Screen Share Audio
+
+Our SDK provided [`ParticipantView`](../../ui-components/core/participant-view/) component can automatically play the screen share audio track.
+
+### Caveats
+
+Screen Share Audio has limited support across browsers and platforms.
+For most up-to-date information, please take a look at [Browser Compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture#browser_compatibility).
+
+In addition to that, there are a [few caveats](https://caniuse.com/?search=getDisplayMedia) that you should be aware of:
+
+- On Windows, the entire system audio can be captured, but on MacOS and Lunux, only the audio of a tab can be captured.