视频存储工具包#

介绍#

视频存储工具包 (VST),也称为 VMS(视频管理系统),管理音频和视频流,并提供对存储中离线流的按需访问。它接受来自前端 UI 应用程序的 WebRTC 流,并输出 RTSP 流以进行进一步处理。它还负责将头像动画流传输到前端 UI 应用程序。VST 有效地管理适合当前可用带宽的流质量。它使用 WebRTC 数据通道向前端 UI 提供低带宽事件。VST 还提供 API 来下载包含用户会话音频的视频剪辑,以供离线分析。

Tokkio VST overview Diagram
  • 输入

    1. 来自浏览器客户端的摄像头流音频和/或视频;

    2. OV-渲染器提供的头像 udp 流

  • 输出

    1. 在浏览器客户端上渲染的头像 WebRTC 输出流;

    2. 到聊天控制器(音频)和 DS(视频)的 RTSP 流

    3. Redis 通知下游服务,通知新的摄像头流/会话

功能#

  1. 使用硬件加速 WebRTC 协议进行实时和录制视频的媒体流传输。

  2. 以直通和多播模式进行 RTSP 流传输。

  3. RTP-UDP 流传输。

  4. 具有老化策略的视频存储和录制。

  5. 支持 H.264 和 H.265 视频格式。

  6. 通过 IP 地址和/或 RTSP URL 手动管理设备。

  7. 提供 REST API 以编写客户端应用程序来控制和配置 VST。

  8. 支持 Redis 消息总线来发布设备添加/移除事件。

  9. Prometheus/Grafana 集成,用于发布 VST 统计信息。

  10. 云原生。以容器形式部署。

VST 架构#

VST architecture

UI 交互#

WebRTC & WebSocket 工作流程

VST WebRTC WebSocket workflow

VST Web Streamer 使用指南#

VST Web Streaming 库封装了 WebRTC、WebRTC 信令和 VST API 的复杂性,为开发人员提供易于使用的单次调用 API 来执行 WebRTC 流传输。

API#

更新 lib 配置#

streamManger.updateConfig ({
inboundStreamVideoElementId: string,
outboundStreamVideoElementId?: string,
connectionId?: string,
queryParams?: string,
enableWebsocketPing?: boolean,
websocketPingInterval?: number,
vstWebsocketEndpoint: string,
enableLogs?: boolean,
enableMicrophone?: boolean,
enableCamera?: boolean,
websocketTimeoutMS?: number,
streamType: StreamType,
enableDummyUDPCall: boolean,
sendCustomWebsocketMessage?: (msg: string) => boolean,
firstFrameReceivedCallback?: () => void,
errorCallback?: () => void,
successCallback?: () => void,
closeCallback?: () => void,
});
VST 配置 :Widths: 25, 25, 25, 25 :header-rows: 0#

键名

描述

可选/必需

默认值

inboundStreamVideoElementId

将显示入站流的视频元素 ID

必需

未定义

outboundStreamVideoElementId

将显示摄像头流的视频元素 ID

可选

未定义

connectionId

WebSocket 连接的连接 ID

可选

随机 UUID

queryParams

与 WebSocket 连接一起传递的查询参数

可选

空字符串

enableWebsocketPing

启用 WebSocket Ping,以防止连接因不活动而断开

可选

true

websocketPingInterval

更改 WebSocket Ping 消息间隔

可选

2000

vstWebsocketEndpoint

VST WebSocket 端点。通常以 /vms/ws 结尾

必需

未定义

enableLogs

启用库日志以进行调试

可选

true

enableMicrophone

为出站流启用麦克风

可选

true

enableCamera

为出站流启用摄像头

可选

true

websocketTimeoutMS

Websocket 超时

必需

5000

streamType

支持的 VST 流类型为 ‘live’、‘replay’ 和 ‘streambridge’

必需

streambridge

enableDummyUDPCall

