体验腾讯云音视频

2022-12-12 14:40:31 浏览数 (3)

从开通音视频出发

了解音视频

首次开通腾讯云音视频免费赠送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服务简单的过一遍，实际场景需要自己去定制开发。

代码语言：javascript复制
npm i tls-sig-api-v2
代码语言：javascript复制
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 包。

代码语言：javascript复制
npm install trtc-js-sdk --save

个人写法，仅供参考（不接受批评斜眼笑）

代码语言：javascript复制
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();
    },
  },
};

展示效果

展示部分图片

权限请求权限请求

相关文档集合

web端api点击这个

服务端api点击这个

userSig相关点

官方Demo 体验

个人demo体验

个人使用体验

腾讯云音视频产品本身足够优秀，使用起来体验非常不错，api和文档也非常齐全。官方提供的demo也简单易懂，腾讯会议，贝壳等等知名it公司都有接入。更是直接提供给新开通用户白送一万分钟的体验包，官网活动折扣首单9.9元两万分钟。

产品详情介绍

AI 智能降噪

源自腾讯天籁实验室，通过深度学习技术，智能检测和去除混合在传播信号中的噪声干扰，提高语音的质量和可懂度，提升声音的清晰度，改善用户听感。

实时信令

与即时通信 IM 协同使用，即可实现呼叫等待、接听、会议邀请、会控、公告、通知、评论、弹幕、礼物、点赞、红包、上下麦状态等丰富功能。

屏幕分享

又称屏幕共享，可将系统桌面、应用窗口或指定画面区域分享给他人，支持单个用户同时上行摄像头和屏幕分享两路画面，保证音画同步。

卓越音质与立体声

支持 48kHz 采样的高音质，由业内领先的腾讯天籁实验室提供 3A 处理算法，杜绝回声和啸叫。全链路 192kbps 高音质、真左右声道立体声音频，实现房间用户听感清晰和沉浸式互动体验。

录制与回放

提供覆盖实时音视频互动全程的云端录音与录像功能，保证录制过程的可靠性和稳定性，并提供录制文件存储、转码、下载、点播等一站式服务。

内容安全审核

打通腾讯天御内容审核，实现自动识别音频或视频中出现的涉黄、敏感等违法、违规内容，从而降低人工运营维护成本。

特效美颜

支持基础美颜和滤镜功能，支持与腾讯特效（美颜特效）SDK快捷集成，获得智能美颜、美妆、美体、贴纸特效、虚拟背景、手势识别等扩展能力。

旁路直播

用 MCU 旁路转码集群，将 TRTC 所使用的 UDP 协议转换为标准的直播 RTMP 协议并旁路到直播系统中，让观众通过直播 CDN 进行观看。

监控仪表盘

提供全方位的质量排查、实时质量监控服务。针对通话过程提供精准易用的可视化运维工具、支持实时通话质量监控能力以及应用维度的大盘数据查询功能，助您快速了解业务使用情况。

云直播 sdk api ide 互动直播web node 腾讯云音视频 新知实验室 体验音视频

0 人点赞