wcy_webrtc

v1.0.1

Published

a month ago

快速为项目引入webrtc能力，简单调用，监听回调就能实现浏览器外呼电话

0High
0Medium
0Low

zhouzhoulzlqd

webrtc jssip sip voip phone call 直拨外呼

WCY WebRTC SDK

基于 JsSIP 封装的 WebRTC 直拨外呼 SDK，支持在浏览器端快速实现电话外呼功能。

安装方式

方式一：NPM 安装（推荐）

npm install wcy_webrtc
# 或
yarn add wcy_webrtc
# 或
pnpm add wcy_webrtc

方式二：UMD 直接引入

<script src="dist/wcywebrtc.umd.js"></script>

使用方式

Vue 3 中使用

<template>
  <div id="wcywebrtcWrapper"></div>
  <button @click="handleCall">拨打电话</button>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import WcyWebRTC from 'wcy_webrtc'

const wcyInstance = ref(null)

onMounted(() => {
  wcyInstance.value = new WcyWebRTC({
    config: {
      apiKey: 'your-api-key',
      callerNbr: '主叫号码',
      isNeedUI: false,
      audioDir: '',
      isNeedSimpleToast: true
    },
    eventObj: {
      instanceCompleteEvent: (result) => {
        console.log('实例化事件:', result)
        if (result.status === 'then') {
          // 实例化成功后获取分机信息
          wcyInstance.value.getExtensionInfo()
        }
      },
      getExtensionSuccessEvent: (result) => {
        console.log('获取分机事件:', result)
        if (result.status === 'then') {
          // 获取分机成功后初始化 JsSIP
          wcyInstance.value.init()
        }
      },
      initCompleteEvent: (result) => {
        console.log('初始化事件:', result)
      },
      callFailedEvent: (result) => {
        console.log('呼叫事件:', result)
      }
    },
    callOption: {},
    domOrClass: {
      wcywebrtcWrapper: '#wcywebrtcWrapper'
    }
  })
})

const handleCall = () => {
  if (wcyInstance.value?.isRegisteredAndIsConnected()) {
    wcyInstance.value.startCall('被叫号码')
  }
}
</script>

React 中使用

import { useEffect, useRef } from 'react'
import WcyWebRTC from 'wcy_webrtc'

function PhoneComponent() {
  const wcyRef = useRef(null)

  useEffect(() => {
    wcyRef.current = new WcyWebRTC({
      config: {
        apiKey: 'your-api-key',
        callerNbr: '主叫号码',
        isNeedUI: false,
        audioDir: '',
        isNeedSimpleToast: true
      },
      eventObj: {
        instanceCompleteEvent: (result) => {
          console.log('实例化事件:', result)
          if (result.status === 'then') {
            wcyRef.current.getExtensionInfo()
          }
        },
        getExtensionSuccessEvent: (result) => {
          console.log('获取分机事件:', result)
          if (result.status === 'then') {
            wcyRef.current.init()
          }
        },
        initCompleteEvent: (result) => {
          console.log('初始化事件:', result)
        },
        callFailedEvent: (result) => {
          console.log('呼叫事件:', result)
        }
      },
      callOption: {},
      domOrClass: {
        wcywebrtcWrapper: '#wcywebrtcWrapper'
      }
    })

    return () => {
      wcyRef.current?.stopSipJS()
    }
  }, [])

  const handleCall = () => {
    if (wcyRef.current?.isRegisteredAndIsConnected()) {
      wcyRef.current.startCall('被叫号码')
    }
  }

  return (
    <div>
      <div id="wcywebrtcWrapper"></div>
      <button onClick={handleCall}>拨打电话</button>
    </div>
  )
}

export default PhoneComponent

UMD 方式使用

<!DOCTYPE html>
<html>
<head>
  <script src="dist/wcywebrtc.umd.js"></script>
</head>
<body>
  <div id="wcywebrtcWrapper"></div>
  <button id="callBtn">拨打电话</button>

  <script>
    var instance = new wcywebrtc({
      config: {
        apiKey: 'your-api-key',
        callerNbr: '主叫号码',
        isNeedUI: false,
        audioDir: '',
        isNeedSimpleToast: true
      },
      eventObj: {
        instanceCompleteEvent: function(result) {
          console.log('实例化事件:', result)
          if (result.status === 'then') {
            instance.getExtensionInfo()
          }
        },
        getExtensionSuccessEvent: function(result) {
          if (result.status === 'then') {
            instance.init()
          }
        },
        initCompleteEvent: function(result) {
          console.log('初始化事件:', result)
        },
        callFailedEvent: function(result) {
          console.log('呼叫事件:', result)
        }
      },
      callOption: {},
      domOrClass: {
        wcywebrtcWrapper: '#wcywebrtcWrapper'
      }
    })

    document.getElementById('callBtn').onclick = function() {
      if (instance.isRegisteredAndIsConnected()) {
        instance.startCall('被叫号码')
      }
    }
  </script>
</body>
</html>

API 文档

构造函数参数

| 参数 | 类型 | 说明 | |------|------|------| | config.apiKey | string | API 密钥 | | config.callerNbr | string | 主叫号码 | | config.isNeedUI | boolean | 是否需要内置 UI | | config.audioDir | string | 音频资源路径 | | config.isNeedSimpleToast | boolean | 是否显示简单提示 | | eventObj | object | 事件回调对象 | | callOption | object | 呼叫选项 | | domOrClass | object | DOM 绑定配置 |

主要方法

| 方法 | 说明 | |------|------| | getExtensionInfo() | 获取分机信息 | | init() | 初始化 JsSIP | | startCall(number) | 发起呼叫 | | endCall() | 挂断电话 | | hold() | 保持通话 | | unhold() | 恢复通话 | | mute() | 静音 | | unmute() | 解除静音 | | sendDtmf(num) | 发送按键音 | | isRegisteredAndIsConnected() | 检查是否已注册并连接 | | stopSipJS() | 停止 SDK |

呼叫状态码

| 状态码 | 说明 | |--------|------| | 0 | 等待呼叫 | | 1 | 响铃中 | | 2 | 接听中 | | 3 | 拒接 | | 4 | 通话中 | | 5 | 已挂断 | | 6 | 断连/掉注册 |

如何编译模块

npm install
npm run build

发布到 NPM

npm login
npm publish

Demo 介绍

demo 需要放到 https 环境运行，避免因为被浏览器拦截导致权限问题。

注意事项

WebRTC 需要 HTTPS 环境或 localhost
需要用户授权麦克风权限
请确保 apiKey 和 callerNbr 配置正确