2017年腾讯视频云团队跟微信小程序整合在一起

发表时间：2023-09-27 10:53:38

文章来源：炫佑科技

浏览次数：141

菏泽炫佑科技菏泽炫佑小程序开发菏泽炫佑app制作炫佑科技

腾讯视频云终端技术总监（常青），2008年毕业于腾讯，加入腾讯。一直从事客户研发相关工作。参与过PC QQ、手机QQ、IoT等产品项目。目前在腾讯视频云团队负责音频。视频终端解决方案的优化和实施，帮助客户以可控的研发成本投入获得业界**的音视频解决方案。我们目前的产品线包括：互动直播、点播、短视频、实时视频通话。图像处理、人工智能等。

我们分别做一下介绍。

什么是小程序音视频？

2017年，腾讯视频云团队与微信团队联合将视频云SDK与微信小程序集成，并以两个标签的形式开放内部功能。通过这两个标签，开发可以实现在线直播、低延时监控、两人视频通话、多人视频会议等功能。

所以呢？

（Web Real-Time）是一种支持网络浏览器进行实时语音对话或视频对话的技术。它是通过收购GIPS获得的技术。它不需要在浏览器上安装插件，通过它可以编写实时音频和视频。调用程序。

两者有什么区别？

如果你和我一样是一个实用主义者，那么我就简单地从实用的角度说出我的结论：小程序可以照顾手机和PC。

如果你对技术更感兴趣，那么我们可以从多个技术角度列出两者的区别。下面是详细的对比表：

从收购GIPS获得的（这里不得不提一下，我加入腾讯时**个所在的团队就是团队，当时的音视频产品还是从GIPS公司采购的，但是由于各种不靠谱的原因）微信小程序可以一个人开发么，后来改成自学路线）。因此，它的技术被完全保留并添加到浏览器核心中。而*近苹果也开始在浏览器中支持相关功能。

底层使用两种数据协议：RTP和RTCP。 RTP主要用于音视频数据传输，而RTCP一般用于控制。

这里就尴尬多了。一方面，系统本身的碎片化，使得“百花齐放”的具体表现成为一种场景。同时，iOS目前的嵌入式（即微信等应用中打开的各种嵌入式网页）不支持仍然是一个麻烦的问题。

相比之下，这不是一个团队或一个公司的问题，因为现在已经走标准路线了，所以每一个新功能首先确定标准，然后推动浏览器制造商（包括苹果）遵循。这里的故事比较多，时间也比较长。

但在桌面浏览器部分，目前在PC浏览器市场的地位决定了优势。开发无需安装插件即可实现自己想要的功能。

相比之下，由于缺乏原生支持，如果我们想要在PC上连接小程序音频和视频，我们需要安装浏览器插件或通过伪协议调用本地exe应用程序，例如： //start（和网页上的类似）。打开聊天窗口）。

不是零和游戏

小程序音视频和括号不是零和游戏。双方都有各自的优点和缺点。因此，本着“打不倒他们，就加入他们”的理念，腾讯视频云团队在2018年春节归来后就马不停蹄地开始了工作，承担了小程序音视频相关的工作和互操作性。

目前需要向各位开发汇报的是，在微信*新版本中，小程序音频和视频已经可以打通了。目前，可以在PC浏览器上与小程序进行实时音视频通信。

// 去做

当然，如果你想知道这个功能是如何实现的，可以继续阅读：

充分认识

就像结婚一样，既然你决定选择另一个人作为你的一生伴侣，那么你肯定会先深入了解他或她，比如性格、脾气、爱好等各方面。

同样的，我们要想把小程序音视频衔接好，就必须对其有更多的了解。这里我就谈谈我对这个“人”性格的一些理解。

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

个人开发者做微信小程序_微信小程序可以一个人开发么_个人开发微信小程序可以盈利吗

说你不好看只是我的一个比喻。我的意思是学习成本不低。虽然我做了很多通俗易懂的PPT来教大家如何入门，但是想要完全学会还是需要花很多时间的。冷静下来，慢慢把她当作你认可的目标，继续学习。但如果这是你**次恋爱（也就是你**次接触实时音视频），你会发现学习过程本身就是一个了解实时音视频技术细节的过程。

其次，她喜欢迁就他人，能够支持各种结构性的解决方案。

也比喻喜欢迁就别人。支持的后端架构有很多（如Mixer、Mesh等），而认为这些后端实现都比较简单，因此既没有开放后端相关的源码，也没有提供统一的解决方案。这种开放式的设计思想很好，但是副作用就是实现成本高。当真正的项目落地时，规模较小的公司或者开发很容易被这个技术门槛挡住。尤其是想要真正应用到企业级解决方案中，面对记录和归档的刚性要求，需要花费大量的时间进行定制开发。

制定计划

了解了这些特征后，我们的互操作计划就变得更加清晰：

