微信小程序音视频怎么开发?

  • 回答 (3)
  • 关注 (0)
  • 查看 (374)

系统怎么开发?实时音视频中小程序与webRTC可以互通吗?有哪些具体可以应用的场景?最近刚接手项目求各位前辈指点下。

nr348399nr348399提问于
麦大师程序猿回答于

关于小程序和webrtc。如果跟我一样是一个实用主义者,那我就简单从实用主义角度说一下我的结论:小程序搞定了手机,WebRTC拿下了PC。

如果你对技术比较感兴趣,那我们就可以从多个技术的角度去列举两者的区别,下面是一张详细对比的表格:

  • 实现原理: 小程序音视频是将腾讯视频云的 liteavsdk 嵌入到微信内部实现的,然后通过 <live-pusher> 和 <live-player> 两个标签将 SDK 内部的音视频能力开放出来。所以小程序的标签起到了开发者 API 的作用,而内部的 SDK 则是真正用来实现音视频功能。

WebRTC 由谷歌收购 GIPS 得来(这里不得不提一下,我加入腾讯时所在的第一个团队就是 QQ 团队,当时 QQ 的音视频还是购买的 GIPS 公司的产品,不过由于各种不靠谱,后来就转为自研路线了)。所以其技术被完整的保留并且加入到了 Google 的 Chrome 浏览器内核当中。而且最近苹果也已经开始在 Safari 浏览器中支持 WebRTC 的相关能力。

  • 底层协议 小程序音视频的主要协议是目前在直播领域最为常用的 RTMP 推流协议,以及 HTTP-FLV 播放协议,这两种协议都已经有多年的沉淀而且在互联网上的资料也是汗牛充栋。

WebRTC的底层则是使用RTP和RTCP两种数据协议,其中RTP主要用于音视频数据传输,而RTCP则一般用于控制。

  • 移动端碎片化问题 小程序音视频由于是微信统一实现的,而且微信团队每个版本都尽量要求功能对齐,否则宁可不上,所以在碎片化问题上基本不存在。

WebRTC在这里则要尴尬的多,一方面Android系统的碎片化本身让WebRTC的具体表现呈现“百花齐放”的景象,同时,iOS 目前的内嵌WebView(也就是在微信等APP里打开的各种内嵌网页)不支持WebRTC也还是个很麻烦的问题。

  • 扩展性 小程序音视频跟随微信的版本发布,有什么问题一般是当前代码流修正,然后跟随下一个版本发布,所以一般一个功能点(比如给 pusher 加一个美颜的功能)或者一个问题点(比如不支持手势放大)从确立到最终实现(或解决)仅需要一个月的时间,而且微信APP新版本的覆盖速度也确实挺快。

相比之下,WebRTC则不是一个团队或者一家公司的问题了,因为它现在已经走标准路线,所以每一个新特性都是先确定标准,然后再推动浏览器厂商(包括苹果)进行跟随。这里面的故事就多了,时间也就更久了。

  • 桌面浏览器 相信您已经发现,在前面几个问题的分析上,我的观点都倾向小程序音视频。确实,在目前国内的移动领域里,谷歌和苹果都不能一家说了算,真正说了算的还是微信

但是在桌面浏览器这个部分,Chrome目前在PC浏览器市场上留到地位的存在决定了 WebRTC 的优势就很大了,开发者可以在不安装插件的情况下就可以实现自己想要的功能。

相比之下,由于没有 Chrome 的原生支持,所以如果我们要在 PC 上对接小程序音视频,就需要安装浏览器插件或者通过 wxlite://start 这样的伪协议唤起本地 exe 应用程序(类似在网页上打开 QQ 聊天窗口)。

并非零和博弈

小程序音视频和WebRTC支架并非零和博艺,双方都有自己的优势和不足,所以本着“打不过他们,就加入他们”的思路,腾讯视频云团队在2018年春节回来后,就马不停蹄地开始了小程序音视频和WebRTC互通的相关工作。

目前,需要向各位开发者汇报的是,在最新版本的微信中,小程序音视频已经可以跟WebRTC打通,目前在PC 的Chrome浏览器上就可以跟小程序进行实时音视频互通。

// to-do

当然,如果您想知道这个功能是怎么实现的,可以继续看下去:

充分了解WebRTC

就像结婚一样,既然你决定要选择另一个人作为人生下半辈子的伴侣,那你肯定会先深入地了解一下TA这个人,比如性格,脾气,爱好等各个方面。

同样,我们要想很好的将小程序音视频和WebRTC打通,那也必须要多了解一下WebRTC,这里我就说一下我对 WebRTC 这个“人” 在性格上的一些理解。

首先,她虽然长得不太好看,但很有内涵。

说WebRTC长得不好看,只是我的一种比喻,我的意思是想说WebRTC的学习成本不低,虽然Google做了很多浅显易懂的PPT来教你怎么 Getting Start,但真要完整的学进去,还是需要静下心来,慢慢地把她当成自己认可的目标去学下去。但是如果你是第一次恋爱(也就是第一次接触实时音视频),你会发现学习WebRTC的过程,本身就是了解一个实时音视频技术细节的过程。

其次,她非常喜欢迁就别人,各种架构方案她都能支持到。

