View Tray.js
// In Tray.js | |
function toggleCamera() { | |
callObject.setLocalVideo(isCameraMuted); | |
} | |
function toggleMic() { | |
callObject.setLocalAudio(isMicMuted); | |
} |
View Tray.js
// In Tray.js | |
function getStreamStates(callObject) { | |
let isCameraMuted, | |
isMicMuted, | |
isSharingScreen = false; | |
if ( | |
callObject && | |
callObject.participants() && | |
callObject.participants().local |
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]); |
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) || |
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; |
View callState.js
{ | |
local: { | |
isLoading: <boolean>, | |
audioTrack: <MediaStreamTrack>, | |
videoTrack: <MediaStreamTrack> | |
}, | |
local-screen: { | |
isLoading: <boolean>, | |
audioTrack: null, | |
videoTrack: <MediaStreamTrack> |
View Call.js
// In Call.js | |
useEffect(() => { | |
if (!callObject) return; | |
const events = [ | |
"participant-joined", | |
"participant-updated", | |
"participant-left" | |
]; |
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]); |
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 }); | |
}, []); |
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) |
NewerOlder