首先，小程序音视频的特点是界面简单、上手快。这就是小程序的优势；而这恰恰是它的缺点，所以我们不需要在小程序端暴露十多个接口类，而是继续使用小程序音视频和标签来解决问题。

其次，后端还没有正式实现，这意味着还有很大的发展空间。腾讯视频云可以实现一个后端，与小程序音视频使用的RTMP后端对接。简单来说，腾讯视频云扮演的是小程序音视频之间的媒人（更准确地说是翻译者）的角色。

但看过《新闻联播》国家领导人对话的人都知道，这种翻译会影响沟通速度。如果小程序音视频互联，中间引入翻译器，通信延迟是否也会增加？

其实不是，因为小程序音视频编码标准和常规应用场景下的视频编码标准是相同的，都是H.264标准。这只是一种不同的音频格式。这意味着翻译人员要做的事情很少，双方基本都能听懂对方在说什么，因此延迟不会增加太多。

成功握手

下图是腾讯视频云针对小程序音视频及互通问题采取的解决方案：

（1）首先微信小程序通过腾讯视频云SDK将音视频流推送到腾讯云RTMP服务器。

（2）其次，腾讯云RTMP服务器会对音视频数据进行初步的转换处理，然后透传到腾讯视频云的实时音视频后端集群。

(3)同样，实时音视频后台会将数据交给一个叫-Proxy的模块。在这里，-Proxy 会将小程序音视频中的音视频数据翻译成可以理解的“语言”。

（4）*后PC上的浏览器可以通过浏览器内置模块与-Proxy进行通信，然后在小程序上看到视频图像。

（5）将上述四个过程颠倒过来，即可实现双向视频通话；而以腾讯视频云作为星型结构的中心节点，将多个终端（无论是小程序还是浏览器）连接起来，则可以形成多人音视频解决方案。

打通房间逻辑

仅仅简单地完成小程序和App之间音视频数据的握手是不够的，因为一次成功的音视频通话的背后，不仅仅是将音视频数据从一端传输到另一端那么简单，也是状态的同步。以及成员之间的地位协调。

例如，在多人视频通话中，涉及到呼叫和接通的过程。如果一方挂断，其他方将收到挂断通知。同时，如果有新的参与者加入，其他人也会收到相应的通知。里面有很多组件，比如处理各种逻辑。但界面中引入了很多新术语，对于初学者来说还是有一定的入门门槛。这里为了简化逻辑，我们引入一个概念，叫做“房间”。

所谓房间（Room），就是将同时参与视频通话的各方围成一圈的东西。例如2017年腾讯视频云团队跟微信小程序整合在一起，在两人通话中，通话中的两个人A和B可以认为是在同一个房间。再比如，在多人通话中，通话中的五个人（ABCDE）也可以认为是在同一个房间。

有了房间的概念，我们就可以用两个简单的动作来描述刚才提到的状态协作：如果一个人加入视频通话，那么可以理解为他/她进入了房间（）；如果有一个人退出视频通话，则可以理解为他/她已经离开房间（）。而且房间的门板上总写着：“目前房间里有多少人？”

有了房间的概念，我们就可以在功能上将小程序的两个简单的和标签与复杂的 API 集结合起来。我们甚至不需要修改我们在**个版本中定义的接口。为了实现这一目标：

（1）url接口不再传递rtmp://协议的推送地址，而是传递room://协议的推送地址。 room://协议的使用方法请参考我们的原理版本文档DOC。

（2）标签启动成功后，相当于成功进入一个房间。之后，您可以通过（ST = 1020）事件接收有关房间中那些人的信息。视频通话过程中，房间内每位成员的进出也会通过此事件通知到您的小程序代码。

(3) 中的每一项都是一个元组（如果是1v1视频通话，则里面只有一个人）：和。代表是哪个用户，是该用户远程屏幕的播放地址。您所要做的就是使用标签来播放这些远程场景的图像和声音。

（4）为此，您可以参考我们的API，它比原生API更适合初学者。

如何快速访问？

如果你想在一天内搞定小程序音视频互通，那么我建议你不要从头开始，因为这会花费你太多的时间去踩坑。我建议您直接使用我们的打包解决方案。该解决方案既可以帮助您完成快速访问，又可以满足某些定制需求。

另外，别忘了去微信=>发现=>小程序=>腾讯云视频云体验腾讯云官方Demo中的互操作效果。

标签说明

标签是基于互操作性并为了互操作性而实现的自定义组件。如果你想直接使用标签来完成对接，或者想了解内部原理，可以参考DOC。

版本要求效果演示

对接信息

阐明

下载链接

小程序源码

包含组件源代码和演示源代码

电脑源代码

基于实现的版本接入源码（/.js实现简单的房间管理功能，/.js包含API使用代码）

（）。压缩

后端源码

实现了一个简单的房间列表函数并生成了包含几个必需参数的代码。

