微信小程序

最近更新时间:2019-05-09 12:06:33

Demo 体验

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

功能项 小程序组件 PC端体验页面 依赖的云服务 功能描述
手机直播 <live-room> N/A 直播 + 云通讯 演示基于小程序的个人直播解决方案
PC 直播 <live-room> WebEXE 直播 + 云通讯 演示课堂直播和学生互动的相关功能(需要 PC 端配合)
双人通话 <rtc-room> WebEXE 直播 + 云通讯 演示双人视频通话功能,可用于在线客服
多人通话 <rtc-room> N/A 直播 + 云通讯 演示多人视频通话功能,可用于临时会议
WebRTC <webrtc-room> Chrome 实时音视频 演示小程序和 Chrome 浏览器的互通能力
RTMP推流 <live-pusher> N/A 直播 演示基础的 RTMP 推流功能
直播播放器 <live-player> N/A 直播 演示基于 RTMP 和 FLV 协议的直播播放功能

注册小程序并开通相关接口

出于政策和合规的考虑,微信暂时没有放开所有小程序对 <live-pusher> 和 <live-player> 标签的支持:

个人账号和企业账号的小程序暂时只开放如下表格中的类目:

主类目 子类目 小程序内容场景
社交 直播 涉及娱乐性质,如明星直播、生活趣事直播、宠物直播等。选择该类目后首次提交代码审核,需经当地互联网主管机关审核确认,预计审核时长7天左右
教育 在线视频课程 网课、在线培训、讲座等教育类直播
医疗 互联网医院,公立医院 问诊、大型健康讲座等直播
金融 银行、信托、基金、证券/期货、证券、期货投资咨询、保险、征信业务、新三板信息服务平台、股票信息服务平台(港股/美股)、消费金融 金融产品视频客服理赔、金融产品推广直播等
汽车 汽车预售服务 汽车预售、推广直播
政府主体帐号 - 政府相关工作推广直播、领导讲话直播等
工具 视频客服 不涉及以上几类内容的一对一视频客服服务,如企业售后一对一视频服务等

打开 微信公众平台 注册并登录小程序,并在小程序管理后台的 “设置 - 接口设置” 中自助开通该组件权限,如下图所示:

注意:

  • 该接口对小程序的类目设置有限制要求,详情请参考 小程序开发组件 live - player
  • 如果以上设置都正确,但小程序依然不能正常工作,可能是微信内部的缓存没更新,请删除小程序并重启微信后,再进行尝试。

安装微信小程序开发工具

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

获取 Demo 源码并调试

  • step1: 访问 SDK + Demo,获取小程序 Demo 源码。

  • step2: 打开安装的微信开发者工具,单击【小程序项目】。

  • step3: 输入小程序 AppID,项目目录选择上一步下载下来的代码目录( 注意: 目录请选择根目录,根目录包含有 project.config.json文件,请不要只选择 wxlite 目录!),单击确定创建小程序项目。

  • step4: 再次单击【确定】进入开发者工具。

  • step5: 请使用手机进行测试,直接扫描开发者工具预览生成的二维码进入。

  • step6: 开启调试模式,体验和调试内部功能。开启调试可以跳过把这些域名加入小程序白名单的工作。

Demo 访问的测试地址

Demo 小程序会访问如下表格中的测试服务器地址,这些服务器使用的云服务是我们为大家提供的一个体验账号,平时很多客户都会在上面做测试。如果您希望使用自己的后台服务器,以免被其他客户打扰,请关注文档后一节内容:

  • <live-room> 和 <rtc-room> 相关 Demo 需要访问如下地址:
URL 对应的服务器地址 服务器的功能描述
https://webim.tim.qq.com IM 云通讯后台服务地址 用于支持小程序里面的一些消息通讯功能
https://room.qcloud.com RoomService 后台服务地址 RoomService 是用于支撑 <rtc-room> (视频通话)和 <live-room> (直播连麦)的房间管理逻辑
  • <webrtc-room> 相关 Demo 需要访问如下地址:
URL 对应的服务器地址 服务器的功能描述
https://webim.tim.qq.com IM 云通讯后台服务地址 用于支持小程序里面的一些消息通讯功能
https://official.opensso.tencent-cloud.com/v4/
openim/jsonvideoapp
WebRTC 测试后台 用于请求进入<webrtc-room> 所需的 userSig 和 privateMapKey
https://xzb.qcloud.com/webrtc/
weapp/webrtc_room
WebRTC 房间列表后台 一个简单的房间列表功能,方便 Demo 的测试和使用。

搭建自己的账号和后台服务器

这部分我们将介绍如何将 Demo 默认的测试用服务器地址,换成您自己的服务器,这样一来,您就可以使用自己的腾讯云账号实现上述功能,同时也便于您进行二次开发。

1. 搭建 <webrtc-room> 的服务器

1.1 这个服务器能做什么?
  • 单击 Demo 里的互动课堂 <webrtc-room> 功能,您会看到一个房间列表,这个房间列表是怎么实现的呢?

  • 在看到视频房间列表以后,如果您要创建一个视频房间,或者进入一个其他人建好的视频房间,就需要为 <webrtc-room> 所对应的几个属性(sdkAppIDuserIDuserSigroomIDprivateMapKey)传递合法的参数值,这几个参数值怎么获取呢?

1.2 这个服务器要怎么搭建?
  • 下载 webrtc_server ,这是一份 Java 版本的实现,根据 README.md 中的说明就可以了解怎么使用这份源码。
1.3 服务器建好了我怎么用?
  • 小程序 源码中,将 wxlite/config.js 文件中的 webrtcServerUrl 修改成:

    https://您自己的域名/webrtc/weapp/webrtc_room
  • 小程序实现 WebRTC 能力肯定是为了跟 Chrome 浏览器进行视频通话,浏览器端的源代码可以单击 Chrome(src) 下载到,将 component/WebRTCRoom.js 文件中的serverDomain修改成:

    https://您自己的域名/webrtc/weapp/webrtc_room

2. 搭建 <live-room> 和 <rtc-room> 的服务器

2.1 这个服务器能做什么?
  • <live-room> (用于直播连麦)和 <rtc-room> (用于视频通话)都是基于腾讯云 LVB 和 IM 两个基础服务实现的扩展功能,需要一个叫做 RoomService 的后台组件配合才能运行。
2.2 这个服务器要怎么搭建?
  • 下载 RoomService 的 Java 版本源代码,根据 README.md 中的说明就可以了解怎么使用这份源码。
2.3 服务器建好了我怎么用?
  • 小程序 源码中,将 wxlite/config.js 文件中的 serverUrlroomServiceUrl 修改成:

    https://您自己的域名/roomservice/
  • 小程序如果使用 <live-room> 和 <rtc-room> 两个标签,在 PC 端就不能用 Chrome 浏览器配对了,需要改用 WebEXE 混合解决方案。将 GitHub(WebEXE) 源码中 liveroom.html、double.html文件中的RoomServerDomain修改成:

    https://您自己的域名/roomservice/

3. Wafer 零成本服务器部署方案 (Node.js)

如果您是一位资深的 Web 前端工程师,暂时找不到合适的服务器,但又想快速拥有自己的调试后台,可以使用腾讯云的 Wafer 功能进行零成本的一键部署方案(Wafer 只支持 Node.js 语言的后台代码),您需要做的只是:

  • step1: 下载 小程序 源码。

  • step2: 根据 一键部署指引 完成部署。

  • step3: 将 GitHub(WebEXE) 源码中 liveroom.html、double.html 文件中的RoomServerDomain修改成:

    https://您自己的域名/roomservice/