体验腾讯云音视频

npm i tls-sig-api-v2

var TLSSigAPIv2 = require('tls-sig-api-v2');
router.post('/voice', (req, res) => {

var videoApi = new TLSSigAPIv2.Api(req.body.sdkAppId, '应用密钥');

// 第一个人参数获取前端提交的用户id 也就是加密需要的userId，第二个是过期时间腾讯云文档推荐时间长一点

let privateKey = videoApi.genSig(req.body.user, 86400 * 180)

if (req.body.user) {

res.json({

code: 200,

data: privateKey

})

}
})

npm install trtc-js-sdk --save

import TRTC from "trtc-js-sdk";

import axios from "axios";

export default {

data() {

return {

// 房间号

roomId: "",

// 本地客户端 提供了加入通话房间、发布本地流、订阅远端流等功能

client: "",

// 音频流对象 提供对音视频流的控制操作，包括音频和视频的播放控制

localStream: "",

// 加密key

userSig: "",

// 用户ID

userId: "",

sdkAppId: 1400770493,

};

},

created() {

// 首页做了一个填写用户id和房间号 所以这里是query拿到的参数

this.roomId = this.$route.query.roomId;

this.userId = this.$route.query.userId;

// 这个type是做了一个判断 1是创建房间 2是加入房间

this.type = this.$route.query.type;

// 获取到roomId和userId后区调用getUserSig获取加密后的key

this.getUserSig();

},

methods: {

// 获取userSig

getUserSig() {

let url = "线上地址";

axios

// 把roomId和SDkid丢进去

.post(url, { user: this.userId, sdkAppId: this.sdkAppId })

.then((res) => {

this.userSig = res.data.data;

// 拿到加密后的key 判断是进入房间还是加入房间 调用不同的方式

if (this.type == 1) {

this.getVideoRoom();

}

if (this.type == 2) {

this.getJoin();

}

});

},

// 创建房间

getVideoRoom() {

// 实时通话模式下创建客户端对象

this.client = TRTC.createClient({

sdkAppId: this.sdkAppId, // 填写您申请的 sdkAppId

userId: this.userId, // 填写您业务对应的 userId

userSig: this.userSig,

mode: "rtc",

});

// 创建房间

this.client

.join({ roomId: Number(this.roomId), role: "anchor" })

.then(() => {

console.log("创建成功，加入房间成功");

// 调用创建本地流方法

this.getlocalVideo();

});

this.client.on("stream-added", (event) => {

const remoteStream = event.stream;

console.log("远端流增加: " + remoteStream.getId());

//订阅远端流

this.client.subscribe(remoteStream);

});

this.client.on("stream-subscribed", (event) => {

const remoteStream = event.stream;

console.log("远端流订阅成功：" + remoteStream.getId());

// 播放远端流，传入的元素 ID 必须是页面里存在的 div 元素

remoteStream.play("remote_stream" + remoteStream.getId());

});

},

// 发布本地音视频流

getlocalVideo() {

// 从麦克风和摄像头采集本地音视频流

this.localStream = TRTC.createStream({

userId: this.userId,

audio: true, // 音频

video: true, // 视频 可false

});

this.localStream.initialize().then(() => {

console.log("本地流初始化成功");

this.localStream.play("joinVideoOne");

// 本地流初始化成功，可通过Client.publish(localStream)发布本地音视频流

this.client.publish(this.localStream);

});

},

// 获取房间号

getJoin() {

this.client = TRTC.createClient({

sdkAppId: this.sdkAppId, // 填写您申请的 sdkAppId

userId: this.userId, // 填写您业务对应的 userId

userSig: this.userSig,

mode: "rtc",

});

this.client.on("stream-subscribed", (event) => {

const remoteStream = event.stream;

console.log("远端流订阅成功：" + remoteStream.getId());

// 如果您遇到播放失败的问题，需要使用 remoteStream 监听 error 并处理 0x4043 浏览器限制自动播放的问题

remoteStream.on("error", (error) => {

const errorCode = error.getCode();

if (errorCode === 0x4043) {

// PLAY_NOT_ALLOWED, 引导用户手势操作并调用 stream.resume 恢复音视频播放，

// 在点击回调里调用 remoteStream.resume() 进行恢复播放。

}

});

// 播放远端流，传入的元素 ID 必须是页面里存在的 div 元素

remoteStream.play("JoinVideoTwo" + remoteStream.getId());

});

this.localStream = TRTC.createStream({

userId: this.userId,

audio: true,

video: true,

});

this.localStream.initialize();

},

},

};