。压缩

标签详细属性定义

属性

类型

价值

阐明

“1v3”

个人开发者做微信小程序_微信小程序可以一个人开发么_个人开发微信小程序可以盈利吗

必要时，标识组件使用的接口模板（如果用户需要自定义接口，请参阅）

”

必需，激活IM服务获取的AppID

”

必填，用户 ID

”

必要，身份签名，相当于登录密码

”

必填，房间号

”

必备，房间权限钥匙，相当于进入指定房间的钥匙

0~5

可选，默认5，美颜等级0~5

静音

真假

可选，默认false，是否静音

调试

真假

可选，默认false，是否打印推送调试信息

必要时，监听组件返回的事件

真假

可选，默认 false

IM开启时必要，监听IM返回的事件

操作界面

该组件包含以下操作接口。您需要先获取标签的引用，然后才能执行相应的操作。

函数名称

阐明

微信小程序可以一个人开发么_个人开发微信小程序可以盈利吗_个人开发者做微信小程序

开始（）

启动

暂停（）

暂停

()

恢复

停止（）

停止

()

切换相机

var webrtcroom = this.selectComponent("#webrtcroomid")
webrtcroom.pause();

复制

事件通知

该标签返回内部事件和 IM 消息事件。事件参数格式如下

"detail": {
  "tag": "事件tag标识，具有唯一性",
  "code": "事件代码",
  "detail": "对应事件的详细参数"
}

复制

示例代码

// Page.wxml 文件


// Page.js 文件
Page({
	data: {
		//...
		roomID: '',
		userID: '',
		userSig: '',
		sdkAppID: '',
		beauty: 3,
		muted: false,
		debug: false,
		enableIM: false
	},
    onRoomEvent: function(e){
        switch(e.detail.tag){
            case 'error': {
                //发生错误
                var code = e.detail.code;
                var detail = e.detail.detail;
                break;
            }
        }
    },
    onIMEvent: function(e){
        switch(e.detail.tag){
            case 'big_group_msg_notify': 
                //收到群组消息
                console.debug( e.detail.detail )
                break;
            case 'login_event': 
                //登录事件通知
                console.debug( e.detail.detail )
                break;
            case 'connection_event': 
                //连接状态事件
                console.debug( e.detail.detail )
                break;
            case 'join_group_event': 
                //进群事件通知
                console.debug( e.detail.detail )
                break;
        }
    },
  onLoad: function (options) {
		self.setData({
			userID: self.data.userID,
			userSig: self.data.userSig,
			sdkAppID: self.data.sdkAppID,
			roomID: self.data.roomID,
			privateMapKey: res.data.privateMapKey
		}, function() {
			var webrtcroomCom = this.selectComponent('#webrtcroom');
			if (webrtcroomCom) {
				webrtcroomCom.start();
			}
		})
	},
  	
})

复制

使用说明

请参考Demo部署确认您已开通相关服务并正确完成配置。

步骤1：下载自定义组件源码

它不是微信小程序原生提供的标签，而是一个自定义组件，所以需要额外的代码来支持这个标签。点击下载源码包，即可在文件夹中获取所需文件。

step2：将组件引入项目step3：获取关键信息

根据下表获取关键关键信息。这是使用腾讯云互通直播服务所需的信息：

钥匙

例子

影响

获取计划

用于计费和业务差异化

步骤1中获得

用户名

可以由您的服务器指定，或者使用小程序

加密字符串

相当于对应的登录密码

由您的服务器发出（PHP/JAVA）

12345

房间号

可以由您的服务器指定

加密字符串

门票：相当于进入的钥匙

由您的服务器发出（PHP/JAVA）

下载.zip，获取服务器发出的和的计算代码（生成和的签名算法为ECDSA-）。

第四步：进入房间

self.setData({
	userID: userID,
	userSig: userSig,
	sdkAppID: sdkAppID,
	roomID: roomID,
	privateMapKey: privateMapKey
}, function() {
	var webrtcroomCom = this.selectComponent('#webrtcroomid');
	if (webrtcroomCom) {
		webrtcroomCom.start();
	}
})

复制

界面定制

//**步：新建 /pages/templates/mytemplate 文件夹，并创建 mytemplate.wxml 和 mytemplate.wxss 文件
//第二步：编写 mytemplate.wxml 和 mytemplate.wxss 文件
//mytemplate.wxml

//mytemplate.wxss
.videoview {
  background-repeat:no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}

复制

//为  组件中的 webrtcroom.wxml 文件添加自定义模版

2017年腾讯视频云团队跟微信小程序整合在一起

相关案例查看更多

童装买家秀案例

方案小程序开发案例

定制蛙博士打印系统软件

炫佑开发北京嘉华ERP管理系统软件

上门预约小程序服务类开发

炫佑开发校园管理系统

全球钻价小程序和app案例

中民油气app开发案例

友情链接