关闭视频测试
This commit is contained in:
parent
27da002965
commit
09ea5547a5
|
|
@ -12,6 +12,9 @@ import ImageUrl from '@/utils/package/imageUrl'
|
|||
import agora from '@/utils/package/agora'
|
||||
import StupWizard from '@/components/StupWizard';
|
||||
import { onInvoke, onSignalr } from '@/utils/package/signalr';
|
||||
import dayjs from 'dayjs';
|
||||
import durationPlugin from 'dayjs/plugin/duration';
|
||||
dayjs.extend(durationPlugin);
|
||||
const { Column } = Table
|
||||
const Meeting: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -105,10 +108,13 @@ const Meeting: React.FC = () => {
|
|||
const [roomUserList, setRoomUserList] = useState<any>([])
|
||||
const [chatList, setChatList] = useState<any>([])
|
||||
const [currentVideoId, setCurrentVideoId] = useState('')
|
||||
let [currentSeconds, setCurrentSeconds] = useState(0)
|
||||
const [currentEffective, setCurrentEffective] = useState(0)
|
||||
|
||||
const [list] = useState<number[]>([1, 2, 3, 4, 5, 6, 7])
|
||||
const [open, setOpen] = useState(false)
|
||||
useEffect(() => {
|
||||
let time = null as any;
|
||||
if (isInit) {
|
||||
let userInfo = JSON.parse(storage.getItem('user') as string)
|
||||
agora.init()
|
||||
|
|
@ -120,11 +126,19 @@ const Meeting: React.FC = () => {
|
|||
setUser(userInfo)
|
||||
setIsInit(false)
|
||||
window.addEventListener('customStorageChange', handleCustomStorageChange);
|
||||
time = setInterval(() => {
|
||||
let effectiveTypeLength = ['slow-2g', '2g', '3g', '4g'].indexOf((navigator as any).connection.effectiveType)
|
||||
if (effectiveTypeLength >= 0) {
|
||||
setCurrentEffective(effectiveTypeLength + 1)
|
||||
}
|
||||
setCurrentSeconds(currentSeconds++)
|
||||
}, 1000)
|
||||
} else {
|
||||
getRoomFile()
|
||||
}
|
||||
return () => {
|
||||
window.removeEventListener('customStorageChange', handleCustomStorageChange);
|
||||
clearInterval(time)
|
||||
};
|
||||
}, [fileList.pageIndex]);
|
||||
|
||||
|
|
@ -149,9 +163,17 @@ const Meeting: React.FC = () => {
|
|||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
|
||||
console.log(currentVideoId);
|
||||
}, [currentVideoId])
|
||||
|
||||
// 加入房间时间
|
||||
const changeCurrentSeconds = () => {
|
||||
const duration = dayjs.duration(currentSeconds, 'seconds');
|
||||
const hours = duration.hours(); // 整数小时
|
||||
const minutes = duration.minutes(); // 整数分钟
|
||||
const secondsRemaining = duration.seconds(); // 剩余的秒数
|
||||
return `${hours > 9 ? hours : '0' + hours}:${minutes > 9 ? minutes : '0' + minutes}:${secondsRemaining > 9 ? secondsRemaining : '0' + secondsRemaining}`
|
||||
}
|
||||
// 操作按钮
|
||||
const changeStatusList = async (row: any, itemIndex: number, rowIndex: number): Promise<void> => {
|
||||
const footerListTemplate = [...footerList]
|
||||
|
|
@ -328,12 +350,12 @@ const Meeting: React.FC = () => {
|
|||
<div className={styles.meetingHeader}>
|
||||
<div>
|
||||
<div>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
{currentEffective >= 1 ? <span></span> : null}
|
||||
{currentEffective >= 2 ? <span></span> : null}
|
||||
{currentEffective >= 3 ? <span></span> : null}
|
||||
{currentEffective >= 4 ? <span></span> : null}
|
||||
</div>
|
||||
<div>00:13:45</div>
|
||||
<div>{changeCurrentSeconds()}</div>
|
||||
</div>
|
||||
<div>会议号：{state.channelId}</div>
|
||||
<div className='drag'>
|
||||
|
|
|
|||
|
|
@ -76,8 +76,8 @@ const agora = {
|
|||
setupLocalVideo: (item: any) => {
|
||||
rtcEngine.setupLocalVideo({
|
||||
renderMode: RenderModeType.RenderModeFit,
|
||||
// sourceType: VideoSourceType.VideoSourceScreen,
|
||||
sourceType: VideoSourceType.VideoSourceCameraPrimary,
|
||||
// sourceType: option.isCamera ? VideoSourceType.VideoSourceCameraPrimary : VideoSourceType.VideoSourceScreen,
|
||||
uid: item.account,
|
||||
view: item.view,
|
||||
setupMode: VideoViewSetupMode.VideoViewSetupAdd,
|
||||
|
|
@ -138,39 +138,70 @@ const agora = {
|
|||
});
|
||||
}
|
||||
},
|
||||
// 停止录制音视频
|
||||
stopRecording: () => {
|
||||
iMediaRecorder.stopRecording()
|
||||
rtcEngine.destroyMediaRecorder(iMediaRecorder)
|
||||
iMediaRecorder = ""
|
||||
},
|
||||
// 开始录制音视频
|
||||
startRecording: () => {
|
||||
iMediaRecorder = rtcEngine.createMediaRecorder({
|
||||
channelId: option.channelId,
|
||||
uid: 123,
|
||||
})
|
||||
iMediaRecorder.setMediaRecorderObserver({
|
||||
// 录制状态发生改变回调。
|
||||
onRecorderStateChanged: (channelId: any, uid: any, state: any, reason: any) => {
|
||||
console.log(channelId, uid, state, reason, '录制状态发生改变回调。');
|
||||
},
|
||||
// 录制信息更新回调。
|
||||
onRecorderInfoUpdated: (channelId: any, uid: any, info: any) => {
|
||||
console.log(channelId, uid, info, '录制信息更新回调。');
|
||||
},
|
||||
})
|
||||
iMediaRecorder.startRecording({
|
||||
storagePath: `D:/word/${+new Date()}.mp4`, //录音文件在本地保存的绝对路径，需精确到文件名及格式
|
||||
containerFormat: MediaRecorderContainerFormat.FormatMp4, //录制文件的格式
|
||||
streamType: MediaRecorderStreamType.StreamTypeBoth, //录制内容
|
||||
maxDurationMs: 7200000, //maxDurationMs
|
||||
})
|
||||
},
|
||||
// 停止共享屏幕
|
||||
stopScreenCapture: () => {
|
||||
rtcEngine.stopScreenCapture();
|
||||
},
|
||||
// 取消或恢复发布本地音频流
|
||||
muteLocalAudioStream: (mute: any) => {
|
||||
rtcEngine.muteLocalAudioStream(mute)
|
||||
},
|
||||
// 取消或恢复发布本地视频流
|
||||
muteLocalVideoStream: (mute: any) => {
|
||||
rtcEngine.muteLocalVideoStream(mute)
|
||||
},
|
||||
// 摄像头采集
|
||||
setCameraCapture: () => {
|
||||
rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {})
|
||||
agora.joinChannel(false)
|
||||
},
|
||||
// 加入频道
|
||||
setJoinChannel: (data: any) => {
|
||||
option.token = data.token;
|
||||
option.channelId = data.channelId;
|
||||
option.userid = Number(data.userid);
|
||||
rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {})
|
||||
agora.joinChannel(false)
|
||||
},
|
||||
// 桌面捕获音频和视频的媒体源的信息
|
||||
getDesktopCapturerVideo: async () => {
|
||||
return rtcEngine.getScreenCaptureSources({ width: 300, height: 300 }, { width: 300, height: 300 }, true);
|
||||
},
|
||||
// 共享屏幕采集
|
||||
setDesktopCapturerVideo: (targetSource: any) => {
|
||||
// rtcEngine.stopCameraCapture(VideoSourceType.VideoSourceCamera);
|
||||
agora.stopScreenCapture();
|
||||
if (
|
||||
targetSource.type ===
|
||||
ScreenCaptureSourceType.ScreencapturesourcetypeScreen
|
||||
) {
|
||||
rtcEngine.startScreenCaptureByDisplayId(
|
||||
targetSource.sourceId,
|
||||
{},
|
||||
{
|
||||
windowFocus: true,
|
||||
enableHighLight: true,
|
||||
highLightColor: 0xFF99CC00,
|
||||
}
|
||||
);
|
||||
} else {
|
||||
rtcEngine.startScreenCaptureByWindowId(
|
||||
targetSource.sourceId,
|
||||
{},
|
||||
{
|
||||
windowFocus: true,
|
||||
enableHighLight: true,
|
||||
highLightColor: 0xFF99CC00,
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 开启本地视频预览
|
||||
startPreview: async (): Promise<boolean> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
|
@ -262,59 +293,34 @@ const agora = {
|
|||
setPlaybackDevice: (deviceId: string) => {
|
||||
rtcEngine.getAudioDeviceManager().setPlaybackDevice(deviceId)
|
||||
},
|
||||
// 摄像头采集
|
||||
setCameraCapture: () => {
|
||||
rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {})
|
||||
agora.joinChannel(false)
|
||||
// 停止录制音视频
|
||||
stopRecording: () => {
|
||||
iMediaRecorder.stopRecording()
|
||||
rtcEngine.destroyMediaRecorder(iMediaRecorder)
|
||||
iMediaRecorder = ""
|
||||
},
|
||||
// 加入频道
|
||||
setJoinChannel: (data: any) => {
|
||||
option.token = data.token;
|
||||
option.channelId = data.channelId;
|
||||
option.userid = Number(data.userid);
|
||||
rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {})
|
||||
agora.joinChannel(false)
|
||||
},
|
||||
// 取消或恢复发布本地音频流
|
||||
muteLocalAudioStream: (mute: any) => {
|
||||
rtcEngine.muteLocalAudioStream(mute)
|
||||
},
|
||||
// 取消或恢复发布本地视频流
|
||||
muteLocalVideoStream: (mute: any) => {
|
||||
rtcEngine.muteLocalVideoStream(mute)
|
||||
},
|
||||
// 桌面捕获音频和视频的媒体源的信息
|
||||
getDesktopCapturerVideo: async () => {
|
||||
return rtcEngine.getScreenCaptureSources({ width: 300, height: 300 }, { width: 300, height: 300 }, true);
|
||||
},
|
||||
// 共享屏幕采集
|
||||
setDesktopCapturerVideo: (targetSource: any) => {
|
||||
agora.stopScreenCapture()
|
||||
if (
|
||||
targetSource.type ===
|
||||
ScreenCaptureSourceType.ScreencapturesourcetypeScreen
|
||||
) {
|
||||
rtcEngine.startScreenCaptureByDisplayId(
|
||||
targetSource.sourceId,
|
||||
{},
|
||||
{
|
||||
windowFocus: true,
|
||||
enableHighLight: true,
|
||||
highLightColor: 0xFF99CC00,
|
||||
}
|
||||
);
|
||||
} else {
|
||||
rtcEngine.startScreenCaptureByWindowId(
|
||||
targetSource.sourceId,
|
||||
{},
|
||||
{
|
||||
windowFocus: true,
|
||||
enableHighLight: true,
|
||||
highLightColor: 0xFF99CC00,
|
||||
}
|
||||
);
|
||||
}
|
||||
agora.joinChannel(true)
|
||||
// 开始录制音视频
|
||||
startRecording: () => {
|
||||
iMediaRecorder = rtcEngine.createMediaRecorder({
|
||||
channelId: option.channelId,
|
||||
uid: 123,
|
||||
})
|
||||
iMediaRecorder.setMediaRecorderObserver({
|
||||
// 录制状态发生改变回调。
|
||||
onRecorderStateChanged: (channelId: any, uid: any, state: any, reason: any) => {
|
||||
console.log(channelId, uid, state, reason, '录制状态发生改变回调。');
|
||||
},
|
||||
// 录制信息更新回调。
|
||||
onRecorderInfoUpdated: (channelId: any, uid: any, info: any) => {
|
||||
console.log(channelId, uid, info, '录制信息更新回调。');
|
||||
},
|
||||
})
|
||||
iMediaRecorder.startRecording({
|
||||
storagePath: `D:/word/${+new Date()}.mp4`, //录音文件在本地保存的绝对路径，需精确到文件名及格式
|
||||
containerFormat: MediaRecorderContainerFormat.FormatMp4, //录制文件的格式
|
||||
streamType: MediaRecorderStreamType.StreamTypeBoth, //录制内容
|
||||
maxDurationMs: 7200000, //maxDurationMs
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue