资讯专栏INFORMATION COLUMN

小程序音视频功能的原理及应用

miqt / 1521人阅读

摘要:今天的话题分四部分,第一个是小程序音视频能拿来做什么,第二部分是将其内部是怎么做到的第三就是讲腾讯视频云的音视频技术的一些技术细节第四个是介绍一下微信上做音视频的应用的一些审核问题以及应对方案。

本文由云+社区发表

作者:常青

腾讯视频云是做什么的?腾讯视频云既不做数据库,也不做存储,也不做网络,我们只做音视频服务,也就是直播、点播、视频通话、这类面向B类客户的音视频PAAS业务。

今天主要是跟大家讲的是腾讯视频云在过去一年时间里跟小程序结合,看看怎么去把这样一个高技术含量的一个能力去跟小程序这样一个非常轻量级的平台发挥1+1>2的效应。

今天的话题分四部分,第一个是小程序音视频能拿来做什么,第二部分是将其内部是怎么做到的?第三就是讲腾讯视频云的音视频技术的一些技术细节;第四个是介绍一下微信上做音视频的应用的一些审核问题以及应对方案。

我们现在开始第一部分。

我先开篇来个小故事,讲讲1944年,1944年其实是欧洲二战战场的最后的阶段,当时盟军有很多的战舰逼近欧洲战场,德国为了尽量减少这些战舰的威胁,就开发了反舰导弹。这个导弹其实说白了就是给重磅航空炸弹装了一个火箭发动机,点火之后就直接冲出去,威力是很大但准度很差,离远了投放很容易就偏离目标了。所以如果不解决制导问题,这种武器其实没什么用处。

当时太平洋战场的日本人为了解决这个问题,直接将人装在导弹里然后把门焊死,这种方法虽然简单有效,但毕竟并不适合德国。

德国人技术还不错,他们采用一个更加有技术含量的做法:在导弹前头装一个电视摄像头,讲摄像头捕获的影像通过导弹尾端的八木天先,直接传送给投放导弹的轰炸机(躲得目标远远的),在轰炸机上面则安装有一个电视接收器(请注意,这是在1944年,想想1944年我们在干嘛),这样以来,轰炸机上的投弹手就可以看到导弹前端的所有影像,再通过控制遥感直接操控导弹飞向目标战舰,这其实就是实时音视频技术在军事上的一个典型应用。

我们接下来不讲那么远的历史,我们讲讲2018年。2018年小程序在今年热度非常高,数量也特别多。但大家会看到很多小程序做的事情大多数对于H5公众号的翻版,功能无外乎还是那些。但我要告诉你,如果小程序跟音视频结合,有很多事情是H5做不了的事情,举个例子我们现在看到这里面视频通话应用。

我们先以平安95511为例,比如说早晨您开车上班,我知道北京的早高峰还是比较堵的,可能一不小心就跟别的车挤到一起擦花了,这时候你的选择就是打电话给保险公司报险,保险公司接下来会让你在事发地点慢慢等着,等半小时?等一小时?这要看当时交通情况或者拥堵程度了。

那现在有小程序在线定损方案,您只需要打开微信,搜索平安95511,也不用安装APP,1-2秒钟就能报险,大概2-3分钟就能把报险流程走完。

您可能会问,为什么通过视频的方案解决不通过电话呢?因为仅靠电话,保险公司并不能有效的区分电话的另一端是不是在骗保,而通过实时音视频通话,造假就几乎就不可能了。

接下来大家就问微信里视频通话为什么不能用呢?如果大家跟女朋友做一些很私密的聊天你用微信通话是可以的,它跟文字消息一样,全程不留底,绝大多是1v1通话都是p2p直连,即使过服务器的音视频流也只是简单的中转。但在商用音视频场景里,比如远程客服、远程医疗、远程定损等等,国家的相关法律法规就规定要全程录制,不然无法维护普通用户的合法利益。

除了平安这类比较偏保险行业的案例,新零售领域我们跟宝马也有一些合作。比如说您考虑一下宝马系的车,之前可能只能去4S店,虽然确实看真车比较直观,但最多也就是进去看看内饰,而且有不少腼腆的年轻人碍于面子并不想进宝马的店铺。通过远程视频的方式跟销售聊,您只需要在小程序里面搜索“宝马实车互动平台”,就有一个销售1v1跟您沟通,他/她会拿手机直接给你看内饰怎么样,外观怎么样,远程看各种细节,而且我们专门校调了720p的高清分辨率,绝对可以看清每一个细节。

当然还有远程庭审,以及远程医疗等项目,都有很多不错的应用案例。

这里我们就可以发现,小程序音视频可以解决两个现实的传统应用解决不了的问题:

第一个是传统电话只有声音没有画面,很多不好用语言表述的事情用小程序音视频就能很好的解决;第二,它可以很大程度上解决装一个有视频通话功能的APP非常费劲的事情。

接下来要从技术层面讲讲我们是怎么做到的,怎么实现这个能力,这个分成几部分:

