From 60772e0ae0cab9e6d64394014532c7f8629390a2 Mon Sep 17 00:00:00 2001 From: Jon Date: Tue, 6 Jul 2021 14:04:00 +0100 Subject: [PATCH] removed track resume from videogrid --- .../components/VideoGrid/VideoGrid.js | 38 +-------------- dailyjs/basic-call/pages/index.js | 10 +++- .../shared/components/HairCheck/HairCheck.js | 2 +- dailyjs/shared/contexts/CallProvider.js | 2 +- dailyjs/shared/hooks/usePreferredLayer.js | 46 +++++++++++++++++++ dailyjs/shared/lib/demoProps.js | 2 + 6 files changed, 60 insertions(+), 40 deletions(-) create mode 100644 dailyjs/shared/hooks/usePreferredLayer.js diff --git a/dailyjs/basic-call/components/VideoGrid/VideoGrid.js b/dailyjs/basic-call/components/VideoGrid/VideoGrid.js index 223b424..1b5b20e 100644 --- a/dailyjs/basic-call/components/VideoGrid/VideoGrid.js +++ b/dailyjs/basic-call/components/VideoGrid/VideoGrid.js @@ -2,14 +2,13 @@ import React, { useState, useMemo, useEffect, useRef } from 'react'; import Tile from '@dailyjs/shared/components/Tile'; import { DEFAULT_ASPECT_RATIO } from '@dailyjs/shared/constants'; import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider'; -import { useTracks } from '@dailyjs/shared/contexts/TracksProvider'; +import usePreferredLayer from '@dailyjs/shared/hooks/usePreferredLayer'; import { useDeepCompareMemo } from 'use-deep-compare'; export const VideoGrid = React.memo( () => { const containerRef = useRef(); const { allParticipants } = useParticipants(); - const { resumeVideoTrack } = useTracks(); const [dimensions, setDimensions] = useState({ width: 1, height: 1, @@ -91,40 +90,7 @@ export const VideoGrid = React.memo( [layout, allParticipants] ); - /** - * Set bandwidth layer based on amount of visible participants - */ - useEffect(() => { - if ( - typeof rtcpeers === 'undefined' || - // eslint-disable-next-line no-undef - rtcpeers?.getCurrentType() !== 'sfu' - ) - return; - - // eslint-disable-next-line no-undef - const sfu = rtcpeers.soup; - const count = allParticipants.length; - - allParticipants.forEach(({ id }) => { - if (count < 5) { - // High quality video for calls with < 5 people per page - sfu.setPreferredLayerForTrack(id, 'cam-video', 2); - } else if (count < 10) { - // Medium quality video for calls with < 10 people per page - sfu.setPreferredLayerForTrack(id, 'cam-video', 1); - } else { - // Low quality video for calls with 10 or more people per page - sfu.setPreferredLayerForTrack(id, 'cam-video', 0); - } - }); - }, [allParticipants]); - - useEffect(() => { - allParticipants.forEach( - (p) => p.id !== 'local' && resumeVideoTrack(p.id) - ); - }, [allParticipants, resumeVideoTrack]); + usePreferredLayer(); if (!allParticipants.length) { return null; diff --git a/dailyjs/basic-call/pages/index.js b/dailyjs/basic-call/pages/index.js index 1e0d432..ea8a8da 100644 --- a/dailyjs/basic-call/pages/index.js +++ b/dailyjs/basic-call/pages/index.js @@ -25,6 +25,7 @@ export default function Index({ predefinedRoom = '', forceFetchToken = false, forceOwner = false, + subscribeToTracksAutomatically = true, asides, modals, customTrayComponent, @@ -111,7 +112,12 @@ export default function Index({ modals={modals} customTrayComponent={customTrayComponent} > - + @@ -136,11 +142,11 @@ Index.propTypes = { customAppComponent: PropTypes.node, forceFetchToken: PropTypes.bool, forceOwner: PropTypes.bool, + subscribeToTracksAutomatically: PropTypes.bool, }; export async function getStaticProps() { const defaultProps = getDemoProps(); - return { props: defaultProps, }; diff --git a/dailyjs/shared/components/HairCheck/HairCheck.js b/dailyjs/shared/components/HairCheck/HairCheck.js index a668045..925e2c5 100644 --- a/dailyjs/shared/components/HairCheck/HairCheck.js +++ b/dailyjs/shared/components/HairCheck/HairCheck.js @@ -30,7 +30,7 @@ import { useDeepCompareMemo } from 'use-deep-compare'; * - Set user name and join call / request access */ export const HairCheck = () => { - const { callObject } = useCallState(); + const { callObject, join } = useCallState(); const { localParticipant } = useParticipants(); const { deviceState, camError, micError, isCamMuted, isMicMuted } = useMediaDevices(); diff --git a/dailyjs/shared/contexts/CallProvider.js b/dailyjs/shared/contexts/CallProvider.js index b884666..37bacf3 100644 --- a/dailyjs/shared/contexts/CallProvider.js +++ b/dailyjs/shared/contexts/CallProvider.js @@ -27,7 +27,7 @@ export const CallProvider = ({ domain, room, token = '', - subscribeToTracksAutomatically = false, + subscribeToTracksAutomatically = true, }) => { const [videoQuality, setVideoQuality] = useState(VIDEO_QUALITY_AUTO); const [preJoinNonAuthorized, setPreJoinNonAuthorized] = useState(false); diff --git a/dailyjs/shared/hooks/usePreferredLayer.js b/dailyjs/shared/hooks/usePreferredLayer.js new file mode 100644 index 0000000..9059976 --- /dev/null +++ b/dailyjs/shared/hooks/usePreferredLayer.js @@ -0,0 +1,46 @@ +/* global rtcpeers */ + +import { useEffect } from 'react'; +import { useParticipants } from '../contexts/ParticipantsProvider'; + +/** + * This hook will switch between one of the 3 simulcast layers + * depending on the number of participants present on the call + * to optimise bandwidth / cpu usage + * + * Note: the API for this feature is currently work in progress + * and not documented. Momentarily we are using an internal + * method `setPreferredLayerForTrack` found on the global + * `rtcpeers` object. + * + * Note: this will have no effect when not in SFU mode + */ +export const usePreferredLayer = () => { + const { allParticipants } = useParticipants(); + + /** + * Set bandwidth layer based on amount of visible participants + */ + useEffect(() => { + if (typeof rtcpeers === 'undefined' || rtcpeers?.getCurrentType() !== 'sfu') + return; + + const sfu = rtcpeers.soup; + const count = allParticipants.length; + + allParticipants.forEach(({ id }) => { + if (count < 5) { + // High quality video for calls with < 5 people per page + sfu.setPreferredLayerForTrack(id, 'cam-video', 2); + } else if (count < 10) { + // Medium quality video for calls with < 10 people per page + sfu.setPreferredLayerForTrack(id, 'cam-video', 1); + } else { + // Low quality video for calls with 10 or more people per page + sfu.setPreferredLayerForTrack(id, 'cam-video', 0); + } + }); + }, [allParticipants]); +}; + +export default usePreferredLayer; diff --git a/dailyjs/shared/lib/demoProps.js b/dailyjs/shared/lib/demoProps.js index 240b904..84abf7c 100644 --- a/dailyjs/shared/lib/demoProps.js +++ b/dailyjs/shared/lib/demoProps.js @@ -5,5 +5,7 @@ export default function getDemoProps() { isConfigured: !!process.env.DAILY_DOMAIN && !!process.env.DAILY_API_KEY, // Have we predefined a room to use? predefinedRoom: process.env.DAILY_ROOM || '', + // Manual or automatic track subscriptions + subscribeToTracksAutomatically: !process.env.MANUAL_TRACK_SUBS, }; }