@voyage-fe/helmet-video NPM

安全帽 SIP 视频通话 SDK

1、引言

1.1 概述

Sip 视频通话是引用 SIP.js 实现的一种视频通话技术，适用于支持 webrtc 的浏览器（ie11 及之前的版本不支持 webrtc）进行视频通话。SIP.js 是基于 JavaScript 编写的功能齐全的 SIP 堆栈。借助 SIP.js，我们可以利用 webrtc 的功能实现语音通话和视频通话，轻巧且易于使用。

1.2 在线调试（视频通话）demo 测试地址

打开测试地址
输入管理员账号、管理员密码及安全帽设备 ID（确保准确性）
点击呼叫即可进行视频通话

1.3 其他

部分浏览器版本不支持 webrtc 通话，如若通话失败，可通过以下地址检测浏览器是否支持；

检测地址

2、前端开发指南

2.1 引入 SDK

这里我们提供了 3 种引入方式，分别为 commonjs、esm、cdn 等方式

commonjs、esm 第一步安装 sdk
```
npm install @voyage-fe/helmet-video
```

commonjs 模块引入

const HelmetVideo = require('@voyage-fe/helmet-video')

esm 模块引入

import HelmetVideo from '@voyage-fe/helmet-video'

通过 cdn 引入

<script src="https://unpkg.com/@voyage-fe/helmet-video/dist/helmet-video.umd.js"></script>

引入成功后 HelmetVideo 会挂载到 window 上

2.2 实现安全帽视频通话

HelmetVideo 类型说明

// 回调函数，成功失败都会触发回调
/** 错误码
 *  0: 成功
 *  1: 未知错误
 *  1000: 配置初始化失败
 *  1001: 用户代理注册失败
 *  1002: 通话连接失败
 *  1003: WebRTC错误
 *  1004: 账户超过最大登录限制
 */
type CallbackFn = (ret: { type: 'success' | 'fail'; message: string; code: number }) => void

// 类初始实例化参数
interface InitPara {
  videoEl: HTMLVideoElement // 视频元素
  callback?: CallbackFn // 回调函数 非必传
}

// 发起呼叫时配置参数
interface CallConfig {
  deviceId: string // 安全帽设备 ID
  userName: string // 管理员账号
  password: string // 管理员密码
}

// HelmetVideo 类
declare class HelmetVideo {
  callback?: CallbackFn
  constructor({ videoEl, callback }: InitPara)
  // 发起呼叫
  handleCall(config: CallConfig): Promise<void>
  // 挂断通话
  hangup(): void
}

初始化 HelmetVideo (以 vue3 为例)

<template>
  <video ref="videoRef" class="w-full h-full"></video>
</template>

<script setup lang="ts">
  import HelmetVideo from '@voyage-fe/helmet-video'
  import type { CallbackFn } from '@voyage-fe/helmet-video'

  const videoRef = ref(null as unknown as HTMLVideoElement)

  let helmetVideo: HelmetVideo

  function initHelmetVideo() {
    const callback: CallbackFn = ret => {
      status.value = ret.type
      if (ret.type === 'fail') {
        // do something
      }
    }

    const config = {
      videoEl: videoRef.value,
      callback,
    }

    helmetVideo = new HelmetVideo(config)
  }

  onMounted(() => {
    initHelmetVideo()
  })
</script>

实现呼叫和挂断

import type { CallConfig } from '@voyage-fe/helmet-video'

// 发起呼叫
async function handleCall(config: CallConfig) {
  await helmetVideo.handleCall(config)
}

// 挂断通话
async function hangup() {
  helmetVideo.hangup()
}