若想实现以下功能,请确保已经完成可加入房间,可正常通讯等流程!
创建本地端&&远程端代码:
let rtc = {
// For the local audio and video tracks.
localAudioTrack: null,
localVideoTrack: null,
client: null,
};
/***
*举例为接听端代码
**/
async function agoraAnswer(options) {
rtc.client = AgoraRTC.createClient({ mode: 'rtc', codec: 'vp8' });
const uid = await rtc.client.join(
options.appId,
options.channelName,
options.token,
Number(options.uid)
);
rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack();
const localPlayerContainer = document.querySelector('.worktable-video-local');
rtc.localVideoTrack.play(localPlayerContainer, {
fit: 'contain',
});
online.value = true;
loading.value = true;
// 播放音频轨道
// localAudioTrack.play()
await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);
rtc.client.on('user-published', async (user, mediaType) => {
await rtc.client.subscribe(user, mediaType);
loading.value = false;
console.log('123+++++++接听H5published', user, mediaType);
// 表示本次订阅的是视频。
if (mediaType === 'video') {
if(user._audio_added_){
user.videoTrack.play(document.querySelector('.worktable-video-remote'), {
fit: 'contain',
});
loading.value = false;
//表示客户端接听了,需要开始创建websocket, 并发送开始录制消息
emit('startRecord', options.uid);
}
else{
}
}
// 表示本次订阅的是音频。
if (mediaType === 'audio') {
user.audioTrack.play();
}
});
rtc.client.on('user-unpublished', (user, mediaType) => {
console.log('+++++++++++接听H5--unpublished', user, mediaType);
if (mediaType === 'video') {
// onLeave('userLeave');
// ElMessage({
// message: '客户挂断或离线',
// type: 'warning',
// });
}
});
rtc.client.on('network-quality', (stats) => {
emit('netWorkQuality', stats.downlinkNetworkQuality);
});
}
/***
* 关闭摄像头
* **/
const closeLook = function () {
ifCloseLook.value = false;
console.log('关闭摄像头---', ifCloseLook.value);
rtc.localVideoTrack.setMuted(true);
ifShowBackImg.value=true
};
/***
* 打开摄像头
* **/
const openLook = function () {
ifCloseLook.value = true;
console.log('dakai摄像头---', ifCloseLook.value);
rtc.localVideoTrack.setMuted(false);
ifShowBackImg.value=false
};
核心代码:
1、关闭(打开)摄像头
rtc.localVideoTrack.setMuted(true); //关闭摄像头
rtc.localVideoTrack.setMuted(false); //打开摄像头
2、静音
rtc.localAudioTrack.setMuted(true); //静音
rtc.localAudioTrack.setMuted(false); //取消静音
3、翻转摄像头
此功能需要将之前发布的本地视频流停止发布,重新获取摄像头方向后发布流~
// 切换摄像头
const cameraBack = async function () {
ifShowBackImg.value= false
camera.value=true
// 如果是前置--切换为后置
if (rtc.localVideoTrack._config.facingMode == "user") {
rtc.localVideoTrack.close();
await rtc.client.unpublish(rtc.localVideoTrack);
rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack({
facingMode: "environment",
});
} else {
rtc.localVideoTrack.close();
await rtc.client.unpublish(rtc.localVideoTrack);
//后置--切换为前置
rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack({
facingMode: "user",
});
}
const localPlayerContainer = document.querySelector(".worktable-video-local");
rtc.localVideoTrack.play(localPlayerContainer);
await rtc.client.publish(rtc.localVideoTrack);
};
核心代码:
1⃣️将前置摄像头转为后置摄像头
2⃣️将后置转为前置
⚠️在创建本地视频流时,需设置摄像头前置or后置,则后续翻转时根据初始状态做判断~