小程序实现双人视频通话流程

基于 <live-pusher> 和 <live-player> 所构建的双人视频通话功能。

技术指标

通讯延迟:300ms - 800ms

底层协议:基于 UDP 协议构建,并遵循 RTMP 标准对音视频数据进行切分和封装,支持丢包恢复和网络自适应。

安全加密:每次连接都独立启用一对全新的非对称加密密钥,整个通讯过程无法监听和篡改。

支持录制:如果需要可以在云端进行录制,适用于在线客服、金融开户等商用音视频解决方案,支持私有化部署。

内部原理

通讯的双方 各自创建一个 RTC 模式的  <live-pusher> 和 <live-player> , 然后URL 给对方。

流程

step1:首先A 跟业务服务器沟通,获取 push-url-A 和低延时的 play-url-A,服务器分配 URL 的方法参考 DOC。

step2:A 创建一个 RTC 模式的 标签,指定 url 为 step1 中获得的 push-url-A,并通过 bindstatechange 属性绑定一个 javascript 函数(比如叫 onPushEvent)。

step3:A 这边需要一些时间启动推流,推流开始以后, <live-pusher>会通过 onPushEvent 的 PUSH_EVT_PUSH_BEGIN(1002)事件通知给 A, 此时 A 可以向 B 发起通话请求,请求中可以携带 play-url-A。

step4:B 需要等待 UI 界面上的确认,如果 B 确认接通,接下来要做的就是创建一个 RTC 模式的 <live-player> ,并指定 src 为 play-url-A。

step5:B 此时还要跟业务服务器沟通,获取 push-url-B 和低延时的 play-url-B,并创建一个 RTC 模式的  <live-pusher> 标签,指定 url 为 push-url-B,并通过 bindstatechange 属性绑定一个 javascript 函数(比如叫 onPushEvent)。

step6:B 此时需要一些时间启动推流,推流开始以后, <live-pusher> 会通过 onPushEvent 的 PUSH_EVT_PUSH_BEGIN(1002)事件通知给 B,之后 B 可以向 A 响应通话请求,请求中可以携带 play-url-B。

step7: A 此时要做的就是创建一个 RTC 模式的<live-player> ,并指定 src 为 play-url-B。

在真实的场景中,我们需要面对的业务逻辑远比简单的把 A 和 B 连接起来要复杂。

房间管理

以金融开户和保险定损为例,如果 A 端使用的是小程序,那么真正的 B 端一般情况下会是企业的客服职员(通常都是一个人),所以这里就牵扯到要给用户分配客服的逻辑。同时,如果目前所有的客服都是忙碌的,那就需要有排队等待的逻辑。

所以, 真实场景下的逻辑是这样的 : 客服 MM 在进入工作岗位后即创建好一个属于自己的“房间”,这个房间有三种状态:BUSY(占线)、IDLE(空闲) 以及 CLOSE(关闭)。处于 BUSY 状态的房间表示对应的客服正在跟用户进行沟通, IDLE 表示可以分配给新进来的呼叫,CLOSE 则表示客服 MM 已经下班了。

消息系统

在 A 和 B 之间搭建 IM 消息系统 也是必不可少的,一方面,如果 A 和 B 中某一方网络发生异常,那么文本消息可以用极低的带宽维持最基本的消息通讯;另一方面,消息系统对于事件的传递要比音视频通道更加可靠。

现代实时音视频系统一般都有数据通道和信令通道两个传输通道,这样设计的原因是音视频通道并不适合用于传输信令,比如 B 端的 通知音视频数据没有了,可能原因是 A 已经挂断,但也有可能是 A 的网络出现了长时间的波动。而基于消息系统的“挂断事件”则不需要考虑这种不确定性问题。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269