安全帽 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()
  }

2.3 demo 样例源码

详见 demo 测试地址 右键点击查看页面源码