基于vue3的音视频通话组件

1.支持语音通话. 2.支持视频通话.

PS:暂时只支持一对一通话

Demo

如何运行demo?

git clone https://github.com/Juenfy/vue-av-call.git
cd vue-av-call
npm install
npm link
npm run start-websocket
cd demo
npm install
npm link vue-av-call
npm run dev

快速开始

如何安装?

npm i vue-av-call

如何启动websocket服务?

cd node_modules/vue-av-call
# 默认8080端口
npm run start-websocket
# 指定端口
npm run start-websocket -- port=2346
# 开启wss ca证书链非必传
npm run start-websocket -- cert=/path/to/cert key=/path/to/key ca=/path/to/ca

如何使用?

//导入
import {AvCall} from "vue-av-call"
import * as call from "vue-av-call"
import "vue-av-call/dist/vue-av-call.css"

//拨打通话前的准备

//首先设置发起方的用户信息
call.setCallFrom({
    id: 1,
    nickanme: 'test001',
    avatar: 'https://api.multiavatar.com/1.png'
})

//再设置接收方的用户信息
call.setCallTo({
    id: 2,
    nickanme: 'test002',
    avatar: 'https://api.multiavatar.com/2.png'
})

//最后拨打语音或者视频电话
call.startCall(call.CALL_TYPE.AUDIO) //语音通话

call.startCall(call.CALL_TYPE.VIDEO) //视频通话

<!-- template -->
<av-call></av-call>

API 参考

初始化

| Props参数 | 描述 | 默认 | |--------------------------------|-----------------|:---------------------------------------------------------:| | wss: Boolean | 开启wss协议 | false | | port: Number | 指定连接端口 | 8080 | | timeout: Number | 设置超时未接听自动挂断，单位秒 | 30 | | ringtone: Object | 自定义通话与挂断的铃声提示 | {call:new Audio(call.mp3),hangup:new Audio(hangup.mp3)} | | debug: Boolean | 浏览器会弹出一些错误信息 | false |

| Events事件 | 描述 | 回调参数 | |---------------------|--------------------|:-----------------:| | onOpen | Websocket 连接成功的回调 | websocket event | | onMessage | Websocket 接收到消息的回调 | websocket event | | onClose | Websocket 关闭连接的回调 | websocket event | | onCallOut | 拨打时回调 | see demo | | onCallIn | 来电时回调 | see demo | | onAnswerCall | 接通电话时回调 | see demo | | onHangupCall | 挂断电话时回调 | see demo | | onCallError | 通话过程中异常回调 | see demo | | onControl | 切换扬声器等开关按钮时回调 | see demo |