仅用于调试目的。如果启用,VST 将为入站流启动一个虚拟 UDP 流

必需

false

sendCustomWebsocketMessage

向 VST 发送任何自定义消息

可选

() => {}

firstFrameReceivedCallback

当视频元素接收到第一帧时,将触发回调

可选

() => {}

errorCallback

如果在流传输期间或连接建立期间发生任何错误,将触发回调

可选

() => {}

successCallback

如果流传输成功,将触发回调

可选

() => {}

closeCallback

当库内部连接关闭并完成清理时,将触发回调

可选

() => {}

使用流配置启动流#

streamManger.startStreaming({
streamId?: string,
startTime?: string,
endTime?: string,
options: {
rtptransport: string,
timeout: number,
quality: string,
overlay?: {
objectId?: number[],
color?: string,
thickness?: number,
debug?: boolean,
needBbox?: boolean,
needTripwire?: boolean,
needRoi?: boolean,
}
}
});
VST 配置#

键名

描述

可选/必需

默认值

streamId

将在视频播放器中流式传输的传感器流的流 ID

可选

未定义

startTime

UTC 格式的开始时间。这是重放流所必需的

可选

未定义

endTime

UTC 格式的结束时间。这是重放流所必需的

可选

未定义

options

流的选项。选项包括启用叠加、边界框、流质量等功能。

可选

未定义

rtptransport

WebRTC 特定设置。保留默认值

必需

udp

timeout

WebRTC 特定设置。保留默认值

必需

60

quality

WebRTC 特定设置。可以使用此字段控制流质量。允许的值为 ‘auto’、‘low’、‘medium’、‘high’ 和 ‘pass-through’

必需

auto

overlay

叠加相关选项,如叠加颜色、粗细等。

可选

未定义

objectId

用于叠加的对象 ID 过滤器。允许使用 objectIds 数组作为过滤器

可选

未定义

color

叠加的颜色

可选

未定义

thickness

叠加或边界框的粗细

可选

未定义

debug

启用调试叠加

可选

未定义

needBbox

启用边界框

可选

未定义

needTripwire

启用绊线叠加

可选

未定义

needRoi

启用 ROI 叠加

可选

未定义

停止流#

streamManger.stopStreaming();

获取对等连接对象#

const inboundObject = streamManger.getInboundPeerConnectionObject();
const outboundObject = streamManger.getOutboundPeerConnectionObject();

获取对等 ID#

const inboundPeerId = streamManger.getInboundStreamPeerId();
const outboundPeerId = streamManger.getOutboundStreamPeerId();

发送自定义 WebSocket 消息#

const message = "Hello";
const isSuccess = streamManger.sendCustomWebsocketMessage(message);
if (isSucess) console.log("Success");

获取流配置#

const streamConfiguration = streamManger.getStreamConfig();

获取 Lib 配置#

const libConfiguration = streamManger.getConfig();

支持的用例#

Tokkio 流传输#

  • 入站流

Tokkio 入站流用例。该库支持 Tokkio 用例的入站视频流。这通常用于流式传输数字人头像。

  • 出站流

Tokkio 出站流用例。该库支持出站视频流。摄像头或麦克风或两者都可以被录制并通过出站流发送到 VST。在 Tokkio 用例中,出站流与入站流协同工作。

示例#

以下部分展示了最简工作示例。

Tokkio 流传输#

仅入站流

const streamManger = new StreamManager();
streamManger.updateConfig({
inboundStreamVideoElementId: 'unqiue-video-element-id',
connectionId: 'unique-uuid',
enableWebsocketPing: true,
vstWebsocketEndpoint: 'ws://10.41.25.11:30000/vms/ws',
enableLogs: false,
errorCallback: () => {console.log('Error Callback')},
successCallback: () => {console.log('Success Callback')},
});
streamManger.startStreaming();

出站和入站流

