<div class="stream-content">
<!-- <p>远端流</p> -->
<div id="remote_stream"></div>
<!-- <p>本地流</p> -->
<div id="local_stream">
<img :src="Camera" alt="" @click="toggleCamera"
style="width: 40px;height: 40px;position: absolute;z-index: 100;top: 200px;left: 100px;" />
<img :src="mic" alt="" @click="micBtn"
style="width: 40px;height: 40px;position: absolute;z-index: 130;top: 200px; left: 144px;" />
</div>
</div>
<script>
import $ from "jquery";
import TRTC from "trtc-js-sdk";
import {
APP_INFO,
ROLE_LIST
} from "@/config/constant.js";
image.png
export default {
components: {},
props: [],
data() {
return {
Camera: require('../../assets/images/big-camera-on.png'), // 摄像头
mic: require('../..//assets/images/big-mic-on.png'), // 麦克风
roomId: 11111, // 房间id
localStream: null,
remoteStream: null,
userSelected: localStorage.getItem('userName'),
userInfo: {},
};
},
methods: {
getUserSig() {
// 获取签名
if (APP_INFO.APP_ID && APP_INFO.SECRET_KEY) {
getUserId(this.userSelected).then(response => {
const {
data
} = response
if (data) {
const userInfoObj = {
sdkAppId: APP_INFO.APP_ID,
userSig: data,
userId: this.userSelected,
};
this.userInfo = userInfoObj;
} else {
this.handleGetUserSigError("");
}
this.userInfo.userId && this.initClient();
});
} else {
this.handleGetUserSigError();
}
},
handleGetUserSigError() {
this.$alert(
"获取签名失败，请检查APP_ID和SECRET_KEY配置是否正确",
"获取签名失败", {
confirmButtonText: "确定",
type: "warning",
}
);
},
// 摄像头 打开关闭
toggleCamera() {
this.isCameraOpen = !this.isCameraOpen;
if (this.isCameraOpen) {
this.Camera = require('../../assets/images/big-camera-on.png')
this.localStream.unmuteVideo();
} else {
this.Camera = require('../../assets/images/big-camera-off.png')
this.localStream.muteVideo();
}
},
// 麦克风 打开关闭
micBtn() {
this.isradioOpen = !this.isradioOpen;
if (this.isradioOpen) {
this.mic = require('../../assets/images/big-mic-on.png')
this.localStream.unmuteAudio();
} else {
this.mic = require('../../assets/images/big-mic-off.png')
this.localStream.muteAudio();
}
},
/**
* 在获取用户签名的前提下进行创建clent初始化
*/
initClient() {
this.client = TRTC.createClient({
mode: "rtc", //mode: 实时音视频通话模式，设置为‘rtc’，互动直播模式，设置为'live'
sdkAppId: this.userInfo.sdkAppId,
userSig: this.userInfo.userSig,
userId: this.userInfo.userId,
});
this.userList.push(this.userInfo.userId)
// this.client && this.joinRoom();
},
// 进房间
joinRoom(Id, recordId) {
this.roomId = Id
let that = this
this.timer = setTimeout(function() {
that.quitRoom() // 三十秒无人接听自动挂断
}, 30000);
// 远端用户进房通知，只有主动推流的用户能够接收到
this.client.on('peer-join', evt => {
const userId = evt.userId;
console.log('peer-join ' + userId);
if (userId !== this.userInfo.userId) {
this.userList.push(userId)
}
});
// 远端用户离开房间通知
this.client.on('peer-leave', evt => {
const userId = evt.userId;
this.userList = this.userList.filter((item) => {
return item != userId
})
if (that.userList.length == 1 && that.userList[0] == that.userInfo.userId) {
that.quitRoom() // 房间只剩下自己一个人 自动挂断房间
}
console.log('peer-leave ' + userId);
});
// 请在 Client.join() 进房前注册 Client.on('stream-added') 事件以确保您不会错过远端用户进房通知。
this.client.on("stream-added", (event) => {
const remoteStream = event.stream;
clearInterval(that.timer);
console.log("远端流增加: " + remoteStream.getId());
this.remoteStream = remoteStream;
remoteStream.on("connection-state-changed", (event) => {
console.log(`prevState: ${event.prevState}, state: ${event.state}`);
});
//订阅远端流
this.client.subscribe(remoteStream);
});
this.client.on("stream-subscribed", (event) => {
const remoteStream = event.stream;
console.log("远端流订阅成功：" + remoteStream.getId());
// 播放远端流
remoteStream.play("remote_stream");
if (remoteStream.userId_.indexOf("weixin") == -1) { // 这里是获取是不是小程序端过来的 远程端
const videoLoading = document.querySelector(
`#player_${remoteStream.getId()}`
);
//单独设置远程端某个视频的 样式
videoLoading.setAttribute(
"style",
"position: absolute;height: 250px;margin: 0 0 25px 0;width: 300px;right: 49px;top: 343px;"
);
} else {
//是小程序端过来的 单独处理
this.videoOk = $(`#video_${remoteStream.id_}`).get(0); // 获取video 视频id
this.trtcRecording(Id, remoteStream.userId_, recordId) // 进行云端录制 这里调用方法 后台提供接口 把房间号 小程序的userid 传到后台
}
});
// 2、进入音视频通话房间
this.client
.join({
roomId: parseInt(Id),
role: "anchor"
})
.then(() => {
// join room success
console.log("join room success");
// 3、发布本地流和订阅远端流
const localStream = TRTC.createStream({
userId: this.userInfo.userId,
audio: true, // 开启声音
video: true, // 开启视频
});
// localStream.setVideoProfile("360p");
localStream.setVideoProfile({
width: 522,
height: 500,
frameRate: 15,
bitrate: 400 /* kpbs */ ,
});
localStream
.initialize()
.then(() => {
console.log("初始化本地流成功");
localStream.play("local_stream");
this.client
.publish(localStream)
.then(() => {
console.log("本地流发布成功");
})
.catch((error) => {
console.error("本地流发布失败 " + error);
});
})
.catch((error) => {
console.error("初始化本地流失败 " + error);
});
this.localStream = localStream;
})
.catch((error) => {
console.error("远端流订阅失败: " + error);
});
},
// 退出房间
quitRoom() {
// 取消发布本地流
let data = {}
this.client
.unpublish(this.localStream)
.then(() => {})
.catch((err) => console.error("取消发布本地流失败" + err));
this.localStream.close();
this.client
.leave()
.then(() => {
this.localStream.stop();
// this.localStream.muteAudio();
// 关闭视频通话
const videoTrack = this.localStream.getVideoTrack();
if (videoTrack) {
this.localStream.removeTrack(videoTrack).then(() => {
console.log("remove video call success");
// 关闭摄像头
videoTrack.stop();
});
}
// 退房成功，可再次调用client.join重新进房开启新的通话。
console.log("退出房间成功");
})
.catch((error) => {
console.error("退房失败" + error);
// 错误不可恢复，需要刷新页面。
});
},
// 接听视频
joinOk(data) {
this.joinRoom(data.roomNumber, data.id) //拨打电话
},
//切换页面 退出房间
beforeDestroy() {
if (this.dataValue.callStatus) {
this.quitRoom()
}
},
};
</script>