首先,我们讲我们的音视频SDK嵌入到微信APP里面,然后外面包装了两个标签,一个叫,一个叫 ,然后用小程序的jsbridge做了内部的桥接。有了这样一个能力之后,我们现在其实具备了两个基础功能,一个是可以做到音视频流的上行,再有一个是做音视频流的下行。

上行和下行什么意思?上行是把本地的画面往服务器上传,下行就是把服务器的画面往本地拉,这个最典型的应用就是直播。大家可以看到我们如果假设像看到斗鱼、虎牙的直播不错,你回去可以用5分钟或者10分钟在小程序做一个,放一个,它可以传到腾讯云的边缘节点,通过转码集群进入CDN,再用一个进行播放,这可以组合出目前所有直播的应用能力。而直播质量的保证主要是在于CDN,CDN很大的一个作用不仅仅是下图片,也不仅仅是下文件,像视频类的CDN我们可以做到近几万几十万并发的,我们大型的直播活动、赛事直播都可以来实现。

但是有了这套架构之后有一个问题,它的应用场景还是比较偏小众的,所谓的娱乐直播、游戏直播,光看直播其实我觉得还是没有办法体现小程序的价值,接下来我们要做一些尝试,首先降低延时。就是主播这边说一句话、体育赛事的球进了你这边看大概需要5秒或者10秒。我们降低延时怎么做?很简单地思路就是把链路的传出延时降低,像这样一段链路它延时很高,我们采用加速节点,这些加速节点中间采用UDP直接传输,比如说我在北京,你在深圳,我们在北京找一个云上的节点,深圳找一个云上的节点,中间用专线打通,这样整个链路的延时是非常低的,单项传输延时可以控制在500毫秒以内。有了它可以监控一些监控摄像头这样一些场景。

但这样所用的场景还是有限,我们可以再拉一路低延时链路,这样就变成了大家看到应用场景非常广泛的双向视频通话。也就是,A有一个链路到B那边,B也有一个链路到A这边,延时都很低,A和B两边就可以沟通了(当然还要做好回音消除的工作)。

大家会说有双路是不是也可以做多路呢?当然可以,只要手机性能扛得住,并行多路也是没有问题,目前我们可以同时开启8路小画面,再高就不行了,手机性能可能扛不住。

但是有这个的话,其实我们会发现还不够优秀,我们其实还需要做一次延伸,将它跟Chrome浏览器打通。谷歌在收购了音视频公司之后进行开源,这套技术在Chrome浏览器是有的,我们可以把这两个链路通过远端的协议模块进行互通,这样就可以做到微信上用小程序,但是在PC上可以用浏览器。这对于什么场景非常有用呢?对于企业的服务场景,尤其是视频服务,对于客服人员是用PC但是对于有问题咨询的用户而言他们用微信就可以解决了。

大家可以看到,类似这样的一些事情,如果真的要做成的话,除了像两端的能力之外,我们还需要说在服务端做一些事情。比如说像大家打10086都需要排队,很多时候告诉你坐席比较忙,主要是因为客服人员有限,客服人员有限我们就要有排队系统。

再包括像医院的场景,不仅仅是打通一个就可以,大家知道这医生站在这里它要接很多单的,不是一个视频聊天做完就搞定了,他要看客户的满意度,看客户的病历,这里面除了排队系统还有病历服务、建档服务这样一些事情,在审核里面周边的工作还是要做的。我今天被拉过来,我们后面也会跟小程序的云开发进行深度合作来减少云开发的复杂度。

同时,过去一段时间,我们在音视频质量上也做了不少优化,最新的微信版本中(目前尚未发布),在卡顿率上我们做了很大的改进,如上图。

最后一分钟说一下关于微信审核问题,我们和微信的团队一起想了很多办法来更好地解决国家的政策审核问题。腾讯云提供了1v1视频通话插件和1vn直播插件,前者主要用于解决在线客服场景的需求,后者则主要用于电商直播。这两款插件均有后台的AI和人工审核团队进行 7x24 小时的智能安全审核,所以政府部分同意授权使用这两款插件的小程序可以使用微信小程序的音视频能力。

此文已由腾讯云+社区在各渠道发布

获取更多新鲜技术干货,可以关注我们腾讯云技术社区-云加社区官方号及知乎机构号

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1193.html

相关文章

  • 前端面试题总结(js、html、程序、React、ES6、Vue、算法、全栈热门视频资源)

    摘要:并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题,由基础到困难循序渐进,适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快...

    pumpkin9 评论0 收藏0
  • 前端面试题总结(js、html、程序、React、ES6、Vue、算法、全栈热门视频资源)

    摘要:并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题,由基础到困难循序渐进,适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快...

    Carson 评论0 收藏0
  • 前端面试题总结(js、html、程序、React、ES6、Vue、算法、全栈热门视频资源)

    摘要:并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题,由基础到困难循序渐进,适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快...

    muzhuyu 评论0 收藏0
  • 前端面试题总结(js、html、程序、React、ES6、Vue、算法、全栈热门视频资源)

    摘要:并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题,由基础到困难循序渐进,适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快...

    li21 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<