手把手教你构建一个音视频小程序

欢迎你们前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~

本文由 腾讯视频云终端团队发表于 云+社区专栏

腾讯云提供了全套技术文档和源码来帮助您快速构建一个音视频小程序，可是再好的源码和文档也有学习成本，为了尽快的能调试起来，咱们还提供了一个免费的一键部署服务：您只需轻点几下鼠标，就能够在本身的帐号下得到一个音视频小程序，同时附送一台拥有独立域名的测试服务器，让您能够在 5 分钟内快速构建出本身的测试环境。

经过微信公众平台受权登陆腾讯云

打开 微信公众平台 注册并登陆小程序，按以下步骤操做：

1. 单击左侧菜单栏中的【设置】。
2. 单击右侧 Tab 栏中的【开发者工具】。
3. 单击【腾讯云】，进入腾讯云工具页面，单击【开通】。
4. 使用小程序绑定的微信扫码便可将小程序受权给腾讯云，开通以后会自动进去腾讯云微信小程序控制台，显示开发环境已开通，此时能够进行后续操做。

注意：

此时经过小程序开发者工具查看腾讯云状态并不会显示已开通，已开通状态会在第一次部署开发环境以后才会同步到微信开发者工具上。

进入微信公众平台后台

开通腾讯云

腾讯云微信小程序控制台

免费开通腾讯云服务

1 开通直播服务

1.1 申请开通视频直播服务

进入 直播管理控制台，若是服务尚未开通，则会有以下提示:

点击申请开通，以后会进入腾讯云人工审核阶段，审核经过后便可开通。

1.2 配置直播码

直播服务开通后，进入【直播控制台】>【直播码接入】>【接入配置】(https://console.cloud.tencent...) 完成相关配置，便可开启直播码服务：

点击【肯定接入】按钮便可。

1.3 获取直播服务配置信息

从直播控制台获取bizid、pushSecretKey，后面配置服务器会用到：

2. 开通云通讯服务

2.1 申请开通云通信服务

进入云通信管理控制台，若是尚未服务，直接点击直接开通云通信按钮便可。新认证的腾讯云帐号，云通信的应用列表是空的，以下图：

点击建立应用接入按钮建立一个新的应用接入，即您要接入腾讯云IM通信服务的App的名字，咱们的测试应用名称叫作“RTMPRoom演示”，以下图所示：

点击肯定按钮，以后就能够在应用列表中看到刚刚添加的项目了，以下图所示：

2.2 配置独立模式

上图的列表中，右侧有一个应用配置按钮，点击这里进入下一步的配置工做，以下图所示。

2.3 获取云通信服务配置信息

从直播控制台获取SdkAppid、accountType、privateKey、administrator，后面配置服务器会用到：

从验证方式中下载公私钥，解压出来将private_key用文本编辑器打开，如：

-----BEGIN PRIVATE KEY-----
MIGHAgEAsUj5ep7r9TVxTrZiSpXQKhRANCAASuxr7AJGiXRqGpiO7pPrLAchyORc
Y5uWCqVm+QFTn0H+ZcHP93ss3OhgZKh8pq+g7X26dW5fQkiSH1PXG/FY
zbTbMHaWCqVm+QFTn0H+QKhRANCAASuxr7AJGiXRqGpiO7pPr7jTFTmg
-----END PRIVATE KEY-----

将其转换成字符串形式以下所示，后面在server配置文件中使用：

"-----BEGIN PRIVATE KEY-----\r\n"+
"MIGHAgEAsUj5ep7r9TVxTrZiSpXQKhRANCAASuxr7AJGiXRqGpiO7pPrLAchyORc\r\n"+
"Y5uWCqVm+QFTn0H+ZcHP93ss3OhgZKh8pq+g7X26dW5fQkiSH1PXG/FY\r\n"+
"zbTbMHaWCqVm+QFTn0H+QKhRANCAASuxr7AJGiXRqGpiO7pPr7jTFTmg\r\n"+
"-----END PRIVATE KEY-----\r\n"

3、安装微信小程序开发工具

下载并安装最新版本的微信开发者工具，使用小程序绑定的微信号扫码登陆开发者工具。

微信开发者工具

4、下载 Demo

访问 SDK+Demo，获取小程序 Demo 和后台源码。

5、上传和部署代码

1. 打开第三步安装的微信开发者工具，点击【小程序项目】按钮。
2. 输入小程序 AppID，项目目录选择上一步下载下来的代码目录，点击肯定建立小程序项目。
3. 再次点击【肯定】进入开发者工具。

注意：

目录请选择 RTMPRoom 根目录。包含有 project.config.json，请不要只选择 wxlite 目录！

上传代码

开发者工具

1. 打开 Demo 代码中

   server

   目录下的

   config.js

   文件，将其中的

   bizid

   、

   pushSecretKey

   、

   APIKey

   、

   sdkAppID

   、

   accountType

   、

   administrator

   、

   privateKey

   配置成上述直播服务及云通讯服务里生成的值，并

   保存

   。

   修改 MySQL 密码

2. 点击界面右上角的【腾讯云】图标，在下拉的菜单栏中选择【上传测试代码】。

上传按钮

1. 选择【模块上传】并勾选所有选项，而后勾选【部署后自动安装依赖】，点击【肯定】开始上传代码。

   选择模块

   上传成功

2. 上传代码完成以后，点击右上角的【详情】按钮，接着选择【腾讯云状态】便可看到腾讯云自动分配给你的开发环境域名：

查看开发域名

1. 完整复制（包括

   https://

   ）开发环境 request 域名，而后在编辑器中打开

   wxlite/config.js

   文件，将复制的域名填入

   url

   中并保存，保存以后编辑器会自动编译小程序，左边的模拟器窗口便可实时显示出客户端的 Demo：

   修改客户端配置

2. 在模拟器中编译运行点击多人音视频进入，在右侧的console里面能够看到登陆成功的log表示配置成功。

登陆测试

常见问题 FAQ

1. 运行小程序进入多人音视频看不到画面?

• 请确认使用手机来运行，微信开发者工具内部的模拟器目前还不支持直接运行
• 请确认小程序基础库版本 wx.getSystemInfo 能够查询到该信息，1.7.0 以上的基础库才支持音视频能力。
• 请确认小程序所属的类目，因为监管要求，并不是全部类目的小程序都开发了音视频能力，已支持的类目请参考 DOC。
• 若有更多需求，或但愿深度合做，能够提工单或客服电话（400-9100-100）联系咱们。

问答
如何搭建小程序音视频？
相关阅读
教你1天搭建本身的“微视”
心随手动，驱动短视频热潮的引擎
打通小程序音视频和webRTC
【每日课程推荐】机器学习实战！快速入门在线广告业务及CTR相应知识

此文已由做者受权腾讯云+社区发布，更多原文请点击

搜索关注公众号「云加社区」，第一时间获取技术干货，关注后回复1024 送你一份技术课程大礼包！

海量技术实践经验，尽在云加社区！