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

feat: share screen

Browse Source
This commit is contained in:
Tristan Yang
2023-04-25 20:59:25 +08:00
parent fbf6a45c17
commit 5ee265cf0a
7 changed files with 83 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/slices/voice.ts
+3 -1
View File
@@ -13,6 +13,7 @@ export type VoicingInfo = {
muted?: boolean,
deafen?: boolean,
video?: boolean,
shareScreen?: boolean,
joining?: boolean,
connectionState?: ConnectionState
} & VoiceBasicInfo
@@ -21,7 +22,8 @@ export type VoicingMemberInfo = {
speakingVolume?: number,
muted?: boolean,
deafen?: boolean,
video?: boolean
video?: boolean,
shareScreen?: boolean
}
export type VoicingMembers = {
src/common/component/Voice.tsx
+58 -1
View File
@@ -7,6 +7,7 @@ import { addVoiceMember, removeVoiceMember, updateConnectionState, updateDeafenS
import { useAppSelector } from '../../app/store';
import AudioJoin from '../../assets/join.wav';
import { playAgoraVideo } from '../utils';
import { ShareScreenTrack } from '../../types/global';
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 ?? {};
@@ -214,6 +215,60 @@ const useVoice = ({ id, context = "channel" }: VoiceProps) => {
}));
}
};
const stopShareScreen = async () => {
const localVideoTrack = window.VIDEO_TRACK_MAP[loginUid] as ShareScreenTrack;
if (localVideoTrack) {
await window.VOICE_CLIENT?.unpublish(localVideoTrack);
if ("close" in localVideoTrack) {
localVideoTrack.close();
} else {
localVideoTrack[0].close();
}
// localVideoTrack.close();
window.VIDEO_TRACK_MAP[loginUid] = null;
// 关闭视频后，需要把视频的高度设置回去
const playerEle = document.querySelector(`#CAMERA_${loginUid}`) as HTMLElement;
playerEle.classList.remove("h-[120px]");
dispatch(updateVoicingInfo({
video: false,
shareScreen: false,
id,
context,
}));
}
};
const startShareScreen = async () => {
try {
const localVideoTrack = await AgoraRTC.createScreenVideoTrack({
// 配置屏幕共享编码参数，详情请查看 API 文档。
encoderConfig: "1080p_1",
// 设置视频传输优化策略为清晰优先或流畅优先。
optimizationMode: "detail",
});
// 取消正在进行的视频
await closeCamera();
await window.VOICE_CLIENT?.publish(localVideoTrack);
dispatch(updateVoicingInfo({
video: false,
shareScreen: true,
id,
context,
}));
// 放到全局变量里
window.VIDEO_TRACK_MAP[loginUid] = localVideoTrack;
playAgoraVideo(loginUid);
// 监听屏幕共享结束事件
if ("close" in localVideoTrack) {
localVideoTrack.getMediaStreamTrack().onended = () => {
stopShareScreen();
};
}
} catch (error) {
console.log("start share screen error", error);
}
};
const leave = async () => {
const localAudioTrack = window.VOICE_TRACK_MAP[loginUid] as IMicrophoneAudioTrack;
@@ -285,7 +340,9 @@ const useVoice = ({ id, context = "channel" }: VoiceProps) => {
joined: !!voicingInfo,
joinVoice,
openCamera,
closeCamera
closeCamera,
startShareScreen,
stopShareScreen,
};
};
export { useVoice };
src/common/utils.tsx
+7 -1
View File
@@ -1,6 +1,6 @@
import dayjs from "dayjs";
import BASE_URL, { FILE_IMAGE_SIZE, ContentTypes, KEY_TOKEN, KEY_REFRESH_TOKEN, KEY_EXPIRE } from "../app/config";
import { ICameraVideoTrack } from "agora-rtc-sdk-ng";
import { ICameraVideoTrack, ILocalAudioTrack, ILocalVideoTrack } from "agora-rtc-sdk-ng";
import IconPdf from "../assets/icons/file.pdf.svg";
import IconAudio from "../assets/icons/file.audio.svg";
import IconVideo from "../assets/icons/file.video.svg";
@@ -381,7 +381,13 @@ export const playAgoraVideo = (uid: number, videoTrack?: ICameraVideoTrack | nul
if (videoTrack) {
videoTrack.play(playerEle);
} else {
if (!window.VIDEO_TRACK_MAP[uid]) return;
if ("play" in (window.VIDEO_TRACK_MAP[uid] ?? {})) {
window.VIDEO_TRACK_MAP[uid]?.play(playerEle);
} else {
const tracks = window.VIDEO_TRACK_MAP[uid] as [ILocalVideoTrack, ILocalAudioTrack];
tracks[0].play(playerEle);
}
}
}
};
src/routes/chat/RTCWidget.tsx
+3 -3
View File
@@ -22,7 +22,7 @@ type Props = {
const RTCWidget = ({ id, context = "channel" }: Props) => {
const { t } = useTranslation("chat");
const { leave, voicingInfo, setMute, setDeafen, joining = true, openCamera, closeCamera } = useVoice({ context, id });
const { leave, voicingInfo, setMute, setDeafen, joining = true, openCamera, closeCamera, startShareScreen, stopShareScreen } = useVoice({ context, id });
const { loginUser, channelData, userData } = useAppSelector(store => {
return {
userData: store.users.byId,
@@ -54,8 +54,8 @@ const RTCWidget = ({ id, context = "channel" }: Props) => {
<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" />
<button onClick={voicingInfo.shareScreen ? stopShareScreen : startShareScreen} className={clsx('rounded-lg py-2 px-5 flex items-center gap-1', voicingInfo.shareScreen ? "bg-green-700 text-gray-200" : "bg-white/50 dark:bg-black/50 ")}>
<IconScreen className={clsx("dark:fill-gray-200 w-6 h-6", voicingInfo.shareScreen ? "fill-gray-200" : "fill-gray-800")} />
<span>Screen</span>
</button>
</div>
src/routes/chat/VoiceChat/Dashboard.tsx
+2 -2
View File
@@ -10,12 +10,12 @@ type Props = {
}
const Dashboard = ({ context = "channel", id, visible }: Props) => {
const { voicingInfo, setMute, setDeafen, leave, closeCamera, openCamera } = useVoice({ id, context });
const { voicingInfo, setMute, setDeafen, leave, closeCamera, openCamera, startShareScreen, stopShareScreen } = useVoice({ id, context });
// const dispatch = useDispatch();
return <div className={`h-full flex-col gap-1 w-[226px] overflow-y-scroll overflow-x-hidden p-2 shadow-[inset_1px_0px_0px_rgba(0,_0,_0,_0.1)] ${visible ? "flex" : "hidden"}`}>
<VoiceManagement info={voicingInfo} setMute={setMute} setDeafen={setDeafen} leave={leave} closeCamera={closeCamera} openCamera={openCamera} />
<VoiceManagement info={voicingInfo} setMute={setMute} setDeafen={setDeafen} leave={leave} closeCamera={closeCamera} openCamera={openCamera} startShareScreen={startShareScreen} stopShareScreen={stopShareScreen} />
</div>;
};
src/routes/chat/VoiceChat/VoiceManagement.tsx
+6 -4
View File
@@ -24,10 +24,12 @@ type Props = {
setDeafen: (param: boolean) => void,
leave: () => void,
closeCamera: () => void,
openCamera: () => void
openCamera: () => void,
startShareScreen: () => void,
stopShareScreen: () => void
}
const VoiceManagement = ({ info, setMute, setDeafen, leave, closeCamera, openCamera }: Props) => {
const VoiceManagement = ({ info, setMute, setDeafen, leave, closeCamera, openCamera, startShareScreen, stopShareScreen }: Props) => {
const { t } = useTranslation("chat");
const { userData, voicingMembers } = useAppSelector(store => {
return {
@@ -43,7 +45,7 @@ const VoiceManagement = ({ info, setMute, setDeafen, leave, closeCamera, openCam
}, [voicingMembers.ids]);
if (!info) return null;
const { deafen, muted, video } = info;
const { deafen, muted, video, shareScreen } = info;
const nameClass = clsx(`text-sm text-gray-500 max-w-[120px] truncate font-semibold dark:text-white`);
const members = voicingMembers.ids;
const membersData = voicingMembers.byId;
@@ -116,7 +118,7 @@ const VoiceManagement = ({ info, setMute, setDeafen, leave, closeCamera, openCam
</li>
</Tooltip>
<Tooltip tip={"Share Screen"} placement="top">
<li role={"button"} onClick={setMute.bind(null, !muted)} className="py-2 px-3 rounded bg-gray-100 dark:bg-gray-900">
<li role={"button"} onClick={shareScreen ? stopShareScreen : startShareScreen} className={clsx("py-2 px-3 rounded ", shareScreen ? "bg-green-700" : "bg-gray-100 dark:bg-gray-900")}>
<IconScreen className="fill-gray-700 dark:fill-gray-300" />
</li>
</Tooltip>
src/types/global.d.ts
Vendored
+3 -2
View File
@@ -1,4 +1,4 @@
import { IAgoraRTCClient, ICameraVideoTrack, IMicrophoneAudioTrack, IRemoteAudioTrack, IRemoteVideoTrack } from "agora-rtc-sdk-ng";
import { IAgoraRTCClient, ICameraVideoTrack, ILocalAudioTrack, ILocalVideoTrack, IMicrophoneAudioTrack, IRemoteAudioTrack, IRemoteVideoTrack } from "agora-rtc-sdk-ng";
interface BeforeInstallPromptEvent extends Event {
/**
@@ -36,10 +36,11 @@ export declare global {
[key: number]: IRemoteAudioTrack | IMicrophoneAudioTrack | undefined | null
},
VIDEO_TRACK_MAP: {
[key: number]: IRemoteVideoTrack | ICameraVideoTrack | undefined | null
[key: number]: IRemoteVideoTrack | ICameraVideoTrack | ShareScreenTrack | undefined | null
},
}
interface WindowEventMap {
beforeinstallprompt: BeforeInstallPromptEvent;
}
}
export type ShareScreenTrack = ILocalVideoTrack | [ILocalVideoTrack, ILocalAudioTrack];