动手搭建第一个小程序音视频Demo

2023-11-06

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

作者:小程序音视频产品经理

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

通过微信公众平台授权登录腾讯云

打开 微信公众平台 注册并登录小程序,按如下步骤操作:

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

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

进入微信公众平台后台

开通腾讯云

腾讯云微信小程序控制台

免费开通腾讯云服务

1 开通直播服务

1.1 申请开通视频直播服务

进入 直播管理控制台,如果服务还没有开通,则会有如下提示:

点击申请开通,之后会进入腾讯云人工审核阶段,审核通过后即可开通。

1.2 配置直播码

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

点击【确定接入】按钮即可。

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"

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

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

微信开发者工具

四、下载 Demo

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

五、上传和部署代码

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

注意:

 

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

上传代码

 

开发者工具

1、打开 Demo 代码中 server 目录下的 config.js 文件,将其中的 bizidpushSecretKeyAPIKeysdkAppIDaccountTypeadministratorprivateKey配置成上述直播服务及云通信服务里生成的值,并保存。修改 MySQL 密码

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

上传按钮

 3、选择【模块上传】并勾选全部选项,然后勾选【部署后自动安装依赖】,点击【确定】开始上传代码。

选择模块

上传成功

4、上传代码完成之后,点击右上角的【详情】按钮,接着选择【腾讯云状态】即可看到腾讯云自动分配给你的开发环境域名:

