kimberleejohnson

// In Tray.js

function toggleCamera() {
  callObject.setLocalVideo(isCameraMuted);
}

function toggleMic() {
  callObject.setLocalAudio(isMicMuted);
}

kimberleejohnson

// In Tray.js

function getStreamStates(callObject) {
  let isCameraMuted,
    isMicMuted,
    isSharingScreen = false;
  if (
    callObject &&
    callObject.participants() &&
    callObject.participants().local

kimberleejohnson

// In Tile.js

/**
 * When video track changes, update video srcObject
 */
useEffect(() => {
  videoEl.current &&
    (videoEl.current.srcObject = new MediaStream([props.videoTrack]));
}, [props.videoTrack]);

kimberleejohnson

// 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

// 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

{
    local: {
      isLoading: <boolean>,
      audioTrack: <MediaStreamTrack>,
      videoTrack: <MediaStreamTrack>
    },
    local-screen: {
      isLoading: <boolean>,
      audioTrack: null,
      videoTrack: <MediaStreamTrack>

kimberleejohnson

// In Call.js

useEffect(() => {
  if (!callObject) return;

  const events = [
    "participant-joined",
    "participant-updated",
    "participant-left"
  ];

kimberleejohnson

// 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

// 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

// 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)