Updated screen share to support audio capture. Resolves #36 (#37)

README.md

@@ -133,6 +133,26 @@ room.on(RoomEvent.AudioPlaybackStatusChanged, () => {
 });
 ```
 
+### Screen share
+
+On desktop browsers, you may also share your screen with others. Refer to [browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#browser_compatibility).
+
+Audio capture is supported only a subset of desktop browsers.
+
+```typescript
+const tracks = await createLocalScreenTracks({
+  // set to true in order to capture audio
+  audio: true,
+  // defaults to 1080p
+  resolution: VideoPresets.fhd.resolution,
+});
+
+tracks.forEach((track) => {
+  // publish video and audio of the screenshare
+  room.localParticipant.publishTrack(track);
+});
+```
+
 ### Switching input devices
 
 At any point after publishing, you can switch the input devices and other capture settings on both audio and video tracks. For example, switching between regular and selfie camera or changing microphone inputs. This is performed with `restartTrack` on the `LocalAudioTrack` or `LocalVideoTrack`.
@@ -166,4 +186,4 @@ This library uses [loglevel](https://github.com/pimterry/loglevel) for its inter
 | Chrome          | Windows, macOS, Linux | Android   |
 | Firefox         | Windows, macOS, Linux | Android   |
 | Safari          | macOS                 | iOS       |
-| Edge (Chromium) | Windows, macOS        |
+| Edge (Chromium) | Windows, macOS        |           |

example/sample.ts

@@ -1,5 +1,5 @@
 import {
-  connect, createLocalScreenTrack, CreateVideoTrackOptions,
+  connect, createLocalScreenTracks, CreateVideoTrackOptions,
   LocalAudioTrack,
   LocalTrack,
   LocalVideoTrack,
@@ -286,9 +286,19 @@ window.shareScreen = async () => {
     return;
   }
 
-  screenTrack = await createLocalScreenTrack();
-  await currentRoom.localParticipant.publishTrack(screenTrack, {
-    videoEncoding: VideoPresets.fhd.encoding,
+  const screenTracks = await createLocalScreenTracks({
+    audio: true,
+  });
+  screenTracks.forEach((track) => {
+    if (track instanceof LocalVideoTrack) {
+      screenTrack = track;
+      currentRoom.localParticipant.publishTrack(track, {
+        videoEncoding: VideoPresets.fhd.encoding,
+      });
+    } else {
+      // publish audio track as well
+      currentRoom.localParticipant.publishTrack(track);
+    }
   });
 };
 

src/livekit.ts

@@ -128,11 +128,13 @@ export async function createLocalAudioTrack(
 }
 
 /**
- * Creates a [[LocalVideoTrack]] of screen capture with getDisplayMedia()
+ * Creates a screen capture tracks with getDisplayMedia().
+ * A LocalVideoTrack is always created and returned.
+ * If { audio: true }, and the browser supports audio capture, a LocalAudioTrack is also created.
  */
-export async function createLocalScreenTrack(
+export async function createLocalScreenTracks(
   options?: CreateScreenTrackOptions,
-): Promise<LocalVideoTrack> {
+): Promise<Array<LocalTrack>> {
   if (options === undefined) {
     options = {};
   }
@@ -146,7 +148,7 @@ export async function createLocalScreenTrack(
   // typescript definition is missing getDisplayMedia: https://github.com/microsoft/TypeScript/issues/33232
   // @ts-ignore
   const stream: MediaStream = await navigator.mediaDevices.getDisplayMedia({
-    audio: false,
+    audio: options.audio ?? false,
     video: {
       width: options.resolution.width,
       height: options.resolution.height,
@@ -157,7 +159,13 @@ export async function createLocalScreenTrack(
   if (tracks.length === 0) {
     throw new TrackInvalidError('no video track found');
   }
-  return new LocalVideoTrack(tracks[0], options.name);
+  const localTracks: Array<LocalTrack> = [
+    new LocalVideoTrack(tracks[0], options.name),
+  ];
+  if (stream.getAudioTracks().length > 0) {
+    localTracks.push(new LocalAudioTrack(stream.getAudioTracks()[0], options.name));
+  }
+  return localTracks;
 }
 
 /**

src/room/track/options.ts

@@ -69,6 +69,12 @@ export interface CreateScreenTrackOptions {
   /** name of track, defaults to "screen" */
   name?: string;
 
+  /**
+   * true to capture audio shared. browser support for audio capturing in
+   * screenshare is limited: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#browser_compatibility
+   */
+  audio?: boolean;
+
   /** capture resolution, defaults to full HD */
   resolution?: VideoResolutionConstraint;
 }