ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: video bugs

Browse Source
This commit is contained in:
Tristan Yang
2023-04-25 20:11:55 +08:00
parent ccc71ecdd5
commit fbf6a45c17
2 changed files with 31 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/Voice.tsx
+26 -30
View File
@@ -7,19 +7,11 @@ import { addVoiceMember, removeVoiceMember, updateConnectionState, updateDeafenS
import { useAppSelector } from '../../app/store';
import AudioJoin from '../../assets/join.wav';
import { playAgoraVideo } from '../utils';
// import { compareVersion } from '../utils';
// type Props = {}
AgoraRTC.setLogLevel(process.env.NODE_ENV === 'development' ? 0 : 4);
window.VOICE_TRACK_MAP = window.VOICE_TRACK_MAP ?? {};
window.VIDEO_TRACK_MAP = window.VIDEO_TRACK_MAP ?? {};
// let tmpUids: number[] = [];
const Voice = () => {
// const { serverVersion } = useAppSelector(store => {
// return {
// serverVersion: store.server.version ?? 0,
// };
// });
// const skipAgoraStatusCheck = compareVersion(serverVersion, '0.3.5') >= 0;
const { data: enabled } = useGetAgoraStatusQuery();
useGetAgoraChannelsQuery({ page_no: 0, page_size: 100 }, {
skip: !enabled || !navigator.onLine,
@@ -66,6 +58,9 @@ const Voice = () => {
case "Quit":
case "ServerTimeOut": {
dispatch(removeVoiceMember(+user.uid as number));
// clear tracks
window.VOICE_TRACK_MAP[+user.uid] = null;
window.VIDEO_TRACK_MAP[+user.uid] = null;
}
break;
default:
@@ -131,12 +126,8 @@ const Voice = () => {
};
}, []);
return null;
};
// let localAudioTrack: IMicrophoneAudioTrack | null = null;
// let localVideoTrack: ICameraVideoTrack | null = null;
type VoiceProps = {
id: number,
context?: "channel" | "dm"
@@ -253,29 +244,34 @@ const useVoice = ({ id, context = "channel" }: VoiceProps) => {
};
const setMute = (mute: boolean) => {
const localAudioTrack = window.VOICE_TRACK_MAP[loginUid] as IMicrophoneAudioTrack;
if (localAudioTrack) {
localAudioTrack.setMuted(mute);
dispatch(updateMuteStatus(mute));
if (!localAudioTrack) return;
localAudioTrack.setMuted(mute);
if (mute == false && voicingInfo?.deafen) {
// 远端音频，恢复原音
Object.entries(window.VOICE_TRACK_MAP).forEach(([, audioTrack]) => {
audioTrack?.setVolume(100);
});
dispatch(updateDeafenStatus(false));
}
dispatch(updateMuteStatus(mute));
};
const setDeafen = (deafen: boolean) => {
const localAudioTrack = window.VOICE_TRACK_MAP[loginUid] as IMicrophoneAudioTrack;
if (localAudioTrack) {
if (deafen) {
localAudioTrack.setMuted(true);
// 远端音频，全部静音
Object.entries(window.VOICE_TRACK_MAP).forEach(([, audioTrack]) => {
audioTrack?.setVolume(0);
});
} else {
localAudioTrack.setMuted(false);
// 远端音频，恢复原音
Object.entries(window.VOICE_TRACK_MAP).forEach(([, audioTrack]) => {
audioTrack?.setVolume(100);
});
}
dispatch(updateDeafenStatus(deafen));
if (!localAudioTrack) return;
if (deafen) {
localAudioTrack.setMuted(true);
// 远端音频，全部静音
Object.entries(window.VOICE_TRACK_MAP).forEach(([, audioTrack]) => {
audioTrack?.setVolume(0);
});
} else {
localAudioTrack.setMuted(false);
// 远端音频，恢复原音
Object.entries(window.VOICE_TRACK_MAP).forEach(([, audioTrack]) => {
audioTrack?.setVolume(100);
});
}
dispatch(updateDeafenStatus(deafen));
};
const joinedAtThisContext = voicingInfo ? (voicingInfo.id == id && voicingInfo.context == context) : false;
return {
src/routes/chat/RTCWidget.tsx
+5 -5
View File
@@ -49,14 +49,14 @@ const RTCWidget = ({ id, context = "channel" }: Props) => {
<IconCallOff onClick={leave} role="button" className="fill-red-600" />
</Tooltip>
</div>
<div className="flex items-center gap-2 mt-3">
<button onClick={voicingInfo.video ? closeCamera : openCamera} className={clsx('rounded-lg py-2 px-5 flex items-center gap-1', voicingInfo.video ? "bg-green-700" : "bg-white/50 dark:bg-black/50")}>
<IconCamera className="fill-gray-800 dark:fill-gray-200 w-6 h-6" />
<span className='text-sm text-gray-800 dark:text-gray-200 font-semibold'>Video</span>
<div className={clsx("flex items-center gap-2 mt-3 text-sm font-semibold text-gray-800 dark:text-gray-200")}>
<button onClick={voicingInfo.video ? closeCamera : openCamera} className={clsx('rounded-lg py-2 px-5 flex items-center gap-1', voicingInfo.video ? "bg-green-700 text-gray-200" : "bg-white/50 dark:bg-black/50 ")}>
<IconCamera className={clsx("dark:fill-gray-200 w-6 h-6", voicingInfo.video ? "fill-gray-200" : "fill-gray-800")} />
<span>Video</span>
</button>
<button className='rounded-lg py-2 px-5 bg-white/50 dark:bg-black/50 flex items-center gap-1'>
<IconScreen className="fill-gray-800 dark:fill-gray-200 w-6 h-6" />
<span className='text-sm text-gray-800 dark:text-gray-200 font-semibold'>Screen</span>
<span>Screen</span>
</button>
</div>
</div>