首先登录腾讯TRTC申请实时音视频的SDKAppID和SDKSecretKey
可以走快速跑通Demo
插入代码(资源中的),,将代码中的SDKAPPID和SECRETKEY改成自己的,,引入在自己的页面上就可以了
<template>
<div class="home">
<div id="local_stream" :class="show?'local_stream':'remote_stream'" @click="setclass"></div>
<div id="remote_stream" :class="!show?'local_stream':'remote_stream'" @click="setclass"></div>
<div @click="leave" style="position: absolute; bottom:1%;z-index: 1000;width:100%;text-align: center;">
<img src="@/assets/wx/hangUp.png" alt="" style="width: 35px;">
</div>
</div>
</template>
<script>
import wx from 'weixin-js-sdk'
import { Toast } from 'vant'
import TRTC from "trtc-js-sdk";
import { genTestUserSig } from "@/assets/js/lib-generate-test-usersig.min.js";
export default {
name: "Home",
data() {
return {
ten:'1',
show:'',
userId: undefined, //用户id --可更改
roomId: undefined, //房间号--加入相同房间才能聊
client: "", //客户端服务
remoteStream: "", //远方播放流
localStream: "",//本地流
callType:"",// 0是视频 1是语音
};
},
components: {},
created() {
this.roomId=Number(this.$route.query.roomId);
if(this.$route.query.callType){
this.callType = this.$route.query.callType
}
const $t = this;
this.$nextTick(() => {
const userId = this.$route.query.userId;
//获取签名
const config = genTestUserSig(userId);
const sdkAppId = config.sdkAppId;
const userSig = config.userSig;
$t.client = TRTC.createClient({
mode: "rtc",
sdkAppId,
userId,
userSig
});
$t.fun4start();
});
},
methods: {
leave() {
this.ten='0'
this.client.unpublish(this.localStream).then(() => {
// 取消发布本地流成功
});
this.client
.leave()
.then(() => {
console.log("退房成功");
// 停止本地流,关闭本地流内部的音视频播放器
this.localStream.stop();
// 关闭本地流,释放摄像头和麦克风访问权限 像这种什么stop,close方法调不起来的 自己看看上面是不是有问题
this.localStream.close();
this.localStream = null;
this.client = null;
// 退房成功,可再次调用client.join重新进房开启新的通话。
})
.catch((error) => {
console.error("退房失败 " + error);
// 错误不可恢复,需要刷新页面。
});
/*#ifdef H5*/
this.$router.push('/')
/*#endif*/
/*#ifdef MP-WEIXIN*/
wx.miniProgram.navigateTo({
url: '/pages_my/my/myOrders'
})
/*#endif*/
},
setclass(){
this.show=!this.show
},
//
async fun4start() {
this.fun4subStream();
this.fun4join();
},
//创建发布本地音视频流
async fun4createLocalStream() {
const userId = this.$route.query.userId;
const $t = this;
$t.localStream = TRTC.createStream({
userId,
audio: true,
// 0是视频 1是语音
video: this.callType == 0 ? true : false
});
$t.localStream.setScreenProfile("120p");
$t.localStream
.initialize()
.catch(error => {
console.log(error, "----------------999");
// console.error('初始化本地流失败 ' + error);
})
.then(() => {
console.log("初始化本地流成功");
$t.client
.publish($t.localStream)
.then((res) => {
console.log("本地流发布成功", $t.localStream.hasVideo());
})
.catch(e => {
console.log(e);
});
console.log("本地播放成功");
$t.localStream.play("local_stream");
});
},
//本地视频流播放
async fun4join() {
const { roomId } = this
const $t = this;
$t.client
.join({ roomId })
.catch(error => {
console.error("进房失败 " + error);
})
.then(() => {
console.log("进房成功");
$t.fun4createLocalStream();
});
},
//订阅远端音视频流
async fun4subStream() {
const $t = this;
$t.client.on("stream-added", event => {
const remoteStream = event.stream;
console.log("远端流增加: " + remoteStream.getId());
//订阅远端流
$t.client
.subscribe(remoteStream, { audio: true, video: true })
.catch(e => {
console.error("failed to subscribe remoteStream", e);
});
});
$t.client.on('stream-removed', event => {
const remoteStream = event.stream;
if(this.ten=='1'){
Toast('对方已挂断,')
}
setTimeout(() => {
this.leave()
}, 1500);
});
$t.client.on("stream-subscribed", event => {
console.error(event, "---subscribed");
const remoteStream = event.stream;
const id = "remote_stream-" + remoteStream.getId();
this.remoteStream = id;
$t.remotePlay = remoteStream;
// let dom = $t.$refs.remoteStream;
// if(!dom)return;
// //做了dom操作 需要使用$nextTick(),否则找不到创建的标签无法进行播放
// console.log(666)
// remoteStream.stop();
console.error(
"------555------",
remoteStream.hasAudio(),
remoteStream.hasVideo()
);
remoteStream
.play("remote_stream")
.then(() => {
// autoplay success
})
.catch(e => {
console.table(e);
});
});
},
}
};
</script>
<style lang="less">
.home {
min-height: 100vh;
.local_stream{
width: 100%;
height: 100vh;
}
.remote_stream {
width: auto;
height: 200px;
position: absolute;
top:0;
right: 0;
z-index:2000;
}
}
</style>