const streamManger = new StreamManager();
streamManger.updateConfig({
inboundStreamVideoElementId: 'unqiue-video-element-id',
connectionId: 'unique-uuid',
enableWebsocketPing: true,
vstWebsocketEndpoint: 'ws://10.41.25.11:30000/vms/ws',
enableLogs: false,
enableMicrophone: true,
enableCamera: true,
errorCallback: () => {console.log('Error Callback')},
successCallback: () => {console.log('Success Callback')},
});
streamManger.startStreaming();

VST 配置#

以下 VST 配置选项可以在 tokkio-app-params.yaml 文件中修改。为了使摄像头和头像流通过 webRTC 工作,应至少提供一个有效的 turnserver (coturn/twilio) 或有效的反向代理服务器。

VST 配置#

stunurl_list

设置 stun URL 列表,它会发现它们的公共 IP 和 NAT 类型

[“stun.l.google.com:19302”,”stun1.l.google.com:19302”]

static_turnurl_list

具有长期凭据机制的 TURN 服务器列表。当由于 NAT 穿越问题而无法进行直接对等通信时,TURN 提供了一种中继机制来进行通信。

[“admin:admin@10.0.0.1:3478”, “admin:admin@10.0.0.1:3478”]

use_coturn_auth_secret

为 coturn 启用身份验证密钥机制

false

coturn_turnurl_list_with_secret

具有短期凭据机制的 co-turn 服务器列表。要使用此配置,use_coturn_auth_secret 应设置为 true

[“10.0.0.1:3478”:<secret_key>, “10.0.0.1:3478”:<secret_key>]

use_twilio_stun_turn

启用使用 twilio stun 和 turn 服务器

false

twilio_account_sid

twilio 帐户用户名。应将配置选项 use_twilio_stun_turn 设置为 true 以启用使用 twilio 服务器

“”

twilio_auth_token

twilio 帐户的身份验证令牌

“”

use_reverse_proxy

使用反向代理而不是 turnserver (coturn/twilio)。RP 是面向公众的服务,它直接接收和处理客户端流量,执行适当的路由,使流量到达 tokkio 集群 VPC。

false

reverse_proxy_server_address

如果 use_reverse_proxy 设置为 true,则设置反向代理服务器地址和端口。也可以使用环境变量 REVERSE_PROXY_SERVER_ADDRESS 来设置 ip_address。

10.0.0.1:100

max_webrtc_out_connections

设置 webrtc 出站连接的最大计数,即头像流

8

max_webrtc_in_connections

设置 webrtc 入站连接的最大计数,即摄像头流

3

grpc_server_port

设置 GRPC 服务器端口。GRPC 服务器用于与 ov-renderer 进行端口协商,以接收头像 udp 流

50051

webrtc_in_audio_sender_max_bitrate

设置 web-UI 用于摄像头流的最大比特率(kbps)

128000

webrtc_in_video_degradation_preference

设置 webrtc 发送器用于摄像头流的降级偏好。当网络条件恶化时,它控制媒体流的质量(分辨率或帧率)

“framerate”

total_video_storage_size_MB

设置用于录制摄像头流的最大视频录制大小

10000

always_recording

设置始终录制开启或关闭

false

gpu_indices

设置 GPU 索引以在 vst 容器内使用特定的 gpu 设备,如果容器内可见多个 gpu 设备

[]

webrtc_port_range

设置 webrtc 最小和最大端口范围。这应与 VST 微服务 helm-chart 中的 nodePort 范围同步。由于单独的 RP 实例,VST 对 webrtc 媒体流量使用 nodeports

min 30001, max 30030

use_software_path

如果 gpu 不可用,则启用或禁用软件路径。

false

enable_websocket_pingpong

启用 websocket 定期 ping pong。这是为了避免由于代理/LB 或任何防火墙策略导致的 websocket 连接断开

false

websocket_keep_alive_ms

websocket 定期 ping pong 时间(毫秒)

5000

