|
|
@@ -7,14 +7,15 @@ export { ILocalAudioTrack, ILocalVideoTrack } from 'agora-rtc-sdk-ng';
|
|
|
import { ref } from 'vue';
|
|
|
import { muteVideoLeader } from './useTRTC';
|
|
|
|
|
|
-export let localAudioTrack: ILocalAudioTrack;
|
|
|
-export let localVideoTrack: ILocalVideoTrack;
|
|
|
+export const localAudioTrack = ref<ILocalAudioTrack | null>();
|
|
|
+export const localVideoTrack = ref<ILocalVideoTrack | null>();
|
|
|
export let localClient: IAgoraRTCClient;
|
|
|
|
|
|
-const isHasCamera = ref(false);
|
|
|
-const isHasMicrophone = ref(false);
|
|
|
+export const isHasCamera = ref(false);
|
|
|
+export const isHasMicrophone = ref(false);
|
|
|
const userID = ref('');
|
|
|
-
|
|
|
+const roomID = ref('');
|
|
|
+const CamID = ref('');
|
|
|
export const createAgoraClient = async (
|
|
|
sdkAppId: string,
|
|
|
roomId: string,
|
|
|
@@ -23,22 +24,30 @@ export const createAgoraClient = async (
|
|
|
): Promise<IAgoraRTCClient> => {
|
|
|
const rtcStore = useRtcStore();
|
|
|
// const { muteVideoLeader } = useRtcSdk();
|
|
|
-
|
|
|
+ userID.value = userId;
|
|
|
+ roomID.value = roomId;
|
|
|
+ CamID.value = `camera_box_${userID.value}`;
|
|
|
const isOK = AgoraRTC.checkSystemRequirements();
|
|
|
if (!isOK) {
|
|
|
console.log('当前不支持');
|
|
|
}
|
|
|
|
|
|
- // AgoraRTC.setLogLevel();
|
|
|
-
|
|
|
- const role = rtcStore.role === 'leader' ? 'host' : 'audience';
|
|
|
- const client: IAgoraRTCClient = AgoraRTC.createClient({ mode: 'rtc', codec: 'vp9', role: role });
|
|
|
+ AgoraRTC.enableLogUpload();
|
|
|
+ // 将日志输出级别设置为 INFO
|
|
|
+ AgoraRTC.setLogLevel(1);
|
|
|
|
|
|
+ // const role = rtcStore.role === 'leader' ? 'audience' : 'audience';
|
|
|
+ const client: IAgoraRTCClient = AgoraRTC.createClient({ mode: 'rtc', codec: 'vp8' });
|
|
|
+ // client.setClientRole('host');
|
|
|
localClient = client;
|
|
|
- const uid = await client.join(String(sdkAppId), roomId, sign, userId);
|
|
|
- userID.value = userId;
|
|
|
|
|
|
- console.warn('client', uid, client);
|
|
|
+ if (!userID.value) {
|
|
|
+ console.error('加入时不能没没有UserID');
|
|
|
+ return Promise.reject();
|
|
|
+ }
|
|
|
+ const uid = await client.join(String(sdkAppId), roomId, sign, userID.value);
|
|
|
+
|
|
|
+ console.warn('rtc-client', uid, client);
|
|
|
|
|
|
client.on('volume-indicator', function (result) {
|
|
|
result.forEach(function (volume, index) {
|
|
|
@@ -48,15 +57,15 @@ export const createAgoraClient = async (
|
|
|
client.on('exception', (error) => {
|
|
|
console.error('sdk error', error);
|
|
|
});
|
|
|
+
|
|
|
client.on('user-joined', (user) => {
|
|
|
- console.log('userJoin', user);
|
|
|
+ console.warn('userJoin', user);
|
|
|
});
|
|
|
client.on('user-info-updated', (user) => {
|
|
|
console.log('userJoin', user);
|
|
|
});
|
|
|
//取消订阅
|
|
|
client.on('user-unpublished', async (user, mediaType) => {
|
|
|
- // await client.unsubscribe(user, mediaType);
|
|
|
if (mediaType === 'audio') {
|
|
|
console.error('unpublished-audio', user);
|
|
|
}
|
|
|
@@ -66,28 +75,24 @@ export const createAgoraClient = async (
|
|
|
if (remoteVideoEl) {
|
|
|
remoteVideoEl.style.display = 'none';
|
|
|
}
|
|
|
- const leader = rtcStore.getRoomLeader();
|
|
|
- console.error('unpublished-video', leader, user.uid === leader?.Id);
|
|
|
}
|
|
|
});
|
|
|
//发布订阅
|
|
|
- client.on('user-published', async (user, mediaType) => {
|
|
|
+ localClient.on('user-published', async (user, mediaType) => {
|
|
|
console.warn('远程音视频-published', user, mediaType);
|
|
|
- await client.subscribe(user, mediaType);
|
|
|
+ await localClient.subscribe(user, mediaType);
|
|
|
if (mediaType === 'video') {
|
|
|
- console.error('subscribe video success', user);
|
|
|
const remoteVideoEl = document.getElementById(`cameraRemoteBox`);
|
|
|
if (user.videoTrack && user.hasVideo && remoteVideoEl) {
|
|
|
- // remoteVideoEl.style.display = 'block';
|
|
|
remoteVideoEl.style.display = 'block';
|
|
|
console.warn(`收到远程视频-->当前用ID${user.uid}`);
|
|
|
user.videoTrack.play(remoteVideoEl);
|
|
|
- // muteVideoLeader.value = false;
|
|
|
}
|
|
|
}
|
|
|
if (mediaType === 'audio') {
|
|
|
console.warn(`收到远程音频-->当前用ID${user.uid}`);
|
|
|
- user.audioTrack?.play();
|
|
|
+ const remoteAudioTrack = user.audioTrack;
|
|
|
+ remoteAudioTrack?.play();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
@@ -96,44 +101,40 @@ export const createAgoraClient = async (
|
|
|
isHasMicrophone.value = (await AgoraRTC.getMicrophones()).length > 0;
|
|
|
|
|
|
if (isHasCamera.value) {
|
|
|
- localVideoTrack = await AgoraRTC.createCameraVideoTrack();
|
|
|
- localVideoTrack.setEncoderConfiguration('120p');
|
|
|
+ localVideoTrack.value = await AgoraRTC.createCameraVideoTrack();
|
|
|
+ localVideoTrack.value.setEncoderConfiguration('120p');
|
|
|
}
|
|
|
+ } catch (error) {
|
|
|
+ console.error('error', error);
|
|
|
+ }
|
|
|
|
|
|
- isHasMicrophone.value && (localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack());
|
|
|
- } catch (error) {}
|
|
|
-
|
|
|
- const localVideoEl = document.getElementById(`camera_box_${userId}`);
|
|
|
console.warn('isHasCamera', isHasCamera.value);
|
|
|
console.warn('isHasMicrophone', isHasMicrophone.value);
|
|
|
|
|
|
if (rtcStore.role === 'leader') {
|
|
|
- if (isHasCamera.value) {
|
|
|
+ if (isHasCamera.value && localVideoTrack.value) {
|
|
|
rtcStore.setHasCamera();
|
|
|
+
|
|
|
+ const localVideoEl = document.getElementById(CamID.value);
|
|
|
if (localVideoEl) {
|
|
|
try {
|
|
|
- console.warn('播放本地rtc-localVideoTrack');
|
|
|
- localVideoTrack.play(localVideoEl);
|
|
|
+ console.warn('播放本地rtc-localVideoTrack', localVideoEl);
|
|
|
+ localVideoTrack.value.play(localVideoEl);
|
|
|
} catch (error) {
|
|
|
- console.error(error);
|
|
|
+ console.error('error', error);
|
|
|
}
|
|
|
}
|
|
|
//主持人有相机的
|
|
|
console.warn('有VID leader发布流');
|
|
|
- await client.publish(localVideoTrack);
|
|
|
- localVideoTrack.setMuted(true);
|
|
|
+ await client.publish(localVideoTrack.value);
|
|
|
+ localVideoTrack.value.setMuted(true);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- if (isHasMicrophone.value) {
|
|
|
- await client.publish(localAudioTrack);
|
|
|
- // 先play
|
|
|
-
|
|
|
- localAudioTrack.setVolume(120);
|
|
|
- localAudioTrack.setMuted(true);
|
|
|
- localAudioTrack.play();
|
|
|
- console.warn('所有有MIC静音和发布', localAudioTrack.isPlaying);
|
|
|
- }
|
|
|
+ // if (isHasMicrophone.value) {
|
|
|
+ // await publishLockAudioTrack(true);
|
|
|
+ // console.warn('所有人有MIC静音和发布', localAudioTrack.value?.isPlaying);
|
|
|
+ // }
|
|
|
//默认头闭摄像头
|
|
|
muteVideoLeader.value = true;
|
|
|
rtcStore.setIsRTCJoined(true);
|
|
|
@@ -141,54 +142,78 @@ export const createAgoraClient = async (
|
|
|
return client;
|
|
|
};
|
|
|
|
|
|
+const publishLockAudioTrack = async () => {
|
|
|
+ if (localAudioTrack.value) {
|
|
|
+ await localClient.unpublish(localAudioTrack.value);
|
|
|
+ localAudioTrack.value = null;
|
|
|
+ }
|
|
|
+ localAudioTrack.value = await AgoraRTC.createMicrophoneAudioTrack();
|
|
|
+ if (localAudioTrack.value) {
|
|
|
+ await localClient.publish([localAudioTrack.value]);
|
|
|
+ // localAudioTrack.value.setVolume(120);
|
|
|
+ // localAudioTrack.value.setMuted(muted);
|
|
|
+ // localAudioTrack.value.play();
|
|
|
+ }
|
|
|
+};
|
|
|
+const unPublishLockAudioTrack = async () => {
|
|
|
+ if (localAudioTrack.value) {
|
|
|
+ await localClient.unpublish([localAudioTrack.value]);
|
|
|
+ localAudioTrack.value = null;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
export const muteVideo = () => {
|
|
|
//通用开音方法
|
|
|
- localVideoTrack.setMuted(true);
|
|
|
+ localVideoTrack.value?.setMuted(true);
|
|
|
};
|
|
|
export const unMuteVideo = () => {
|
|
|
- localVideoTrack.setMuted(false);
|
|
|
+ localVideoTrack.value?.setMuted(false);
|
|
|
};
|
|
|
|
|
|
export const mutedAudio = () => {
|
|
|
//通用禁音方法
|
|
|
- console.error('mutedAudio');
|
|
|
if (isHasMicrophone.value) {
|
|
|
- console.log('localAudioTrack', localAudioTrack);
|
|
|
- localAudioTrack.setMuted(true);
|
|
|
+ console.error('有MIC关MIC');
|
|
|
+ unPublishLockAudioTrack();
|
|
|
}
|
|
|
};
|
|
|
export const unMutedAudio = async () => {
|
|
|
//通用开音方法
|
|
|
- console.error('unMutedAudio');
|
|
|
if (isHasMicrophone.value) {
|
|
|
- console.log('localAudioTrack', localAudioTrack);
|
|
|
- localAudioTrack.setMuted(false);
|
|
|
+ // 开MIC要重新发布
|
|
|
+ console.error('有MIC开MIC');
|
|
|
+ publishLockAudioTrack();
|
|
|
}
|
|
|
};
|
|
|
|
|
|
export const switchToFrontCam = async () => {
|
|
|
- localVideoTrack.close();
|
|
|
- localClient.unpublish(localVideoTrack);
|
|
|
- localVideoTrack = await AgoraRTC.createCameraVideoTrack({
|
|
|
+ if (localVideoTrack.value) {
|
|
|
+ localVideoTrack.value.close();
|
|
|
+ await localClient.unpublish(localVideoTrack.value);
|
|
|
+ }
|
|
|
+ localVideoTrack.value = null;
|
|
|
+ localVideoTrack.value = await AgoraRTC.createCameraVideoTrack({
|
|
|
facingMode: 'user',
|
|
|
});
|
|
|
- const localVideoEl = document.getElementById(`camera_box_${userID.value}`);
|
|
|
+ const localVideoEl = document.getElementById(CamID.value);
|
|
|
if (localVideoEl) {
|
|
|
- localVideoTrack.play(localVideoEl);
|
|
|
+ localVideoTrack.value.play(localVideoEl);
|
|
|
}
|
|
|
- await localClient.publish(localVideoTrack);
|
|
|
+ await localClient.publish(localVideoTrack.value);
|
|
|
};
|
|
|
|
|
|
export const switchToBackCam = async () => {
|
|
|
- localClient.unpublish(localVideoTrack);
|
|
|
- localVideoTrack = await AgoraRTC.createCameraVideoTrack({
|
|
|
- facingMode: 'environment',
|
|
|
- });
|
|
|
- const localVideoEl = document.getElementById(`camera_box_${userID.value}`);
|
|
|
- if (localVideoEl) {
|
|
|
- localVideoTrack.play(localVideoEl);
|
|
|
+ if (localVideoTrack.value) {
|
|
|
+ await localClient.unpublish(localVideoTrack.value);
|
|
|
+ localVideoTrack.value = await AgoraRTC.createCameraVideoTrack({
|
|
|
+ facingMode: 'environment',
|
|
|
+ });
|
|
|
+ const localVideoEl = document.getElementById(CamID.value);
|
|
|
+ if (localVideoEl) {
|
|
|
+ localVideoTrack.value.play(localVideoEl);
|
|
|
+ }
|
|
|
+ await localClient.publish(localVideoTrack.value);
|
|
|
}
|
|
|
- await localClient.publish(localVideoTrack);
|
|
|
};
|
|
|
export const cleanAll = () => {
|
|
|
// AgoraRTC.removeAllListeners();
|
gemercheung