一、前言

二、小程序功能介绍

三、在腾讯云获取源码和接口

四、制作你的微信小程序

五、总结与建议

六、相关链接

开发环境：微信开发者工具（1.06.2211222 64位）

测试环境：红米Note11T pro，微信（8.0.28）

一、前言

首先声明，这不是标题党，最近腾讯云推出了一款叫做TRTC实时音视频一套音视频通讯服务，所有你能够想到的平台他都提供了源代码供你快速跑通一个最简单的Demo。

并且最重要的是，该产品开通是免费的，开通之后还赠送截止到下一年年底的10000分钟套餐包。

二、小程序功能介绍

官网对TRTC的介绍如下，官网地址：实时音视频_腾讯RTC_低延时互动直播_音视频通话

实时音视频（Tencent RTC）基于腾讯21年来在网络与音视频技术上的深度积累，以多人音视频通话和低延时互动直播两大场景化方案，通过腾讯云服务向开发者开放，致力于帮助开发者快速搭建低成本、低延时、高品质的音视频互动解决方案。

TRTC 提供的方案，分为无 UI 集成 和 有 UI 集成 两大类，这里用到的是有UI集成的小程序。

最终实现的音视频小程序效果如下图所示，各个功能介绍如下：

语音聊天室：类似YY语音，加入之后所有人都能够在里面发言，但腾讯云在延迟和降噪方面做极大优化。

双人通话：能够实现输入连接代码之后双人在公网定向加密通话，类似微信发起视频聊天，但不用添加好友也能够沟通。

多人会议：能够在该功能中开启视频会议，但腾讯云对视频流畅度和带宽进行了优化。

最重要的是，这次打造的这个小程序自带了机型适配的功能，我拿自己的iphone和小米测试了都没有任何问题。

最终项目地址：向瑶函 / 【新知实验室】0基础小白如何免费打造自己的音视频小程序 · GitCode

接下来我就会用TRTC为大家详细介绍【0基础小白如何免费打造自己的音视频小程序】。

三、在腾讯云获取源码和接口

首先请点击这个链接进入到腾讯音视频的开通界面：登录 - 腾讯云，如果没有登录的小伙伴需要首先登录一下腾讯云，然后为了保证自己的产品不会因为用完了10000分钟免费套餐而导致直接服务中断。

请先按量付费产品，然后大家先进入到【账号中心】进行一下【实名认证】，最后在自己账户上预充值一定金额防止因10000分钟免费额度用完了导致服务中断。

开通之后在这个位置点击【快速跑通Demo】，按照他的指示进入到第二步，里面有我们需要的全部源代码，只需要点击【下载】即可。

然后，强烈建议大家在概况里面【开启告警】，这样免费套餐包用完之后自己能够收到提示。

这里选择【下载zip】下载我们要的源码包，当然你也可以打开Github或者Gitee来将代码库clone到本地或者是folk方便协作修改。

记住这里的SDKAppID和密钥，后面要复制粘贴到下图指定的位置，然后点击完成就相当于在整个腾讯云创建了一个接口，腾讯云这边的操作就算完成了。

备注：下载好的源码不要用任何IDE去打开，否则就会报错（见下图），因为这些文件是适配了微信开发者工具的，只能用微信开发者工具打开。

四、制作你的微信小程序

首先需要在微信开发者工具下载地址与更新日志 | 微信开放文档下载【微信开发者工具】，要注意的是微信开发者工具需要的Java环境请大家根据自己的开发环境自行配置。

下载安装好微信开发者工具好之后点击【新建项目】，只需要将目录更改成如下图所示的下载好的zip压缩包即可。

小程序需要自己在微信公众平台去开通一个，当然你也可以用测试号，这里就不详细展开了。

接下来是最最重要的一步：然后找到项目里面【Debug】文件的【GenerateTestUserSig.js】，将自己在第二步中获得的SDKAppID和密钥复制到文件的指定位置后【保存】。

保存好之后点击【编译】，如果没有Bug就算是正常了，这样就能够在右侧看到自己的小程序在手机上运行的样子了。

然后，你也可以点击【真机调试】查看该小程序在手机上的运行效果，扫描二维码就能够看到了。

当然，如果测试过程中，大家想要修改各个按钮的UI样式，可以进入到custom-tab-bar文件夹中的index.wxss文件中，可以看到里面集成了按钮样式的设置参数

.custom-item-text { font-size: 10px;letter-spacing: 0;font-weight: 500;
}
.custom-tab{position: absolute; z-index: 9;bottom: 0; left: 0; right: 0; padding-top: 16px;
}

而全局参数包括用户ID之类的则需要在 app.js 中进行修改。

import { genTestUserSig } from './debug/GenerateTestUserSig'
const Signature = genTestUserSig('')
App({onLaunch: function() {wx.$globalData = {userInfo: null,headerHeight: 0,statusBarHeight: 0,sdkAppID: Signature.sdkAppID,userID: '',userSig: '',token: '',expiresIn: '',phone: '',sessionID: '',}},
})

