学习
实践
活动
专区
工具
TVP
写文章
专栏首页征文活动专栏体验腾讯云音视频
原创

体验腾讯云音视频

从开通音视频出发

了解音视频

首次开通腾讯云音视频免费赠送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();
    },
  },
};

展示效果

展示部分图片

权限请求

相关文档集合

web端api点击这个

服务端api点击这个

userSig相关点

官方Demo 体验

个人demo体验

个人使用体验

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

产品详情介绍

AI 智能降噪

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

实时信令

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

屏幕分享

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

卓越音质与立体声

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

录制与回放

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

内容安全审核

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

特效美颜

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

旁路直播

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

监控仪表盘

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

原创声明,本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

登录 后参与评论
0 条评论

相关文章

  • 腾讯云 WebShell 体验

    近期,腾讯云给 WebShell 终端增加了不少功能,最大的亮点还是 WebShell 支持文件上传下载了,给一些入门的用户提供了方便的文件管理功能。这是基于原...

    Nyarime
  • 腾讯云 WebShell 体验

    近期,腾讯云给 WebShell 终端增加了不少功能,最大的亮点还是 WebShell 支持文件上传下载了,给一些入门的用户提供了方便的文件管理功能。这是基于原...

    Nyarime
  • 实时音视频-腾讯云实时音视频(TRTC)

    腾讯实时音视频(Tencent Real-Time Communication,TRTC)拥有QQ十几年来在音视频技术上的积累,致力于帮助企业快速搭建低成本、高...

    用户3570397
  • 一站式体验腾讯云音视频及融合通信技术

    对于一款音视频产品,从底层编解码、到传输网络、到平台架构、再到用户终端,无一不决定产品“生死”,与此同时,伴随用户数量的提升和对观看体验的不断提高,如何融合AI...

    LiveVideoStack
  • 关于腾讯云+社区的体验

    云社区我不常逛,但对各种垂直领域的社区很感兴趣,经朋友推荐,便来此处简单的体验了一回,做了以下书面输出。

    朱宏涛
  • 腾讯云新产品“云开发”尝鲜体验

    最近用云开发写仿了一个很古老的小游戏 http://stonelf.gitee.io/letter/letter.html 大家可以点进去玩一下。分享一下过程中...

    黄希彤
  • “腾讯云视频云”公众号即将更名为“腾讯云音视频”

    “腾讯云音视频”品牌正式发布! “腾讯云视频云”公众号也将在近期更名为“腾讯云音视频”

    腾讯云音视频
  • 腾讯云产品免费体验馆

    Youngxj
  • 腾讯云开发Webify初体验

    最近腾讯云的云开发推出了Webify产品,根据官网介绍,是专为 Web 开发者打造的应用托管平台,目前有免费默认域名、前端框架集成、加速站点、持续集成与部署、G...

    李小飞
  • 【技术种草】体验腾讯云资源

    现在云资源已经很普遍了,碰巧腾讯TVP项目给了一些代金券,尝试一下腾讯云,登陆腾讯云,点击云产品,可以看到所有他能提供的云产品,

    bisal
  • 音视频技术如何为元宇宙提供全真稳的全新体验之漫话腾讯云音视频

    元宇宙已经不是一个全新的概念,它更多的是融合了众多技术于一身的一个集合体,包括AR、VR、区块链、云计算等技术媒介。而所有的这些概念组成的元宇宙呈现出来的载体都...

    liuzhen007
  • CloudFlare + 腾讯云免费CDN初体验

    框架师
  • 腾讯云TKE1.18初体验

    作为腾讯云的老用户我大概是2018年开始使用腾讯云的tke服务的。当时是1.10,现在线上还有一个tke1.12的集群,鉴于早期更新迭代较慢。我选择了在腾讯云上...

    对你无可奈何
  • 腾讯云在线WebShell终端使用体验

    WebShell最近更新的很快,之前都是每更新一次就新开一篇文章并引用前一篇文章的链接,后面考虑到更新如此频繁影响到小伙伴们的阅读体验,故开一篇新的合集,此后每...

    星橙
  • 腾讯云在线Web Shell初体验

    最近听说了腾讯云的轻量应用服务器更新了登录的Web Shell,之前一直在本地SSH的我立刻跑去体验了一番,发现和之前的相比好用简直不要太多,接下来就让我带大家...

    星橙
  • 腾讯云在线WebShell终端使用体验

    WebShell最近更新的很快,之前都是每更新一次就新开一篇文章并引用前一篇文章的链接,后面考虑到更新如此频繁影响到小伙伴们的阅读体验,故开一篇新的合集,此后每...

    星橙

扫码关注腾讯云开发者

领取腾讯云代金券