Skip to content

Instantly share code, notes, and snippets.

Avatar

Kimberlee Johnson kimberleejohnson

View GitHub Profile
@kimberleejohnson
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
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
kimberleejohnson / Tile.js
Created Sep 10, 2020
Passing saved audio tracks down to unique tile components in Daily video chat React app
View Tile.js
// In Tile.js
/**
* When video track changes, update video srcObject
*/
useEffect(() => {
videoEl.current &&
(videoEl.current.srcObject = new MediaStream([props.videoTrack]));
}, [props.videoTrack]);
@kimberleejohnson
kimberleejohnson / Call.js
Created Sep 10, 2020
Loop over call state and pass participant audio tracks to individual tile components
View Call.js
// In Call.js
// Below, isScreenShare, isLocal, and containsScreenShare are state-access helpers defined in callState.js
function getTiles() {
let largeTiles = [];
let smallTiles = [];
Object.entries(callState.callItems).forEach(([id, callItem]) => {
const isLarge =
isScreenShare(id) ||
@kimberleejohnson
kimberleejohnson / callState.js
Created Sep 10, 2020
Map over call state to determine how many tiles to display
View callState.js
// In callState.js
function getCallItems(participants, prevCallItems) {
let callItems = { ...initialCallState.callItems }; // Ensure we *always* have a local participant
for (const [id, participant] of Object.entries(participants)) {
// Here we assume that a participant will join with audio/video enabled.
// This assumption lets us show a "loading" state before we receive audio/video tracks.
// This may not be true for all apps, but the call object doesn't yet support distinguishing
// between cases where audio/video are missing because they're still loading or muted.
const hasLoaded = prevCallItems[id] && !prevCallItems[id].isLoading;
@kimberleejohnson
kimberleejohnson / callState.js
Last active Sep 10, 2020
Sample component state for a Daily video chat app built in React
View callState.js
{
local: {
isLoading: <boolean>,
audioTrack: <MediaStreamTrack>,
videoTrack: <MediaStreamTrack>
},
local-screen: {
isLoading: <boolean>,
audioTrack: null,
videoTrack: <MediaStreamTrack>
@kimberleejohnson
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
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
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 });
}, []);
@kimberleejohnson
kimberleejohnson / App.js
Created Sep 9, 2020
Sample code for creating a Daily room URL In a video chat app with React
View App.js
// In App.js
/**
* Creates a new call room.
*/
const createCall = useCallback(() => {
// update component state to a "creating" state...
return api
.createRoom()
.then(room => room.url)
You can’t perform that action at this time.