WebRTC 介绍#

  1. 介绍:WebRTC 是一种开源技术,允许在 Web 浏览器和设备之间直接、实时地进行音频、视频和数据通信,而无需额外的软件或插件。它使用户能够直接通过 Web 浏览器进行语音和视频通话、共享文件或进行文本聊天,从而使在线通信更加无缝和易于访问。它支持将视频实时流式传输到 Web 浏览器,例如现场体育比赛或音乐会。

  2. WebRTC 对等方:WebRTC 对等方就像两个人试图通过互联网进行对话。它们可以是您的计算机、电话或任何可以使用 Web 浏览器的设备。这些对等方希望直接相互交谈,而无需中间人来回传递消息。这种直接连接允许更快的通信,这对于视频通话或实时视频流等非常有用。

  3. ICE 服务器:ICE 服务器就像有用的指南,帮助 WebRTC 对等方在互联网上找到彼此。想象一下,您正试图在一个大城市与朋友见面,但您不知道他们的确切位置。ICE 服务器就像信息亭,为您提供方向并帮助您在城市复杂的街道网络(在本例中为互联网)中导航以找到您的朋友。

  4. ICE 候选者:ICE 候选者就像到达您在城市中的朋友的不同可能路线。每个候选者代表连接两个 WebRTC 对等方的潜在路径。有些路线可能是直接的(例如直接走到您的朋友那里),而另一些路线可能更迂回(例如乘坐公共汽车或地铁)。WebRTC 系统会尝试这些不同的路线,以查看哪条路线最适合连接对等方。

  5. WebRTC 信令:WebRTC 中的信令就像一个共同的朋友帮助两个人见面。在两个 WebRTC 对等方可以开始直接对话之前,他们需要交换一些基本信息,例如他们在哪里以及如何联系到他们。信令过程处理此初始信息交换。这类似于您的共同朋友可能会告诉您和您的另一个朋友何时何地见面,但不会加入你们的对话。

  6. 对等连接:对等连接就像互联网上两个设备之间的直接、私有电话线。想象一下,您和一位朋友有一部特殊的细绳电话,可以在任何距离上工作。设置好后,您可以交谈、共享图片,甚至玩游戏,而无需任何人在中间。这种直接链接允许更快的通信,并且对于视频通话等应用程序特别有用。

从更技术的角度来说,对等连接支持两个设备之间的直接通信,而无需通过中央服务器进行路由。这种对等方法使连接更加高效并减少延迟,这对于实时应用程序至关重要。

  1. WebRTC 连接工作流程:下图描述了使用 TURN 服务器时 Tokkio 中的技术 WebRTC 工作流程。为简单起见,该图仅描述了 Tokkio 工作流程的麦克风流对等连接部分。头像流对等连接的工作流程类似。您可以将对等方 A 视为 Tokkio UI,将对等方 B 视为 Tokkio 上下文中的 VST。

VST WebRTC workflow
  1. GetUserMedia API:GetUserMedia 是几乎所有现代 Web 浏览器中内置的 API。该 API 使 UI 应用程序能够获取用户的摄像头和麦克风流。例如,每当您从 Web 浏览器(Zoom、Facetime 或 Teams)进行视频通话时,UI 应用程序都会通过 GetUserMedia API 访问您的摄像头。

  2. 将 WebRTC 与 GetUserMedia API 结合使用:WebRTC 是一种将实时数据从一个地方发送到另一个地方的技术,而 GetUserMedia 是一种从 Google Chrome 等 Web 浏览器收集摄像头和麦克风流的 API。如果我们将 WebRTC 协议与 GetUserMedia API 结合使用会怎么样?我们可以使用 GetUserMedia API 从一个 Web 浏览器收集摄像头和麦克风流,然后通过 WebRTC 协议将其发送到世界其他地方的另一个 Web 浏览器。我们可以实现所有这一切,同时保持低延迟。

VST WebRTC & GetUserMedia