jeffemmett
/
daily-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #78 from daily-demos/use-live-streaming 

use useLiveStreaming hook - Daily react hooks
This commit is contained in:
Harshith Pabbati 2022-04-12 12:00:49 +05:30 committed by GitHub
parent 35fba7642f 43f69601f2
commit 3e1b2638fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 133 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
custom/basic-call/components/App/App.js
View File

@ -17,7 +17,7 @@ export const App = ({ customComponentForState }) => {
...customComponentForState,
});
// Memoize children to avoid unnecassary renders from HOC
// Memoize children to avoid unnecessary renders from HOC
return useMemo(
() => (
<>

2
custom/basic-call/components/Call/VideoGrid.js
View File

@ -89,7 +89,7 @@ export const VideoGrid = React.memo(
return bestLayout;
}, [dimensions, participants]);
// Memoize our tile list to avoid unnecassary re-renders
// Memoize our tile list to avoid unnecessary re-renders
const tiles = useDeepCompareMemo(
() =>
participants.map((p) => (

4
custom/fitness-demo/components/App/App.js
View File

@ -1,8 +1,8 @@
import React, { useMemo } from 'react';
import { LiveStreamingProvider } from '@custom/live-streaming/contexts/LiveStreamingProvider';
import { RecordingProvider } from '@custom/recording/contexts/RecordingProvider';
import ExpiryTimer from '@custom/shared/components/ExpiryTimer';
import { useCallState } from '@custom/shared/contexts/CallProvider';
import { LiveStreamingProvider } from '@custom/shared/contexts/LiveStreamingProvider';
import { useCallUI } from '@custom/shared/hooks/useCallUI';
import PropTypes from 'prop-types';
@ -21,7 +21,7 @@ export const App = ({ customComponentForState }) => {
...customComponentForState,
});
// Memoize children to avoid unnecassary renders from HOC
// Memoize children to avoid unnecessary renders from HOC
return useMemo(
() => (
<>

2
custom/fitness-demo/components/Tray/Stream.js
View File

@ -1,8 +1,8 @@
import React from 'react';
import { LIVE_STREAMING_MODAL } from '@custom/live-streaming/components/LiveStreamingModal';
import { useLiveStreaming } from '@custom/live-streaming/contexts/LiveStreamingProvider';
import { TrayButton } from '@custom/shared/components/Tray';
import { useLiveStreaming } from '@custom/shared/contexts/LiveStreamingProvider';
import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
import { useUIState } from '@custom/shared/contexts/UIStateProvider';
import { ReactComponent as IconStream } from '@custom/shared/icons/streaming-md.svg';

8
custom/live-streaming/README.md
View File

@ -18,7 +18,13 @@
Please note: this demo is not currently mobile optimised
### Getting started
## Pre-requisites
To use this demo, you will need to create a [Daily account](https://dashboard.daily.co/signup) and a [Daily room](https://dashboard.daily.co/rooms/create).
You will also need to enter an RTMP URL in the demo UI to start a live stream. To learn more about where to find this value, please read Daily's [live streaming guide](https://docs.daily.co/guides/paid-features/live-streaming-with-daily). You may also find the [live streaming with AWS's IVS tutorial](https://www.daily.co/blog/live-stream-daily-calls-with-only-3-second-latency/) helpful.
## Getting started
```
# set both DAILY_API_KEY and DAILY_DOMAIN

2
custom/live-streaming/components/App.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import App from '@custom/basic-call/components/App';
import { LiveStreamingProvider } from '../contexts/LiveStreamingProvider';
import { LiveStreamingProvider } from '@custom/shared/contexts/LiveStreamingProvider';
// Extend our basic call app component with the live streaming context
export const AppWithLiveStreaming = () => (

82
custom/live-streaming/components/LiveStreamingModal.js
View File

@ -5,10 +5,9 @@ import Field from '@custom/shared/components/Field';
import { TextInput, SelectInput } from '@custom/shared/components/Input';
import Modal from '@custom/shared/components/Modal';
import Well from '@custom/shared/components/Well';
import { useCallState } from '@custom/shared/contexts/CallProvider';
import { useLiveStreaming } from '@custom/shared/contexts/LiveStreamingProvider';
import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
import { useUIState } from '@custom/shared/contexts/UIStateProvider';
import { useLiveStreaming } from '../contexts/LiveStreamingProvider';
export const LIVE_STREAMING_MODAL = 'live-streaming';
@ -19,15 +18,19 @@ const LAYOUTS = [
];
export const LiveStreamingModal = () => {
const { callObject } = useCallState();
const { allParticipants } = useParticipants();
const { participants } = useParticipants();
const { currentModals, closeModal } = useUIState();
const { isStreaming, streamError } = useLiveStreaming();
const {
isStreaming,
streamError,
startLiveStreaming,
stopLiveStreaming,
} = useLiveStreaming();
const [pending, setPending] = useState(false);
const [rtmpUrl, setRtmpUrl] = useState('');
const [layout, setLayout] = useState(0);
const [layoutType, setLayoutType] = useState('default');
const [maxCams, setMaxCams] = useState(9);
const [participant, setParticipant] = useState(0);
const [participantId, setParticipantId] = useState(0);
useEffect(() => {
// Reset pending state whenever stream state changes
@ -35,20 +38,30 @@ export const LiveStreamingModal = () => {
}, [isStreaming]);
function startLiveStream() {
setPending(true);
const config = {
rtmpUrl,
layout: {
preset: layoutType,
},
};
const opts =
layout === 'single-participant'
? { session_id: participant.id }
: { max_cam_streams: maxCams };
callObject.startLiveStreaming({ rtmpUrl, preset: layout, ...opts });
if (layoutType === 'single-participant')
config.layout.session_id = participantId;
else if (layoutType === 'default') config.layout.max_cam_streams = maxCams;
startLiveStreaming(config);
}
function stopLiveStreaming() {
function stopLiveStream() {
setPending(true);
callObject.stopLiveStreaming();
stopLiveStreaming();
}
const handleRMTPURLChange = (e) => setRtmpUrl(e.target.value);
const handleSelectLayoutInputChange = (e) => setLayoutType(e.target.value);
const handleSelectParticipantInputChange = (e) => setParticipantId(e.target.value);
const handleSelectMaxCamsInputChange = (e) => setMaxCams(e.target.valueAsNumber);
return (
<Modal
title="Live stream"
@ -62,7 +75,7 @@ export const LiveStreamingModal = () => {
<Button
fullWidth
disabled={!rtmpUrl || pending}
onClick={() => startLiveStream()}
onClick={startLiveStream}
>
{pending ? 'Starting stream...' : 'Start live streaming'}
</Button>
@ -70,7 +83,7 @@ export const LiveStreamingModal = () => {
<Button
fullWidth
variant="warning"
onClick={() => stopLiveStreaming()}
onClick={stopLiveStream}
>
Stop live streaming
</Button>
@ -85,22 +98,21 @@ export const LiveStreamingModal = () => {
<CardBody>
<Field label="Layout">
<SelectInput
onChange={(e) => setLayout(Number(e.target.value))}
value={layout}
onChange={handleSelectLayoutInputChange}
value={layoutType}
>
{LAYOUTS.map((l, i) => (
<option value={i} key={l.value}>
{LAYOUTS.map((l) => (
<option value={l.value} key={l.value}>
{l.label}
</option>
))}
</SelectInput>
</Field>
{layout !==
LAYOUTS.findIndex((l) => l.value === 'single-participant') && (
{layoutType === 'default' && (
<Field label="Additional cameras">
<SelectInput
onChange={(e) => setMaxCams(Number(e.target.value))}
onChange={handleSelectMaxCamsInputChange}
value={maxCams}
>
<option value={9}>9 cameras</option>
@ -116,15 +128,17 @@ export const LiveStreamingModal = () => {
</Field>
)}
{layout ===
LAYOUTS.findIndex((l) => l.value === 'single-participant') && (
{layoutType === 'single-participant' && (
<Field label="Select participant">
<SelectInput
onChange={(e) => setParticipant(e.target.value)}
value={participant}
onChange={handleSelectParticipantInputChange}
value={participantId}
>
{allParticipants.map((p) => (
<option value={p.id} key={p.id}>
<option value={0} disabled>
Select
</option>
{participants.map((p) => (
<option value={p.sessionId} key={p.sessionId}>
{p.name}
</option>
))}
@ -137,8 +151,14 @@ export const LiveStreamingModal = () => {
type="text"
placeholder="RTMP URL"
required
onChange={(e) => setRtmpUrl(e.target.value)}
onChange={handleRMTPURLChange}
/>
<a
className="learn-more"
href="https://docs.daily.co/guides/paid-features/live-streaming-with-daily"
>
Want to learn more about RTMP url?
</a>
</Field>
</CardBody>
</Modal>

2
custom/live-streaming/components/Tray.js
View File

@ -1,10 +1,10 @@
import React from 'react';
import { TrayButton } from '@custom/shared/components/Tray';
import { useLiveStreaming } from '@custom/shared/contexts/LiveStreamingProvider';
import { useUIState } from '@custom/shared/contexts/UIStateProvider';
import { ReactComponent as IconStream } from '@custom/shared/icons/streaming-md.svg';
import { useLiveStreaming } from '../contexts/LiveStreamingProvider';
import { LIVE_STREAMING_MODAL } from './LiveStreamingModal';
export const Tray = () => {

71
custom/live-streaming/contexts/LiveStreamingProvider.js
View File

@ -1,71 +0,0 @@
import React, {
useState,
createContext,
useContext,
useEffect,
useCallback,
} from 'react';
import { useCallState } from '@custom/shared/contexts/CallProvider';
import { useUIState } from '@custom/shared/contexts/UIStateProvider';
import PropTypes from 'prop-types';
export const LiveStreamingContext = createContext();
export const LiveStreamingProvider = ({ children }) => {
const [isStreaming, setIsStreaming] = useState(false);
const [streamError, setStreamError] = useState();
const { setCustomCapsule } = useUIState();
const { callObject } = useCallState();
const handleStreamStarted = useCallback(() => {
console.log('📺 Live stream started');
setIsStreaming(true);
setStreamError(null);
setCustomCapsule({ variant: 'recording', label: 'Live streaming' });
}, [setCustomCapsule]);
const handleStreamStopped = useCallback(() => {
console.log('📺 Live stream stopped');
setIsStreaming(false);
setCustomCapsule(null);
}, [setCustomCapsule]);
const handleStreamError = useCallback(
(e) => {
setIsStreaming(false);
setCustomCapsule(null);
setStreamError(e.errorMsg);
},
[setCustomCapsule]
);
useEffect(() => {
if (!callObject) {
return false;
}
console.log('📺 Live streaming provider listening for stream events');
callObject.on('live-streaming-started', handleStreamStarted);
callObject.on('live-streaming-stopped', handleStreamStopped);
callObject.on('live-streaming-error', handleStreamError);
return () => {
callObject.off('live-streaming-started', handleStreamStarted);
callObject.off('live-streaming-stopped', handleStreamStopped);
callObject.on('live-streaming-error', handleStreamError);
};
}, [callObject, handleStreamStarted, handleStreamStopped, handleStreamError]);
return (
<LiveStreamingContext.Provider value={{ isStreaming, streamError }}>
{children}
</LiveStreamingContext.Provider>
);
};
LiveStreamingProvider.propTypes = {
children: PropTypes.node,
};
export const useLiveStreaming = () => useContext(LiveStreamingContext);

2
custom/shared/components/HairCheck/HairCheck.js
View File

@ -86,7 +86,7 @@ export const HairCheck = () => {
}
};
// Memoize the to prevent unnecassary re-renders
// Memoize the to prevent unnecessary re-renders
const tileMemo = useDeepCompareMemo(
() => (
<Tile

67
custom/shared/contexts/LiveStreamingProvider.js Normal file
View File

@ -0,0 +1,67 @@
import React, {
createContext,
useContext,
useCallback,
} from 'react';
import { useLiveStreaming as useDailyLiveStreaming } from '@daily-co/daily-react-hooks';
import PropTypes from 'prop-types';
import { useUIState } from './UIStateProvider';
export const LiveStreamingContext = createContext();
export const LiveStreamingProvider = ({ children }) => {
// setCustomCapsule allows us to set the recording capsule on the header
// to indicate that the recording is going on.
const { setCustomCapsule } = useUIState();
const handleStreamStarted = useCallback(() => {
console.log('📺 Live stream started');
setCustomCapsule({ variant: 'recording', label: 'Live streaming' });
}, [setCustomCapsule]);
const handleStreamStopped = useCallback(() => {
console.log('📺 Live stream stopped');
setCustomCapsule(null);
}, [setCustomCapsule]);
const handleStreamError = useCallback(
(e) => {
console.log('📺 Live stream error ' + e.errorMsg);
setCustomCapsule(null);
},
[setCustomCapsule]
);
const {
isLiveStreaming,
layout,
errorMsg,
startLiveStreaming,
updateLiveStreaming,
stopLiveStreaming
} = useDailyLiveStreaming({
onLiveStreamingStarted: handleStreamStarted,
onLiveStreamingStopped: handleStreamStopped,
onLiveStreamingError: handleStreamError,
});
return (
<LiveStreamingContext.Provider
value={{
isStreaming: isLiveStreaming,
streamError: errorMsg,
layout,
startLiveStreaming,
updateLiveStreaming,
stopLiveStreaming,
}}>
{children}
</LiveStreamingContext.Provider>
);
};
LiveStreamingProvider.propTypes = {
children: PropTypes.node,
};
export const useLiveStreaming = () => useContext(LiveStreamingContext);

86
custom/shared/contexts/callState.js
View File

@ -1,86 +0,0 @@
/**
* Call State
* ---
* Duck file that keeps state of call participants
*/
export const ACTION_PARTICIPANT_JOINED = 'ACTION_PARTICIPANT_JOINED';
export const ACTION_PARTICIPANT_UPDATED = 'ACTION_PARTICIPANT_UPDATED';
export const ACTION_PARTICIPANTED_LEFT = 'ACTION_PARTICIPANT_LEFT';
export const initialCallState = {
audioTracks: {},
videoTracks: {},
callItems: {},
fatalError: false,
};
export function isLocal(id) {
return id === 'local';
}
function getCallItems(newParticipants, prevCallItems) {
const callItems = {};
const entries = Object.entries(newParticipants);
entries.forEach(([id, participant]) => {
const prevState = prevCallItems[id];
const hasLoaded = !prevState?.isLoading;
const missingTracks = !(participant.audioTrack || participant.videoTrack);
const joined = prevState?.joined || new Date().getTime() / 1000;
const local = isLocal(id);
callItems[id] = {
id,
name: participant.user_name || 'Guest',
audioTrack: participant.audioTrack,
videoTrack: participant.videoTrack,
hasNameSet: !!participant.user_name,
isActiveSpeaker: !!prevState?.isActiveSpeaker,
isCamMuted: !participant.video,
isLoading: !hasLoaded && missingTracks,
isLocal: local,
isMicMuted: !participant.audio,
isOwner: !!participant.owner,
isRecording: !!participant.record,
lastActiveDate: prevState?.lastActiveDate ?? null,
mutedByHost: participant?.tracks?.audio?.off?.byRemoteRequest,
isScreenshare: false,
joined,
};
if (participant.screenVideoTrack || participant.screenAudioTrack) {
callItems[`${id}-screen`] = {
audioTrack: participant.tracks.screenAudio.persistentTrack,
hasNameSet: null,
id: `${id}-screen`,
isLoading: false,
isLocal: local,
isScreenshare: true,
lastActiveDate: prevState?.lastActiveDate ?? null,
name: participant.user_name,
videoTrack: participant.screenVideoTrack,
};
}
});
return callItems;
}
export function isScreenShare(id) {
return id.endsWith('-screen');
}
export function containsScreenShare(participants) {
return Object.keys(participants).some((id) => isScreenShare(id));
}
export function callReducer(state, action) {
switch (action.type) {
case ACTION_PARTICIPANT_UPDATED:
return {
...state,
callItems: getCallItems(action.participants, state.callItems),
};
default:
throw new Error();
}
}