vue-trtc多人视频开发(从零开始)-有手就行篇-最详细讲解
import Trtcjs from "@/js/trtc.js";import TRTC from "trtc-js-sdk";
大家花个几分钟把帖子详细看完 新手也能做直播集成开发！一步到位 相信小编 最效率最省力最通透的文档！
甚至直接可以copy使用的哦！！但是记得给小编一个赞吧 孩子天天熬夜加班 还写博客确实不容易
关于 腾讯TRTC的vue项目开发集成的最详细讲解
希望能对刚开始来开发这个项目的有些帮助吧~
也是在前一段时间 接手的这个项目 是要求实现 一个五人 直播间内容 ~ 楼主小白我也是含辛茹苦的一顿研究分析~
本文章代码均为vue实现代码 稍作修改即可直接使用！
import Trtcjs from "@/js/trtc.js"; import $ from "jquery";
import TRTC from "trtc-js-sdk"; 这一部分基于vue项目 导入 相关的 js 和 sdk~没什么好解释的
html代码如下
<div class="ved">
// 承接本地流播放视频的盒子 自己搜索id就可以理解到了
<div id="local_stream" class="main-lf local-stream">
<div class></div>
</div>
<div class="main-lr">
<div class="lr-top" id="remote-video-wrap">
</div>
</div>
</div>
首先这一部分的话就是创建client对象 这是第一步
里面可能有一些是this的变量 这个相信大家都懂 作为vue的data里面的数据都是
createClient() {
//获取签名
console.log(this.userId);
this.client = TRTC.createClient({
mode: "rtc", 此处为视频模式 官方文档有详细介绍 ！
sdkAppId: this.sdkAppId, 关于id的话应该也不用介绍吧 这个是在腾讯云自己申请的appid！
userId: this.userId, 用户id的话 就是进入房间时输入的用户名字！这个不可以唯一 否则同时登陆的话会被踢出房间
userSig: this.userSig,关于usersig的话文档也有说明 如果项目正式启动的时候 这个usersig是后端给的 我们接口取就好
});
//注册远程监听，要放在加入房间前--这里用了发布订阅模式
this.subscribeStream(this.client); 此为文档的监听事件 官方文档具有详细说明 建议小伙伴仔细看
// 初始化后才能加入房间
this.joinRoom(this.client, this.roomId); 看名字也知道是假如房价 就不多解释了
},
// 加入房间
joinRoom(client, roomId) {
console.log(roomId);
client
.join({ roomId })
.catch((error) => {
console.error("进房失败 " + error);
})
.then(() => {
console.log("进房成功");
//创建本地流
this.createStream(this.userId);
//播放远端流
this.playStream(this.client);
});
},
//创建本地音视频流
createStream(userId) {
这块大家注意一下 与client一样重要 这块是创建stream对象 下面要用到的
const localStream = TRTC.createStream({
userId: this.userId,
audio: true,
video: true,
});
localStream.setVideoProfile("720p"); 此处是为了编辑视频的分辨率
如果想要更详细的说明 文档也有 关于自定义的
this.localStream = localStream;
localStream
.initialize()
.catch((error) => {
console.error("初始化本地流失败 " + error);
})
.then(() => {
console.log("初始化本地流成功");
// 这部分local_stream是播放主流视频的盒子的id
localStream.play("local_stream");
//创建好后 才能发布
this.publishStream(localStream, this.client);
});
},
//发布本地音视频流
publishStream(localStream, client) {
client
.publish(localStream)
.catch((error) => {
console.error("本地流发布失败 " + error);
})
.then(() => {
console.log("本地流发布成功");
});
},
至以上代码应该没有什么大问题 大家都能够看得懂 一幕了然 需要注意的地方我都给写好了标记了
以上便是发布本地流视频的几个事件了 大家可以试试 很简单！
这里是远端流接受 看下面
// 订阅远端流--加入房间之前 这里为订阅远端流 每当有一个视频加入的时候 便会调用此方法 大家可以打印试试
subscribeStream(client) {
client.on("stream-added", (event) => {
此处event其实就是当前加入的或者退出的这个视频流 接受到的event 里面有些参数是可以用的
const remoteStream = event.stream;
const remoteUserId = remoteStream.getUserId(); 这里也就是关于当前进入或者退出 视频所对应的用户id
这一部分括起来的判断 是有关屏幕共享功能的 没有做屏幕共享的 可以不用加此判断！
首先说这里面的shareId 下面会提到~ 当然官方也有详细文档 其实一句话就是这块是
如果你要做屏幕共享的话 此处的代码 决定了你是否可以看到自己的屏幕共享
if (remoteUserId === this.shareId) {
// 取消订阅自己的屏幕分享流
client.unsubscribe(remoteStream);
} else {
// 订阅其他一般远端流
client.subscribe(remoteStream);
}
})
},
//播放远端流
playStream(client) {
client.on("stream-subscribed", (event) => {
const remoteStream = event.stream;
console.log("远端流订阅成功：" + remoteStream.getId()); // 创建远端流标签，因为id是动态的，所以动态创建
这一部分括起来的原因肯定是相对重要的 这块是多人视频的实现！ 因为trtc是根据你创建的盒子 然后他去直接append进入实现player的 所以说要用这种代码
当然小编的朋友问了说可不可以用vue的v-for和v-if去实现 小编简单的试了试 但是没有实现 err显示append找不到
小编也只是简单的试了试 有兴许的同学可以去试试 。
const remoteId = "remote" + remoteStream.getId();
this.remoteId = remoteId;
const videoDiv = document.createElement("div");
videoDiv.id = remoteId; 我们动态的将盒子的id设置为 获取到的remoteid 其他就不细说了~基本的js吧~
videoDiv.style.width = "50%";
videoDiv.style.height = "50%";
// videoDiv.style.marginRight = "20px";
// videoDiv.style.marginBottom = "20px";
videoDiv.className = "remoteVidwo";
document.getElementById("remote-video-wrap").appendChild(videoDiv);
小编要说的是这块比较重要的代码 一个bug让小编研究了整整一天多的时间 相当重要 可能是小编比较菜吧呜呜呜
client.on("stream-removed", (event) => {
const remoteStream = event.stream;
let remoteId = "remote" + remoteStream.getId();
$("#" + remoteId).remove(); });
这块是基于文档上所写的一个 远端流离开的 一个事件 ，每当远端流离开的时候 就会触发 ，为什么说有bug让小编搞了一天？
这块官方文档是没有具体说明的 当一个视频流离开的时候 经过各种方法 虽然流已经关闭了 但是之前创建的标签还在 会占位置 大家可以试试不用这个代码是什么样效果。所以必须要用jq去移除 小编用的是jq 当然大佬们想用别的也可以
//做了dom操作 需要使用$nextTick(),否则找不到创建的标签无法进行播放
this.$nextTick(() => {
//播放
remoteStream.play(remoteId, { objectFit: "contain" });
});
});
client.on("client-banned", (error) => {
console.error("client-banned observed: " + error);
// 退出刷新页面
console.log("退出刷新页面");
});
},
//退出音视频
leave(client) {
this.client.unpublish(this.localStream).then(() => {
// 取消发布本地流成功
});
大家看好client对象 此处为 主client 是本地流创建的主client
还有一个点要注意 官方文档也写了 大家在用leave方法之前 必须要记得unpublish
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);
// 错误不可恢复，需要刷新页面。
});
},
小编第一次创作 制作不易 希望大家多多点赞 有问题评论小编 小编会详细的一一进行解答 主页有wx也可私学习
前往低代码交流专区
更多推荐
7
0- 0
已为社区贡献1条内容
所有评论(0)