说WebRTC喜欢迁就比人,也是一种比喻,WebRTC所支持的后台架构非常多(比如 Mixer, Mesh,Router),而且谷歌认为这些后台实现都比较简单,所以既没有开放后台相关的源码,也没有提供统一的后台解决方案。这种开放式的设计思路非常好,但副作用就是实现成本高。在真刀真枪的项目落地时,小规模的公司或者开发者就很容易被这种技术门槛挡在门外。尤其是想要将 WebRTC 真正应用到企业级解决方案中,面对录制和存档的刚性需求,就需要花费大量时间进行定制开发。

方案的确立

了解到 WebRTC 的这些特点后,我们的互通方案也就比较清晰了:

首先,小程序音视频的特点是接口简单,快速上手,这是小程序的优势;而这一点恰恰是WebRTC的劣势,所以我们没有必要在小程序端为WebRTC暴露十几个接口类,而是继续采用小程序音视频的 <live-pusher> 和 <live-player> 标签来解决问题。

其次,WebRTC 的后台没有官方实现,那就意味着这里有很大的发挥空间,腾讯视频云就可以实现一套WebRTC后台并将其同小程序音视频所使用RTMP后台进行打通。简单来说,腾讯视频云要在小程序音视频和WebRTC之间充当红娘(更确切的说,应该是翻译员)的角色。

但是看过《新闻联播》里国家领导人之间谈话镜头的人都知道,这种翻译是会影响交流速度的。小程序音视频和WebRTC之间互通,中间引入一个翻译员,是不是通讯延时也就增加了?

其实不会,因为小程序音视频和WebRTC的视频编码标准在常规应用场景中是一致的,都是H.264标准,这是音频格式不同而已。这就意味着,翻译员要做的事情很少,两边基本都能挺对对方在说什么,所以延时不会增加太多。

成功的握手

下图所展示的就是腾讯视频云在小程序音视频和WebRTC互通问题上所采取的方案:

(1)首先,微信端的小程序通过腾讯视频云SDK将音视频流推送到腾讯云 RTMP 服务器。

(2)其次,腾讯云 RTMP 服务器的会对音视频数据进行初步的转化处理,然后透传给腾讯视频云的实时音视频后台集群。

(3)再次,实时音视频后台会再次将数据交给一个叫做 WebRTC-Proxy 的模块,就在这里, WebRTC-Proxy 要将来自小程序音视频的音视频数据翻译成 WebRTC 理解的“语言”。

(4)最后,在PC上的Chrome浏览器,就可以通过浏览器内置的WebRTC模块跟 WebRTC-Proxy 通讯,进而看到小程序端的视频影像。

(5)上面的四个过程倒过来,就可以实现双向视频通话;而将腾讯视频云作为星型结构的中心节点,多个端(不管是小程序还是Chrome浏览器)都接入进来,那就可以形成多人音视频解决方案。

打通房间逻辑

仅仅完成了音视频数据在小程序和WebRTC之间的握手还远远不够,因为在一次成功的音视频通话背后,不仅仅是把一端的音视频数据传递到另一端这么简单,还有状态的同步和成员间的状态协同。

比如多人视频通话中,涉及到呼叫和接通的流程,其中一方如果挂断了,其他人要收到挂断的通知。同时,如果有新的参与者加入,那么其他人也要收到相应的通知。WebRTC 中有很多组件,比如 RTCPeerConnection 就在处理上诉林林种种的逻辑。但是 WebRTC 的接口中引入的新名词非常多,对于初学者来说还是有一定的入门门槛,为了简化这里的逻辑,我们引入一个叫做“房间”的概念。

所谓房间(Room),就是把同时参与视频通话的各方圈在一起的一个东西。比如双人通话中,通话中的两个人 A 和 B 就可以认为在一个房间中。再比如在多人通话中,通话中的五个人(A B C D E)也可以认为是在一个房间里。

有了房间的概念,那我们就可以对刚才说的状态协同用两个简单的动作描述一下:如果有一个人加入了视频通话,那么就可以理解为他/她已经进房(EnterRoom)了;如果有一个退出了视频通话,那么就可以理解为他/她已经离开房间(LeaveRoom)了。而房间的门板上始终写着:“目前在房间里有哪几个人”。

有了房间的概念,我们就可以将小程序的两个简单的 <live-pusher> 和 <live-player> 标签,同 WebRTC 那一套复杂的 API 进行功能上的对齐,我们甚至不需要修改我们在第一版中定义的接口,就可以达成这个目标:

(1)<live-pusher> 的 url 接口不再传递 rtmp:// 协议的推流地址,而是传递 room:// 协议的推流地址。room:// 协议的使用方式可以参考我们的原理版文档 DOC

(2)<live-pusher> 标签在 start 成功之后,就相当于成功进入一个 room,之后,您可以通过 onPushEvent (PUSH_EVT_ROOM_USERLIST = 1020) 事件,收到房间里还有那些人的信息。在视频通话期间,房间内各个成员的进进出出,也都会通过这个事件通知给您的小程序代码。

(3)ROOM_USERLIST 里每一项都是一个二元组(如果是 1v1 的视频通话,ROOM_USERLIST 里只会有一个人): userid 和 playurl。 userid 代表是哪个用户, playurl 则是这个用户远程画面的播放地址。您要做的只是使用 <live-player> 标签播放这些远程画面的图像和声音而已。

(4)在 WebRTC 这一端,您可以参考我们的 webrtc API,这套 API 相对于 WebRTC 原生的 API,更适合初学者使用。

MH小夜雨时学生回答于

可以先搞个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/
隨心之所願冒泡算法工程师。回答于

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

  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 密码

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

上传按钮

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

选择模块

上传成功

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

查看开发域名

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

修改客户端配置

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

登录测试

扫码关注云+社区