vonage音视频基本使用--web@opentok/client

vonage使用体验

总体来说，vonage算是比较偏向于原生的一个音视频三方包，提供了很多类似原生的api，有些甚至就是原生的api接口包了一层。而这样的一种形式也给开发带来了比较舒适的体验，能很清楚的了解到他的整个运行逻辑，不像腾讯音视频一样，封装了很多层，添加了很多他们自己的功能和服务，vonage更偏向于开发者自行去添加功能，去扩充。

官网链接: tokbox.com/developer/s...

主要开发方向：web端引用方式： @opentok/client

前期需求

apikey: 使用权限key sessionId: 生成的会话ID 有这两个才能OT.initSession生成一个会话对象

javascript 复制代码

import OT from "@opentok/client";

const session = OT.initSession(apiKey, sessionId);

音视频主体

会话主体

OT.initSession(apiKey, sessionId)会生成一个会话对象，这个对象是的音视频主体，几乎所有的操作都与之息息相关。例如 session.connect 创建 session.on 监听 session.publish 创建输出 ......

输入主体

subscriber = session.subscribe(......) subscriber指向音视频的输入主体，扬声器视频之类，能控制接收到的声音画面以及托管到哪个dom节点

javascript 复制代码

// 一般在session初始化成功后创建
session.on('streamCreated', function(event) {
 // opentok-subscriber就是要指向的dom
 subscriber = session.subscribe(event.stream, 'opentok-subscriber', {
   insertMode: 'append',
   width: '100%',
   height: '100%'
   // 这边还可以添加其他各种配置
 });
});

输出主体

publisher = OT.initPublisher(......) publisher指向的刚好和subscriber相反，是对外的输出设备，麦克风摄像头之类，而他提供的方法和subscriber基本一致。但很显然他的生成方式不同，一个是session，一个OT。所以他的使用需要进行挂载到session.

javascript 复制代码

publisher = OT.initPublisher('opentok-publisher', {
  insertMode: 'append',
  // publisher 和 subscriber都可以通过videoSource audioSource来控制设备的使用、校验、拒绝等操作
  videoSource,
  audioSource,
  // 也可以设置对应的分辨率，绝大多数情况默认都指向较低的分辨率
  resolution: '1920x1080',
  width: '100%',
  height: '100%'
});
// handleError 是对挂载创建失败的处理
session.publish(publisher ,handleError);

用户主体

session会监听每个进入会话的对象，并且能直接拿到

javascript 复制代码

session.on("connectionCreated", function(event) {
  console.log('已经连接到用户', event)
});

建立通话的基本原理

在我们初始化session之后，我们会紧接创建subscriber，这是建立通话的基本条件，也意味着我们进入了会话，进入了对应的局域网络，且随时能接收到他人数据流。

于是在双发准备建立通话时，就会去创建publisher，提供发送他人的数据流，当publisher建立成功后，数据流就会通过subscriber自动回显到dom节点上。

串联通话的桥梁

如果将subscriber和publisher建立通话比作桥梁的建立，那其中穿插的心链消息则可以作为建立桥梁过程中来来往往拉线造墩的工作，其实开发人员做的更多的也是这一块。

vonage有自己的一套心链消息，其实也就是ws的通话，session主体下的signal方法。

javascript 复制代码

// 消息的发送
session.signal({
  type: 'videoListener',
  // 可以指向一个要发送的用户主体
  to: connection,
  // 这里就是一些和另一端商量的业务数据
  data: {
    type,
    callType: callType.value,
    ...option
  }
});

// 消息的接收 一般初始化之后就会创建这个监听
session.on("signal:videoListener", function(event) {
  onSignal(JSON.parse(event.data ?? '{}'))
});

通过signal发送的一些消息可以告诉对方准备打电话了还是挂断了之类，当然不用signal也是完全没有问题，其他的ws都可以。

一些坑

vonage的重连机制有点问题，长时间挂机可能会导致session主体上的session.on("connectionCreated",()=>{})方法失效，换句话说就是有新的用户进来就接收不到了。（目前解决办法：过一段时间对session进行销毁，重新建立）
初始化很快，但接入用户进入会话列表需要时间，不能一开始就进行通话之类，至于时间看网络情况，一般1~3s。（解决办法：加个loading吧）
OT不存在销毁这个操作，所以即使调用了session.disconnect()，那也只是销毁session，所以一定要妥善处理，不然会导致多个视频音频使用。