教你从0到1搭建小程序音视频

Demo 体验

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

功能项

小程序组件

PC端体验页面

依赖的云服务

功能描述

手机直播

N/A

直播+云通讯

演示基于小程序的个人直播解决方案

PC 直播

直播+云通讯

演示课堂直播和学生互动的相关功能(需要 PC 端配合)

双人通话

直播+云通讯

演示双人视频通话功能,可用于在线客服

多人通话

N/A

直播+云通讯

演示多人视频通话功能,可用于临时会议

WebRTC

实时音视频

演示小程序和 Chrome 浏览器的互通能力

RTMP推流

N/A

直播

演示基础的 RTMP 推流功能

直播播放器

N/A

直播

演示基于 RTMP 和 FLV 协议的直播播放功能

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

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

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

主类目

子类目

【社交】

直播

【教育】

在线教育

【医疗】

互联网医院,公立医院

【政务民生】

所有二级类目

【金融】

基金、信托、保险、银行、证券/期货、非金融机构自营小额贷款、征信业务、消费金融

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

注意:如果以上设置都正确,但小程序依然不能正常工作,可能是微信内部的缓存没更新,请删除小程序并重启微信后,再进行尝试。

安装微信小程序开发工具

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

<img style="border:0; max-width:100%; height:auto; box-sizing:content-box; box-shadow: 0px 0px 0px #ccc; margin: 0px 0px 0px 0px;" src="https://main.qcloudimg.com/raw/8e1eeee23aec979f346d4b4c05e62571.png" />

获取Demo源码并调试

  • step1: 访问 SDK + Demo,获取小程序 Demo 源码。
  • step2: 打开安装的微信开发者工具,点击【小程序项目】按钮。
  • step3: 输入小程序 AppID,项目目录选择上一步下载下来的代码目录( 注意: 目录请选择根目录,根目录包含有 project.config.json文件,请不要只选择 wxlite 目录!),点击确定创建小程序项目。
  • step4: 再次点击【确定】进入开发者工具。
  • step5: 请使用手机进行测试,直接扫描开发者工具预览生成的二维码进入。
  • step6: <font color='red'>开启调试模式</font>,体验和调试内部功能。开启调试可以跳过把这些域名加入小程序白名单的工作。

<img style="border:0; max-width:100%; height:auto; box-sizing:content-box; box-shadow: 0px 0px 0px #ccc; margin: 0px 0px 0px 0px;" src="https://main.qcloudimg.com/raw/c05e7942a54a2ad41ec2066459edb528.png" />

Demo访问的测试地址

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

  • <live-room> 和 <rtc-room> 相关demo需要访问如下地址:

URL

对应的服务器地址

服务器的功能描述

https://webim.tim.qq.com

IM云通讯后台服务地址

用于支持小程序里面的一些消息通讯功能

https://room.qcloud.com

RoomService后台服务地址

RoomService 是用于支撑

(视频通话)和 <live-room> (直播连麦)的房间管理逻辑

  • <webrtc-room> 相关demo需要访问如下地址:

URL

对应的服务器地址

服务器的功能描述

https://webim.tim.qq.com

IM云通讯后台服务地址

用于支持小程序里面的一些消息通讯功能

https://yun.tim.qq.com/v4/ openim/jsonvideoapp

WebRTC测试后台

用于请求进入
所需的 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/

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏猿人谷

三种Linux服务器监控技术的对比

本文介绍三种Linux服务器监控技术的优缺点,其中有SNMP代理(客户端)方式、SSH方式、安装私有代理(客户端)方式等内容。 Linux系统的强大的功能和绚丽...

2177
来自专栏EAWorld

微服务来了,配置怎么办?

配置管理是个简单的小话题,程序员都已经非常熟悉,咋就跟微服务挂上钩了呢? 前些年没提微服务架构的时候,大家也都会做配置管理相关的事情,比如我接触过的很多项目都做...

3416
来自专栏搜云库

保证分布式系统数据一致性的6种方案

在电商等业务中,系统一般由多个独立的服务组成,如何解决分布式调用时候数据的一致性? 具体业务场景如下,比如一个业务操作,如果同时调用服务 A、B、C,需要满足要...

1.4K7
来自专栏知晓程序

小程序可以缓存视频吗?| 小程序问答 #24

小程序为何不能缓存视频?那又如何安全地清理小程序中的缓存数据呢?知晓程序(微信号 zxcx0101)今天就来为你解答这两个问题。

861
来自专栏恰同学骚年

《大型网站技术架构》读书笔记三:大型网站核心架构要素

此篇已收录至《大型网站技术架构》读书笔记系列目录贴,点击访问该目录可获取更多内容。

682
来自专栏开源项目

实用的国产优秀开源中间件 | 码云周刊第 52 期

在系统软件之中,操作系统、数据库、中间件的三驾马车,中间件是最神秘的,而且是一个专业化非常强的细分产业。中间件技术主要用来支撑分布式软件的开发,在大型分布式软件...

4408
来自专栏王清培的专栏

RabbitMQ 高可用集群搭建及电商平台使用经验总结

面向EDA(事件驱动架构)的方式来设计你的消息 AMQP routing key的设计 RabbitMQ cluster搭建 Mirror queue poli...

59010
来自专栏小樱的经验随笔

Python爬虫笔记(一):爬虫基本入门

最近在做一个项目,这个项目需要使用网络爬虫从特定网站上爬取数据,于是乎,我打算写一个爬虫系列的文章,与大家分享如何编写一个爬虫。这是这个项目的第一篇文章,这次就...

3656
来自专栏FreeBuf

关于“入侵检测”的一些想法

离开长沙的时候写了一篇文章“左右互博:站在攻击者的角度来做防护”(freebuf上可以找到),一晃已经是三年了。这三年接触了很多东西,自己也有过很多想法,但实际...

1800
来自专栏Java Web

初学Java Web(1)——Web概述

已经很久没有更新博客了,过年忙着吃喝玩乐,就怠惰了一小下下?幸好这学期新开的课程都比较有趣——Java Web和Android。至少对于我自己来说,既充满挑战...

3846

扫码关注云+社区