daily-examples/dailyjs/shared/contexts/MediaDeviceProvider.js

71 lines
1.6 KiB
JavaScript

import React, { useState, useEffect, createContext, useContext } from 'react';
import PropTypes from 'prop-types';
import { useCallState } from './CallProvider';
import { useDevices } from './useDevices';
export const MediaDeviceContext = createContext();
export const MediaDeviceProvider = ({ children }) => {
const { callObject } = useCallState();
const [isCamMuted, setIsCamMuted] = useState(false);
const [isMicMuted, setIsMicMuted] = useState(false);
const {
cams,
mics,
speakers,
camError,
micError,
currentDevices,
deviceState,
setMicDevice,
setCamDevice,
setSpeakersDevice,
} = useDevices(callObject);
useEffect(() => {
if (!callObject) return false;
const handleNewDeviceState = () => {
setIsCamMuted(!callObject.participants()?.local?.video);
setIsMicMuted(!callObject.participants()?.local?.audio);
};
callObject.on('participant-updated', handleNewDeviceState);
return () => {
callObject.off('participant-updated', handleNewDeviceState);
};
}, [callObject]);
return (
<MediaDeviceContext.Provider
value={{
cams,
mics,
speakers,
camError,
micError,
currentDevices,
deviceState,
isCamMuted,
isMicMuted,
setMicDevice,
setCamDevice,
setSpeakersDevice,
}}
>
{children}
</MediaDeviceContext.Provider>
);
};
MediaDeviceProvider.propTypes = {
children: PropTypes.node,
};
MediaDeviceProvider.defaultProps = {
children: null,
};
export const useMediaDevices = () => useContext(MediaDeviceContext);