专栏首页微信音视频小程序动手搭建第一个小程序音视频Demo
原创

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

腾讯云提供了全套技术文档和源码来帮助您快速构建一个音视频小程序,但是再好的源码和文档也有学习成本,为了尽快的能调试起来,我们还提供了一个免费的一键部署服务:您只需轻点几下鼠标,就可以在自己的账号下获得一个音视频小程序,同时附送一台拥有独立域名的测试服务器,让您可以在 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. 点击界面右上角的【腾讯云】图标,在下拉的菜单栏中选择【上传测试代码】。
上传按钮
  1. 选择【模块上传】并勾选全部选项,然后勾选【部署后自动安装依赖】,点击【确定】开始上传代码。
    选择模块
    上传成功
  2. 上传代码完成之后,点击右上角的【详情】按钮,接着选择【腾讯云状态】即可看到腾讯云自动分配给你的开发环境域名:
查看开发域名
  1. 完整复制(包括 https://)开发环境 request 域名,然后在编辑器中打开 wxlite/config.js 文件,将复制的域名填入 url 中并保存,保存之后编辑器会自动编译小程序,左边的模拟器窗口即可实时显示出客户端的 Demo:
    修改客户端配置
  2. 在模拟器中编译运行点击多人音视频进入,在右侧的console里面可以看到登录成功的log表示配置成功。
登录测试

常见问题 FAQ

1. 运行小程序进入多人音视频看不到画面?
  • 请确认使用手机来运行,微信开发者工具内部的模拟器目前还不支持直接运行
  • 请确认小程序基础库版本 wx.getSystemInfo 可以查询到该信息,1.7.0 以上的基础库才支持音视频能力。
  • 请确认小程序所属的类目,由于监管要求,并非所有类目的小程序都开发了音视频能力,已支持的类目请参考 DOC
  • 如有更多需求,或希望深度合作,可以提工单或客服电话(95716)联系我们。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用腾讯云搭建一个小程序音视频Demo

    腾讯云提供了全套技术文档和源码来帮助您快速构建一个音视频小程序,但是再好的源码和文档也有学习成本,为了尽快的能调试起来,我们还提供了一个免费的一键部署服务:您只...

    主机优惠教程
  • 教你从0到1搭建小程序音视频

    升级微信到最新版本,发现页卡 => 小程序 => 搜索“腾讯视频云”,即可打开小程序Demo:

    腾讯视频云终端团队
  • 直播回顾丨腾讯云音视频四月直播课程回顾!

    ? 腾讯云音视频 Techo Youth 高校系列公开课 完整回顾! 之前错过直播的同学赶紧看过来! 我们上课啦! ? 课程1:浅谈实时音视频技术的前世今生...

    腾讯云音视频
  • 产品双月刊 | 腾讯云音视频TRTC&IM&TPNS(2021年5月-7月)

    ? 近期,腾讯云TRTC、IM和TPNS有哪些 重大发布? 他又带给我们了哪些 惊喜 ? 请跟随我们的脚步一起来回顾! ? ? 「 即时通信 IM 」 功能1...

    腾讯云音视频
  • iOS 音视频接入 - 初识TRTC

    在上一篇文章中我们对音视频有了最基础的认识,下面就来了解下第三方提供的功能强大的实时音视频SDK-TRTC。

    小明同学接音视频
  • 客户案例丨腾讯云实时音视频助力诗词大会展开云中千人团连麦答题!

    ? 《中国诗词大会》第六季在今年的2月13日正式开播。如果说,在前五季《中国诗词大会》中,我们看到的是选手间的“神仙比拼”和导师间的“神仙点评”,那么在新一季...

    腾讯云音视频
  • 手把手搭建WebRTC测试环境,实现1对1视频通话

    疫情除了火了电商直播、短视频也火了视频会议,其中看zoom和声网市值就能窥探实时音视频的目前发展情况。其中视频会议相关的技术栈基本都是建立在WebRTC基础上,...

    潇湘落木
  • 微信小程序接口全解析!从官方 Demo 了解小程序的能力

    知晓君
  • iOS下WebRTC音视频通话(二)-局域网内音视频通话准备开始着手开发接收方

    这里是iOS 下WebRTC音视频通话开发的第二篇,在这一篇会利用一个局域网内音视频通话的例子介绍WebRTC中常用的API。 如果你下载并编译完成之后,会看...

    Haley_Wong
  • 【Dev Club 分享】H5 视频直播那些事

    Dev Club 是一个交流移动开发技术,结交朋友,扩展人脉的社群,成员都是经过审核的移动开发工程师。每周都会举行嘉宾分享,话题讨论等活动。 本期,我们邀请了腾...

    腾讯Bugly
  • 仅需三个步骤,手把手教你搭建属于你的 Clubhouse

    得益于科技圈“带货王”马斯克的一条推特,Clubhouse 瞬间火爆中文互联网,不过仅仅支持 iOS 端,还设定了严格的邀请制,让广大安卓用户非常失望。Clu...

    腾讯即时通信IM
  • 「小程序JAVA实战」 小程序手写属于自己的第一个demo(六)

    IT架构圈
  • 搭建在线教育平台过程中,可能会遇到哪些问题?

    在线教育平台的一些主要功能都是建立在直播技术上的,因此搭建在线教育平台的过程中,免不得要处理一些视频直播上的问题。当然除了老生常谈的音视频采集、插件处理、音视频...

    万岳教育系统
  • EasyPlayer客户demo点击全屏无法实现播放器的全屏调整优化

    EasyPlayer播放器是TSINGSEE青犀视频维护的一个RTSP播放器项目,EasyPlayer遵循了标准流媒体码流协议,进行实时播放以及码流录制,在数据...

    TSINGSEE青犀视频
  • 碎片化 | 第一阶段-06-第一个小程序-视频

    如清晰度低,可转PC网页观看高清版本: 第一个java程序Hello word 暂时我们先使用记事本来编写代码,不建议直接使用开发工具eclipse,那都自动生...

    码神联盟
  • 一周小程序【资讯教程Demo】更新

    轻松一刻 21天c++自学成材法 ? 资讯与教程 用 RxJS、RxWX 编写更优秀的微信小程序代码 微信小程序播放音频 小程序view中的节点数最多是多大? ...

    极乐君
  • 【玩转腾讯云】<trtc-room>小程序组件使用

    < trtc-room >是目前腾讯推出的多端实时音视频的处理方案,官方地址介绍。这里记录一下个人使用这个组件的一些经验。 用上TRTC后,各端互通,甚至可以...

    sskingss
  • HTML 5 视频直播一站式扫盲

    视频直播这么火,再不学就 out 了。 为了紧跟潮流,本文将向大家介绍一下视频直播中的基本流程和主要的技术点,包括但不限于前端技术。 1. H5 到底能不能做视...

    腾讯Bugly
  • 【2021 Techo Youth 干货整理贴,总有一款你感兴趣】

    感谢同学们3个月的陪伴,小编带你来看看Techo Youth公开课都有哪些精彩内容。

    Techo小助手

扫码关注云+社区

领取腾讯云代金券