105 lines
2.4 KiB
Vue
105 lines
2.4 KiB
Vue
<template>
|
||
<view class="container">
|
||
<button @click="onStartRecord" :disabled="isRecording">开始录音</button>
|
||
<button @click="onStopRecord" :disabled="!isRecording">停止录音</button>
|
||
<view class="tip">{{ status }}</view>
|
||
<view class="tip">当前分贝：{{ currentDecibels }}</view>
|
||
<yao-RecordFrame
|
||
ref="recordFrame"
|
||
@onFrameRecorded="frameRecorded"
|
||
@currentDecibels="onCurrentDecibels"
|
||
@onStop="stopIt"
|
||
></yao-RecordFrame>
|
||
<sdx-StreamPlayer ref="aaa">xx</sdx-StreamPlayer>
|
||
<button @click="callPhone">接通电话</button>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, onUnmounted } from 'vue';
|
||
import {
|
||
ProtocolCodec,
|
||
MessageType,
|
||
SerializationType,
|
||
CompressionType,
|
||
ControlCommand,
|
||
ProtocolConst
|
||
} from './ProtocolCodec';
|
||
import { ref } from 'vue';
|
||
import useWebSocket from './useWebSocket';
|
||
const { state, connect, disconnect, sendBinary } = useWebSocket(
|
||
'ws://127.0.0.1:8000/ws/audio',
|
||
{
|
||
// 身份校验信息（从登录态获取）
|
||
identity: {
|
||
user_id: '1001',
|
||
token: 'your_auth_token',
|
||
name: '测试用户'
|
||
},
|
||
reconnectDelay: 5000,
|
||
// 🔴 1. 消息回调：接收服务端所有消息（含身份响应、错误、自定义消息）
|
||
onMessage: ({ msgType, data, rawData }) => {
|
||
console.log('收到服务端消息', { msgType, data });
|
||
|
||
},
|
||
// 🔴 2. 身份校验成功回调：仅在身份校验通过后触发
|
||
onAuthSuccess: (context) => {
|
||
console.log('身份校验成功！上下文信息：', context);
|
||
|
||
},
|
||
|
||
// 🔴 3. 连接关闭回调：连接关闭时触发（含主动关闭、异常关闭）
|
||
onClose: (closeInfo) => {
|
||
console.log('连接关闭', closeInfo);
|
||
|
||
}
|
||
}
|
||
);
|
||
|
||
// 2. 示例：发送音频帧
|
||
const sendAudioFrame = (frameBuffer) => {
|
||
// if (!state.isConnected) {
|
||
// console.warn('未连接，无法发送音频帧');
|
||
// return;
|
||
// }
|
||
|
||
};
|
||
const callPhone = () => {
|
||
connect()
|
||
}
|
||
const frameRecorded =() =>{}
|
||
// 组件挂载时初始化连接
|
||
onMounted(() => {
|
||
|
||
});
|
||
|
||
// 组件卸载时关闭连接（可选）
|
||
onUnmounted(() => {
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.container {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
button {
|
||
margin: 10rpx 0;
|
||
padding: 15rpx 30rpx;
|
||
background: #007aff;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
button:disabled {
|
||
background: #ccc;
|
||
}
|
||
|
||
.tip {
|
||
margin: 15rpx 0;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
</style>
|