体验腾讯云音视频

原创

就叫7620521吧

修改于 2022-12-12 14:40:31

7.8K0

修改于 2022-12-12 14:40:31

文章被收录于专栏：征文活动专栏征文活动专栏

从开通音视频出发

了解音视频

首次开通腾讯云音视频免费赠送10000分钟的免费试用套餐包，包含了视频通话、语音通话、视频互动直播、语音互动直播这些模块，另外说明一下腾讯云音视频是按照 1 : 2 : 4 : 9 : 16 : 36 分别抵扣语音、标清、高清、超高清、2K和4K时长，例如1分钟高清视频时长扣除4分钟免费套餐包时长。

开通音视频

当开通后可以在套餐包管理查看使用详情，创建时间和截止时间并设置告警提示；

点击跳转音视频产品页

开发前须知

UserSig保护

UserSig 是腾讯云设计的一种安全保护签名，目的是为了阻止恶意攻击者盗用您的云服务使用权。目前，腾讯云的实时音视频（TRTC）、即时通信（IM）以及移动直播（MLVB）等服务都采用了该套安全保护机制。要使用这些服务，您需要在相应 SDK 的初始化或登录函数中提供 SDKAppID，UserID 和 UserSig 三个关键信息。其中 SDKAppID 用于标识您的应用，UserID 用于标识您的用户，而 UserSig 则是基于前两者计算出的安全签名，它由 HMAC SHA256 加密算法计算得出。只要攻击者不能伪造 UserSig，就无法盗用您的云服务流量。

点击查看个人SDK ID和key

node代码

UserSig安全

官方推荐正确的做法是将 UserSig 的计算代码放在您的业务服务器上，然后由您的 App 在需要的时候向您的服务器获取实时算出的 UserSig，所以我们起个node服务简单的过一遍，实际场景需要自己去定制开发。

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
		})
	}

})

web端代码

您需要在项目中使用 npm 安装 trtc-js-sdk 包。

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();
    },
  },
};