接着测试，不难发现，这里不同页面的点击是有效果的，且各个功能运转正常，如果大家有2台以上设备（电脑可以下载模拟器），可以对具体功能接口进行调试。

最后，再点击右上角的【上传】，这次腾讯的源代码是集成了基础的功能的，这样你的第一个实时音视频小程序就算制作成功了。

五、总结与建议

整个腾讯云实时音视频小程序搭建体验下来，给我最大感觉就是一个字“快”，一方面是腾讯云本身就提供了一个很完善的源码，使得我们能够在半小时之内就能打造一个简单的小程序，第二方面在于，腾讯云这次的对音视频小程序做了很大优化，无论是从带宽还是延迟上面都能够秒杀在市面上绝大多数同类产品。

当然，整个体验下也是能感觉到这个产品存在不足：

1、开发文档分布散乱：这个产品有一个自带的16种特效SDK，但是这个文档没有被集成到产品介绍里面，我也是找了好久才找到，所以希望官方能够后续优化一下产品文档的排列和布局。

这16个SDK的链接如下：腾讯特效 SDK SDK 下载-SDK 下载-文档中心-腾讯云

2、套餐价格可能需要给出更多优惠：如果你仅仅是个人开发者，用完免费套餐之后，正式套餐的价格可能确确实实对个人开发者来说不太友好，并且计费规则相对来说比较复杂了，希望后续能够给到更多优惠。

六、相关链接

最后，附上我的整个小程序的项目地址：向瑶函 / 【新知实验室】0基础小白如何免费打造自己的音视频小程序 · GitCode

【新知实验室】0基础小白如何免费打造自己的音视频小程序相关推荐

个人开发者如何免费打造属于自己的微信小程序
微信小程序,从2017年上线到如今已有三个多年头了,似乎各行各业都涉猎了这个平台,游戏,电商,娱乐,出行等等,在小程序里司空见惯,因为有微信这样一个优秀的平台,一不用担心流量,二不用担心跨平台,对于我 ...
0基础小白想学习软件测试，应该如何选择培训机构呢
其实关于培训机构如何选择这件事儿,我相信大家是真的用心在筛选,看了这篇文章争取让大家少踩些坑,让钱花的更值得. 0基础小白想学习软件测试,应该如何选择培训机构呢 01师资配置看一家IT培训机构的团队 ...
android checkbox监听另一个checkbox选中和不选中_一个真正0基础小白学习前端开发的心路历程...
摘要:真正的0基础小白学习前端开发的心路历程. 距离第一阶段的结束敲响了末尾的声音,抱着初心从开始8号的学习到第一阶段的结束这期间要应付期末考试应付自己的各种事情学习时间总是挤出来的这次学习让我受益匪 ...
一个真正0基础小白学习前端开发的心路历程
摘要:真正的0基础小白学习前端开发的心路历程. 距离第一阶段的结束敲响了末尾的声音,抱着初心从开始8号的学习到第一阶段的结束这期间要应付期末考试应付自己的各种事情学习时间总是挤出来的这次学习让我受益匪 ...
0基础小白都说简单！10秒做好酷炫图表，可视化工具帮了大忙
0基础小白,10秒做好酷炫图表,动态可视化工具帮了大忙. 优秀的数据可视化,选择正确的图表类型是第一步. 再酷炫,再黑科技的可视化大屏,不也是一个个图表组成的吗? 图表制作,其实要说难也不算太难,但是 ...
0基础学python做什么工作好-写给0基础小白：Python能干什么？就业前景好不好？怎么开始学？...
原标题:写给0基础小白:Python能干什么?就业前景好不好?怎么开始学? 今天,我们深度了解一下Python这门语言,它到底是什么,都能用来干什么,为什么这么火? 首先,普及一下编程语言的基础知识. ...
0基础小白学理财从入门到进阶 | 2019年最新书单
0基础小白学理财从入门到进阶-2019年最新书单生活中经常会遇到一些朋友:突然对投资理财感兴趣了,但又不知道看什么书比较好. 2016年,我们曾整理过一份**<"财务自由" ...
0基础小白该如何学Python？这些方法你需要了解
由于python在人工智能,机器学习,大数据,数据分析,网络爬虫,全方位的技能特点,是非常适合初学者入门和培养编程兴趣的一门语言.相比较其他不少主流编程语言,有更好的可读性,和满足感,因此上手相对容易 ...
0基础小白该怎么自学好平面设计
本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享 0基础小白该怎么自学好平面设计?作为一个新手零基础如何自学平面设计,如何从零开始入门学平面设计,首先我们要了解平面设 ...

【新知实验室】0基础小白如何免费打造自己的音视频小程序

一、前言

二、小程序功能介绍

三、在腾讯云获取源码和接口

四、制作你的微信小程序

五、总结与建议

六、相关链接

【新知实验室】0基础小白如何免费打造自己的音视频小程序相关推荐

最新文章

热门文章