查看开发域名

 5、完整复制(包括 https://)开发环境 request 域名,然后在编辑器中打开 wxlite/config.js 文件,将复制的域名填入 url 中并保存,保存之后编辑器会自动编译小程序,左边的模拟器窗口即可实时显示出客户端的 Demo:

修改客户端配置

6、在模拟器中编译运行点击多人音视频进入,在右侧的console里面可以看到登录成功的log表示配置成功。

登录测试

常见问题 FAQ

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

  • 请确认使用手机来运行,微信开发者工具内部的模拟器目前还不支持直接运行

  • 请确认小程序基础库版本 wx.getSystemInfo 可以查询到该信息,1.7.0 以上的基础库才支持音视频能力。

  • 请确认小程序所属的类目,由于监管要求,并非所有类目的小程序都开发了音视频能力,已支持的类目请参考 DOC

  • 如有更多需求,或希望深度合作,可以提工单或客服电话(400-9100-100)联系我们。

相关阅读

揭秘微信小程序解决方案:帮助开发者提升效率的利器

微信小程序基于万象优图实现图片 OCR

基于腾讯云智能语音的实时语音识别微信小程序的开发


此文已由作者授权云+社区发布,转载请注明原文出处

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

动手搭建第一个小程序音视频Demo 的相关文章

  • Python安装超详细教程

    本文将介绍以下几部分内容 下载 python 安装 python 配置环境变量 python 多版本共存配置 python 编程工具推荐 一 下载 python 下载 python 点击这里进入 python 下载页面 在下载页面可以看到很
  • oracle什么时候要commit,Oracle什么时候需要Commit

    写完DML语句 update insert delete 后 需要手动COMMIT 如果没有COMMIT 更新的内容会被保存到内存中 而不是提交到数据库中 将不会被其他Session 对话 看见 其他对话看到的是更新前的数据 当用户退出对话
  • Docker指定时间段一键过滤容器运行时日志

    文章目录 引 效果 测试输错 时间段模式 时间段方式 时间戳方式 低版本Docker 时间范围模式 实时查看 脚本 引 针对容器日志过多时 过滤某个时间 时间段的日志 效果 说明 针对Docker版本比较低的客户端 无法使用 until参数
  • C#辗转相除法求最大公约数与最小公倍数

    class Program static void Main string args int num1 num2 mm Console WriteLine 请输入第一个数 num1 Convert ToInt32 Console ReadL
  • 【Flutter 1-6】Flutter项目目录结构

    文章首发地址 Flutter项目结构 了解Flutter的目录结构 可以帮助我们更好的管理和开发项目 这样我们在开发的过程中就会很清楚的知道 iOS代码该放在那里 Android代码该放在那里 Flutter代码该放在哪里 测试代码放在哪里
  • Linux操作系统加固

    如何尽可能地加强Linux的安全性和隐私性 以下列出的所有命令都将需要root特权 以 符号开头的单词表示一个变量 不同终端之间可能会有所不同 一 选择正确的Linux发行版 选择一个好的Linux发行版有很多因素 避免分发冻结程序包 因为

随机推荐

  • ubuntu16.04重新编译linux内核

    首先的首先 如果用的是虚拟机 那硬盘至少要分个40G 硬盘太小的后果 你可以试试 一 下载内核 首先到kernel官网获取linux源代码包 我用的ubuntu版本是16 04 因此下载的包可以采用4 x 如果从官网下载速度过慢 我这下载需
  • 日志注入 ctf.show_web4

    使用php input 不行 使用日志注入 查看日志的默认目录 得到了日志文件 url var log nginx access log 进行日志注入 使用蚁剑连接得到flag
  • Acwing 1264. 动态求连续区间和(树状数组版)

    lowbit x x x 返回2 k k为x的二进制表示中末尾0的个数 c x 存的是 x lowbit x x 之间这些数的和 include
  • Django电商项目(四)用户中心、FastDFS

    Django电商项目 用户中心逻辑 登录装饰器和登录后跳转 判断用户是否已登录 退出登录 用户中心 地址页 模型管理器类方法封装 用户中心 个人信息 分布式图片服务器FastDFS 什么是FastDFS 文件上传流程 文件下载流程 简易Fa
  • 区块链在物联网中的应用态势分析

    摘 要 目的 物联网是物体之间共享资源和交流信息的平台 其上的数据价值不断被挖掘显现 而区块链作为一种新型的数据存储管理模式 在体系去中心化 数据溯源和防篡改等方面拥有良好的效果 近来 不少研究都探索了区块链在物联网中的应用 方法 利用文献
  • PaddleHub人体姿态检测模型pose_resnet50_mpii

    姿态检测还是挺有意思的 在 paddlehub 上有直接可以拿来用的模型 pose resnet50 mpii 随便网上找了张图片试了一下效果还行 代码非常简单 import paddlehub as hub module hub Modu
  • Android逆向之旅---爆破一款资讯类应用「最右」防抓包策略原理分析

    一 逆向分析 首先感谢王同学提供的样本 因为王同学那天找到我咨询我说有一个应用Fiddler抓包失败 其实对于这类问题 我一般都会这么回答 第一你是否安装Fiddler证书了 他说他安装了 第二你是否用了我之前说的那个Xposed框架Jus
  • JAVA list加锁_list类里面的东西加锁 (手动加锁方法)

    package privateclass import java util Collection import java util Iterator import java util List import java util ListIt
  • 【计算机组成原理】——原码,反码,补码,移码怎样计算

    机器数与真值 把符号 数字化 的数称为机器数 而把带 或 的数称为真值 正负号用二进制的0 1表示 0 1 x 001 机器数 第一位表示符号 x 1 x 101 真值 直接用 表示 x 5 原码 反码 补码 移码的计算 正数的原码 反码
  • Pycharm绘图时显示额外的“figure”浮窗

    如图所示 不想图片显示在右边 而是单独的一个窗口 这样可以进行点击交互 1 File gt Settings gt 2 找到Tools gt Python Scientific 找到 Python Scientific 去除右边候选框中的勾
  • SpringCache使用

    SpringCache使用 1 引入依赖 引入springcache依赖
  • three.js坐标轴辅助器AxesHelper

    一 效果图 二 添加坐标轴辅助器 使用three js 通过以下代码可以添加坐标轴辅助器 创建坐标轴辅助器 var axesHelper new THREE AxesHelper 5 添加到场景中 scene add axesHelper
  • 私有云平台管理

    更改主机名 controller hostnamectl set hostname controller compute hostnamectl set hostname compute 更改hosts文件 vi etc hosts 插入以
  • Java NIO通信编程

    NIO即非同步非阻塞式IO 有如下几个特点 1 创建一个线程负责处理IO事件和IO事件的分发 2 事件驱动机制 事件到达之后触发 3 线程之间通过wait notify等方式通信 减少线程间切换 NIO客户端和服务端需都维护一个管理通道的对
  • flutter加载不同分辨率本地图片

    flutter移动开发怎么加载本地图片 首先在该项目根目录也就是和ios android同级创建一个images文件夹用来存放图片资源 然后放入需要加载的图片资源例如ic phone png 然后在项目目录下找到pubspec yaml文件
  • 【定量分析、量化金融与统计学】统计推断基础 番外(1)---T table与Z table的值

    目录 一 前言 二 T table 三 Z table 一 前言 为了方便之后的例题讲解 这里放上T tabel和Z table的值 怎么查表 本篇中会直接讲 所以这里就只看表格就行 本篇为工具篇 二 T table 我们给两个版本 适合用
  • Redis学习笔记:数据结构和命令

    本文是自己的学习笔记 主要参考资料如下 马士兵 4 Redis的五大数据类型 1 1 String 1 1 1 String 类型的命令 1 1 2 存储对象 1 2 List 1 2 1 List基本命令 1 2 2 List高级命令 1
  • linux 提高文件读写速度 mmap,【EA字符串Linux面试题】面试问题:kafka读写… - 看准网...

    传统IO 缓存IO 传统IO也就是缓存IO 数据先从磁盘复制到内核空间缓冲区 然后从内核空间缓冲区复制到应用程序的地址空间 这里的内核缓冲区也就是页缓存 PageCache 是虚拟内存空间 读操作 操作系统检查内核的缓冲区有没有需要的数据
  • QT结构体中定义QString注意点

    当需要进行多进程通讯时 结构体中出现字符串时尽量采用C 标准类型 尽量少用QT特有类型QString字符串 尽量采用char 类型替代 这样在多进程通讯时 可直接通过memcpy直接复制内存的方式 而不用担心内存异常问题 由于QString
  • 动手搭建第一个小程序音视频Demo

    欢迎大家前往云 社区 获取更多腾讯海量技术实践干货哦 作者 小程序音视频产品经理 腾讯云提供了全套技术文档和源码来帮助您快速构建一个音视频小程序 但是再好的源码和文档也有学习成本 为了尽快的能调试起来 我们还提供了一个免费的一键部署服务 您