Kimberlee Johnson kimberleejohnson
kimberleejohnson
/ share-video.html
Created Apr 14, 2021
A Daily hack for streaming a local video file during a call.
kimberleejohnson
/ Tray.js
Created Sep 10, 2020
Buttons that call call object methods in React video chat app powered by Daily
View Tray.js
| // In Tray.js | |
| function toggleCamera() { | |
| callObject.setLocalVideo(isCameraMuted); | |
| } | |
| function toggleMic() { | |
| callObject.setLocalAudio(isMicMuted); | |
| } |
kimberleejohnson
/ Tray.js
Created Sep 10, 2020
Event listener in participant menu bar in React Daily video chat
View Tray.js
| // In Tray.js | |
| function getStreamStates(callObject) { | |
| let isCameraMuted, | |
| isMicMuted, | |
| isSharingScreen = false; | |
| if ( | |
| callObject && | |
| callObject.participants() && | |
| callObject.participants().local |
kimberleejohnson
/ Tile.js
Last active Mar 19, 2021
Passing saved audio tracks down to unique tile components in Daily video chat React app
View Tile.js
| // In Tile.js | |
| export default function Tile(props) { | |
| const videoEl = useRef(null); | |
| const audioEl = useRef(null); | |
| // ... | |
| function getVideoComponent() { | |
| return videoTrack && <video autoPlay muted playsInline ref={videoEl} />; |
kimberleejohnson
/ Call.js
Last active Mar 19, 2021
Loop over call state and pass participant audio tracks to individual tile components
View Call.js
| function getTiles() { | |
| let largeTiles = []; | |
| let smallTiles = []; | |
| Object.entries(callState.callItems).forEach(([id, callItem]) => { | |
| const isLarge = | |
| isScreenShare(id) || | |
| (!isLocal(id) && !containsScreenShare(callState.callItems)); | |
| const tile = ( | |
| <Tile | |
| key={id} |
kimberleejohnson
/ callState.js
Last active Mar 19, 2021
Map over call state to determine how many tiles to display
View callState.js
| // In callState.js | |
| function getCallItems(participants) { | |
| let callItems = { ...initialCallState.callItems }; // Ensure we *always* have a local participant | |
| for (const [id, participant] of Object.entries(participants)) { | |
| callItems[id] = { | |
| videoTrackState: participant.tracks.video, | |
| audioTrackState: participant.tracks.audio, | |
| }; | |
| if (shouldIncludeScreenCallItem(participant)) { |
kimberleejohnson
/ callState.js
Last active Mar 19, 2021
Sample component state for a Daily video chat app built in React
View callState.js
| { | |
| local: { | |
| videoTrackState: null, | |
| audioTrackState: null, | |
| }, | |
| <other-participant-1>: { | |
| /*...*/ | |
| }, | |
| <other-participant-1>-screen: { | |
| /*...*/ |
kimberleejohnson
/ Call.js
Created Sep 9, 2020
Sample code for wiring up event listeners in a Daily-powered React video chat app
View Call.js
| // In Call.js | |
| useEffect(() => { | |
| if (!callObject) return; | |
| const events = [ | |
| "participant-joined", | |
| "participant-updated", | |
| "participant-left" | |
| ]; |
kimberleejohnson
/ App.js
Created Sep 9, 2020
Sample code for leaving a Daily video call In a React app
View App.js
| // In App.js | |
| /** | |
| * Starts leaving the current call. | |
| */ | |
| const startLeavingCall = useCallback(() => { | |
| if (!callObject) return; | |
| // update component state to a "leaving" state... | |
| callObject.leave(); | |
| }, [callObject]); |
kimberleejohnson
/ App.js
Last active Sep 9, 2020
Sample code for joining a Daily video call In a React app
View App.js
| // In App.js | |
| /** | |
| * Starts joining an existing call. | |
| */ | |
| const startJoiningCall = useCallback(url => { | |
| const callObject = DailyIframe.createCallObject(); | |
| // update component state to a "joining" state... | |
| callObject.join({ url }); | |
| }, []); |
NewerOlder