diff --git a/src/assets/index.css b/src/assets/index.css index 590e0003..89c4f20d 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -309,3 +309,8 @@ svg:focus { border: none; outline: none; } +/* camera video object-fit */ + +[id^="CAMERA_"] video { + object-fit: cover !important; +} diff --git a/src/common/component/Voice.tsx b/src/common/component/Voice.tsx index 78a35b9c..970f42d3 100644 --- a/src/common/component/Voice.tsx +++ b/src/common/component/Voice.tsx @@ -3,7 +3,7 @@ import { memo, useEffect } from 'react'; import { useDispatch } from 'react-redux'; import { useGetAgoraChannelsQuery, useGetAgoraStatusQuery, useGenerateAgoraTokenMutation } from '../../app/services/server'; import { updateChannelVisibleAside } from '../../app/slices/footprint'; -import { addVoiceMember, removeVoiceMember, updateConnectionState, updateDeafenStatus, updateMuteStatus, updateVoicingInfo, updateVoicingMember, updateVoicingNetworkQuality, upsertVoiceList } from '../../app/slices/voice'; +import { addVoiceMember, removeVoiceMember, updateConnectionState, updateDeafenStatus, updateMuteStatus, updatePin, updateVoicingInfo, updateVoicingMember, updateVoicingNetworkQuality, upsertVoiceList } from '../../app/slices/voice'; import { useAppSelector } from '../../app/store'; import AudioJoin from '../../assets/join.wav'; import { playAgoraVideo } from '../utils'; @@ -202,6 +202,8 @@ const useVoice = ({ id, context = "channel" }: VoiceProps) => { }; const openCamera = async () => { const localVideoTrack = await AgoraRTC.createCameraVideoTrack(); + // 取消正在进行的桌面共享 + await stopShareScreen(); await window.VOICE_CLIENT?.publish(localVideoTrack); dispatch(updateVoicingInfo({ video: true, @@ -253,7 +255,7 @@ const useVoice = ({ id, context = "channel" }: VoiceProps) => { const startShareScreen = async () => { try { const localVideoTrack = await AgoraRTC.createScreenVideoTrack({ - electronScreenSourceId: "share_screen", + // electronScreenSourceId: "share_screen", selfBrowserSurface: "exclude", // 配置屏幕共享编码参数,详情请查看 API 文档。 encoderConfig: "1080p_1", @@ -273,6 +275,11 @@ const useVoice = ({ id, context = "channel" }: VoiceProps) => { // 放到全局变量里 window.VIDEO_TRACK_MAP[loginUid] = localVideoTrack; playAgoraVideo(loginUid); + // 进入全屏并Pin自己 + if (context == "channel") { + dispatch(updateChannelVisibleAside({ id, aside: "voice_fullscreen" })); + dispatch(updatePin({ uid: loginUid, action: "pin" })); + } // 监听屏幕共享结束事件 if ("close" in localVideoTrack) { localVideoTrack.getMediaStreamTrack().onended = () => { @@ -281,7 +288,6 @@ const useVoice = ({ id, context = "channel" }: VoiceProps) => { } } catch (error) { console.log("start share screen error", error); - } }; diff --git a/src/routes/chat/Layout/index.tsx b/src/routes/chat/Layout/index.tsx index 66bcb14b..a1a6cb1e 100644 --- a/src/routes/chat/Layout/index.tsx +++ b/src/routes/chat/Layout/index.tsx @@ -120,7 +120,7 @@ const Layout: FC = ({ {aside} } {users &&
{users}
} - {voice &&
{voice}
} + {voice &&
{voice}
} {!readonly && inputMode == "text" && isActive && ( )} diff --git a/src/routes/chat/VoiceChat/VoiceManagement.tsx b/src/routes/chat/VoiceChat/VoiceManagement.tsx index 0f781d3e..d9eaf0c0 100644 --- a/src/routes/chat/VoiceChat/VoiceManagement.tsx +++ b/src/routes/chat/VoiceChat/VoiceManagement.tsx @@ -106,8 +106,13 @@ const VoiceManagement = ({ id, context, info, setMute, leave, closeCamera, openC {muted ? : } -
- {/* camera placeholder */} +
+
+ {/* camera placeholder */} +
+
; })} @@ -127,7 +132,7 @@ const VoiceManagement = ({ id, context, info, setMute, leave, closeCamera, openC
  • - +
  • diff --git a/src/routes/chat/VoiceFullscreen.tsx b/src/routes/chat/VoiceFullscreen.tsx index ef49d80c..22d0d3d9 100644 --- a/src/routes/chat/VoiceFullscreen.tsx +++ b/src/routes/chat/VoiceFullscreen.tsx @@ -84,7 +84,7 @@ const VoiceFullscreen = ({ id, context }: Props) => {
    {_name}
    - +
    {/* middle */} @@ -111,15 +111,15 @@ const VoiceFullscreen = ({ id, context }: Props) => { {shareScreen ?
    : null} {!disablePin && - } {curr?.name}
    - {muted ? : } + {muted ? : }
    {/* camera placeholder */} @@ -132,17 +132,17 @@ const VoiceFullscreen = ({ id, context }: Props) => {
    • - {muted ? : } + {muted ? : }
    • - {video ? : } + {video ? : }
    • - +