Experimenting with some ConnectOptions and video/screen capture setti…

…ngs. (#45)

* Experimenting with some ConnectOptions and video/screen capture settings.

* Add options for standard priority

* Update package-lock

* Change how video element is muted

Co-authored-by: timmydoza <timmydoza@gmail.com>

.gitignore

@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# IntelliJ IDEA project config
+.idea
+
 # dependencies
 node_modules
 .pnp

package.json

@@ -43,7 +43,7 @@
     "start-server-and-test": "^1.10.6",
     "ts-jest": "^24.1.0",
     "twilio": "^3.36.0",
-    "twilio-video": "2.0.0-beta16",
+    "twilio-video": "^2.0.0",
     "typescript": "3.6.4"
   },
   "lint-staged": {

src/components/VideoProvider/useLocalTracks/useLocalTracks.test.tsx

@@ -18,9 +18,10 @@ describe('the useLocalTracks hook', () => {
     await waitForNextUpdate();
     expect(Video.createLocalAudioTrack).toHaveBeenCalledWith({ name: 'microphone' });
     expect(Video.createLocalVideoTrack).toHaveBeenCalledWith({
+      frameRate: 24,
+      height: 720,
+      width: 1280,
       name: 'camera',
-      width: { ideal: 1280 },
-      height: { ideal: 720 },
     });
   });
 

src/components/VideoProvider/useLocalTracks/useLocalTracks.ts

@@ -36,9 +36,10 @@ export function useLocalVideoTrack() {
   const getLocalVideoTrack = useCallback(
     () =>
       Video.createLocalVideoTrack({
+        frameRate: 24,
+        height: 720,
+        width: 1280,
         name: 'camera',
-        width: { ideal: 1280 },
-        height: { ideal: 720 },
       }).then(newTrack => {
         setTrack(newTrack);
         return newTrack;

src/components/VideoProvider/useRoom/useRoom.tsx

@@ -14,10 +14,13 @@ export default function useRoom(
   const disconnectHandlerRef = useRef<() => void>(() => {});
 
   useEffect(() => {
+    const localAudioTracks = localTracks.filter(({ kind }) => kind === 'audio');
+    const localVideoTracks = localTracks.filter(({ kind }) => kind === 'video');
+
     // Connect to a room when we have a token, but not if a connection is in progress.
     if (token && room.state !== 'connected' && !isConnecting) {
       setIsConnecting(true);
-      Video.connect(token, { ...options, tracks: [] }).then(
+      Video.connect(token, { ...options, tracks: localAudioTracks }).then(
         newRoom => {
           setRoom(newRoom);
 
@@ -29,13 +32,13 @@ export default function useRoom(
           // @ts-ignore
           window.twilioRoom = newRoom;
 
-          localTracks.forEach(track =>
+          localVideoTracks.forEach(track =>
             // Tracks can be supplied as arguments to the Video.connect() function and they will automatically be published.
             // However, tracks must be published manually in order to set the priority on them.
             // All video tracks are published with 'low' priority. This works because the video
             // track that is displayed in the 'MainParticipant' component will have it's priority
             // set to 'high' via track.setPriority()
-            newRoom.localParticipant.publishTrack(track, { priority: track.name === 'camera' ? 'low' : 'standard' })
+            newRoom.localParticipant.publishTrack(track, { priority: 'low' })
           );
 
           disconnectHandlerRef.current = () => newRoom.disconnect();

src/components/VideoTrack/VideoTrack.tsx

@@ -20,6 +20,7 @@ export default function VideoTrack({ track, isLocal, priority }: VideoTrackProps
 
   useEffect(() => {
     const el = ref.current;
+    el.muted = true;
     if (track.setPriority && priority) {
       track.setPriority(priority);
     }

src/hooks/useScreenShareToggle/useScreenShareToggle.tsx

@@ -15,7 +15,14 @@ export default function useScreenShareToggle() {
 
   const shareScreen = useCallback(() => {
     navigator.mediaDevices
-      .getDisplayMedia()
+      .getDisplayMedia({
+        audio: false,
+        video: {
+          frameRate: 3,
+          height: 1080,
+          width: 1920,
+        },
+      })
       .then(stream => {
         const track = stream.getTracks()[0];
 

src/index.tsx

@@ -16,26 +16,21 @@ import { VideoProvider } from './components/VideoProvider';
 // for available connection options.
 
 const connectionOptions: ConnectOptions = {
-  dominantSpeaker: true,
-  networkQuality: {
-    local: 1,
-    remote: 1,
-  },
   bandwidthProfile: {
     video: {
       mode: 'collaboration',
-      dominantSpeakerPriority: 'standard',
       renderDimensions: {
-        standard: {
-          // same as low
-          width: 176,
-          height: 144,
-        },
+        high: { height: 1080, width: 1920 },
+        standard: { height: 90, width: 160 },
+        low: { height: 90, width: 160 },
       },
+      trackSwitchOffMode: 'detected',
     },
   },
+  dominantSpeaker: true,
+  maxAudioBitrate: 12000,
+  networkQuality: { local: 1, remote: 1 },
   preferredVideoCodecs: [{ codec: 'VP8', simulcast: true }],
-  trackSwitchOffMode: 'detected',
 };
 
 const VideoProviderWithToken = () => {

src/types.ts

@@ -20,14 +20,14 @@ declare module 'twilio-video' {
     setPriority: (priority: Track.Priority | null) => void;
   }
 
-  interface ConnectOptions {
+  interface VideoBandwidthProfileOptions {
     trackSwitchOffMode?: 'predicted' | 'detected' | 'disabled';
   }
 }
 
 declare global {
   interface MediaDevices {
-    getDisplayMedia(): Promise<MediaStream>;
+    getDisplayMedia(constraints: MediaStreamConstraints): Promise<MediaStream>;
   }
 }