x1
This commit is contained in:
田岩
@@ -0,0 +1,285 @@
|
||||
<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="test">接通电话</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
ProtocolCodec,
|
||||
MessageType,
|
||||
SerializationType,
|
||||
CompressionType,
|
||||
ControlCommand,
|
||||
ProtocolConst,
|
||||
} from './ProtocolCodec'; // 确保协议文件也是 ESModule 格式（export 导出）
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
status: "未录音",
|
||||
currentDecibels: 0,
|
||||
isRecording: false,
|
||||
ws: null, // WebSocket 实例
|
||||
audioContext: null, // 音频上下文
|
||||
scriptProcessor: null, // 音频处理节点
|
||||
audioBufferSource: null, // 音频源节点
|
||||
frameBufferList: [], // 缓存音频帧
|
||||
wsUrl: "ws://172.16.89.58:8000/ws/audio", // 替换为实际后端地址
|
||||
};
|
||||
},
|
||||
onUnload() {
|
||||
// 页面卸载时清理资源
|
||||
this.stopRecordAndClean();
|
||||
},
|
||||
methods: {
|
||||
|
||||
test() {
|
||||
this.ws = uni.connectSocket({
|
||||
url: this.wsUrl,
|
||||
fail: () => {
|
||||
console.log('fail');
|
||||
},
|
||||
success: () => {
|
||||
console.log('web');
|
||||
this.ws.onOpen((res) => {
|
||||
console.log('WebSocket连接已打开', res);
|
||||
this.ws.onMessage((res) => {
|
||||
let messageData = res.data;
|
||||
// 处理不同类型的数据
|
||||
if (typeof messageData === 'string') {
|
||||
// 文本数据
|
||||
try {
|
||||
const parsedData = JSON.parse(messageData);
|
||||
this.handleMessage(parsedData);
|
||||
} catch (e) {
|
||||
this.handleMessage(messageData);
|
||||
}
|
||||
} else if (messageData instanceof ArrayBuffer) {
|
||||
// 二进制数据
|
||||
try {
|
||||
this.$refs.aaa.appendBuffer(messageData)
|
||||
// const str = this.arrayBufferToStringCompat(messageData);
|
||||
// console.log('转换后的字符串:', str);
|
||||
|
||||
} catch (e) {
|
||||
console.log('二进制数据解析失败:', e);
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
console.log('fail');
|
||||
},
|
||||
});
|
||||
|
||||
},
|
||||
// 申请录音权限
|
||||
async applyRecordPermission() {
|
||||
try {
|
||||
const res = await uni.requestPermissions({
|
||||
scope: "scope.record"
|
||||
});
|
||||
const isGranted = res[0].grantStatus === 1;
|
||||
if (!isGranted) {
|
||||
uni.showToast({
|
||||
title: "请授予录音权限",
|
||||
icon: "none"
|
||||
});
|
||||
}
|
||||
return isGranted;
|
||||
} catch (e) {
|
||||
console.error("申请权限失败：", e);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
// ArrayBuffer 转字符串
|
||||
// 兼容的 ArrayBuffer 转字符串方法
|
||||
arrayBufferToStringCompat(buffer) {
|
||||
// 方法1: 使用 String.fromCharCode 和 Uint8Array
|
||||
const uint8Array = new Uint8Array(buffer);
|
||||
let str = '';
|
||||
for (let i = 0; i < uint8Array.length; i++) {
|
||||
str += String.fromCharCode(uint8Array[i]);
|
||||
}
|
||||
return str;
|
||||
|
||||
// 方法2: 或者使用更简洁的方式
|
||||
// return String.fromCharCode.apply(null, new Uint8Array(buffer));
|
||||
},
|
||||
// 开始录音
|
||||
async onStartRecord() {
|
||||
// 1. 申请权限
|
||||
// const hasPermission = await this.applyRecordPermission();
|
||||
// if (!hasPermission) return;
|
||||
this.ws = uni.connectSocket({
|
||||
url: this.wsUrl, //仅为示例，并非真实接口地址。
|
||||
complete: () => {
|
||||
console.log('complete');
|
||||
},
|
||||
success: () => {
|
||||
console.log('web');
|
||||
this.ws.onOpen((res) => {
|
||||
console.log('WebSocket连接已打开', res);
|
||||
this.ws.onMessage((res) => {
|
||||
let messageData = res.data;
|
||||
// 处理不同类型的数据
|
||||
if (typeof messageData === 'string') {
|
||||
// 文本数据
|
||||
try {
|
||||
const parsedData = JSON.parse(messageData);
|
||||
this.handleMessage(parsedData);
|
||||
} catch (e) {
|
||||
this.handleMessage(messageData);
|
||||
}
|
||||
} else if (messageData instanceof ArrayBuffer) {
|
||||
// 二进制数据
|
||||
try {
|
||||
this.$refs.aaa.appendBuffer(messageData)
|
||||
// const str = this.arrayBufferToStringCompat(messageData);
|
||||
// console.log('转换后的字符串:', str);
|
||||
|
||||
} catch (e) {
|
||||
console.log('二进制数据解析失败:', e);
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
console.log('fail');
|
||||
},
|
||||
});
|
||||
|
||||
// await this.initWebSocket();
|
||||
// 3. 启动录音
|
||||
try {
|
||||
this.$refs.recordFrame.start({
|
||||
sampleRate: 16000,
|
||||
frameSize: 1024,
|
||||
gain: 1.0,
|
||||
onFrameRecorded: ({
|
||||
isLastFrame,
|
||||
frameBuffer
|
||||
}) => {
|
||||
// 处理帧数据（如实时上传/渲染）
|
||||
// console.log('帧数据:', frameData);
|
||||
this.ws.send({
|
||||
data: ProtocolCodec.pack(MessageType.AUDIO_DATA, frameBuffer)
|
||||
});
|
||||
},
|
||||
onDecibels: (decibels) => {
|
||||
// 处理分贝数据（如实时更新UI）
|
||||
// console.log('当前分贝:', decibels);
|
||||
this.currentDecibels = decibels;
|
||||
}
|
||||
});
|
||||
this.isRecording = true;
|
||||
this.status = "录音中...";
|
||||
} catch (e) {
|
||||
console.error("启动录音失败：", e);
|
||||
this.status = "启动录音失败";
|
||||
this.isRecording = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 停止录音
|
||||
onStopRecord() {
|
||||
this.stopRecordAndClean();
|
||||
},
|
||||
|
||||
// 停止录音并清理资源
|
||||
stopRecordAndClean() {
|
||||
if (this.isRecording) {
|
||||
// 停止录音组件
|
||||
this.$refs.recordFrame.stop();
|
||||
this.isRecording = false;
|
||||
this.status = "已停止录音";
|
||||
}
|
||||
|
||||
// 关闭 WebSocket
|
||||
if (this.ws) {
|
||||
this.ws.close();
|
||||
this.ws = null;
|
||||
}
|
||||
|
||||
// 清理音频上下文
|
||||
if (this.audioContext) {
|
||||
this.audioContext.close();
|
||||
this.audioContext = null;
|
||||
this.scriptProcessor = null;
|
||||
this.frameBufferList = [];
|
||||
}
|
||||
|
||||
// 重置状态
|
||||
this.currentDecibels = 0;
|
||||
},
|
||||
|
||||
// 接收音频帧并处理
|
||||
frameRecorded({
|
||||
isLastFrame,
|
||||
frameBuffer
|
||||
}) {
|
||||
// console.log("收到音频帧：", isLastFrame, frameBuffer.length);
|
||||
|
||||
// 2. 通过 WebSocket 发送给后端
|
||||
if (this.ws) {
|
||||
try {
|
||||
this.ws.send({
|
||||
data: frameBuffer
|
||||
});
|
||||
} catch (e) {
|
||||
console.error("发送音频帧失败：", e);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
// 监听分贝值
|
||||
onCurrentDecibels(decibels) {
|
||||
// this.currentDecibels = decibels.toFixed(2);
|
||||
// console.log("当前分贝：", this.currentDecibels);
|
||||
},
|
||||
|
||||
// 录音停止回调
|
||||
stopIt(base64) {
|
||||
this.stopRecordAndClean();
|
||||
console.log("录音停止，最终音频Base64：", base64?.substring(0, 50) + "...");
|
||||
},
|
||||
},
|
||||
};
|
||||
</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>
|
||||
@@ -79,6 +79,7 @@
|
||||
success: () => {
|
||||
console.log('web');
|
||||
this.ws.onOpen((res) => {
|
||||
|
||||
console.log('WebSocket连接已打开', res);
|
||||
this.ws.onMessage((res) => {
|
||||
let messageData = res.data;
|
||||
|
||||
@@ -4,225 +4,40 @@
|
||||
<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>
|
||||
<yao-RecordFrame
|
||||
ref="recordFrame"
|
||||
@onFrameRecorded="frameRecorded"
|
||||
@currentDecibels="onCurrentDecibels"
|
||||
@onStop="stopIt"
|
||||
></yao-RecordFrame>
|
||||
<sdx-StreamPlayer ref="aaa">xx</sdx-StreamPlayer>
|
||||
<button @click="test">测试</button>
|
||||
<button @click="callPhone">接通电话</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted } from 'vue';
|
||||
import {
|
||||
ProtocolCodec,
|
||||
MessageType,
|
||||
SerializationType,
|
||||
CompressionType,
|
||||
ControlCommand,
|
||||
ProtocolConst,
|
||||
ProtocolCodec,
|
||||
MessageType,
|
||||
SerializationType,
|
||||
CompressionType,
|
||||
ControlCommand,
|
||||
ProtocolConst
|
||||
} from './ProtocolCodec'; // 确保协议文件也是 ESModule 格式（export 导出）
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
status: "未录音",
|
||||
currentDecibels: 0,
|
||||
isRecording: false,
|
||||
ws: null, // WebSocket 实例
|
||||
audioContext: null, // 音频上下文
|
||||
scriptProcessor: null, // 音频处理节点
|
||||
audioBufferSource: null, // 音频源节点
|
||||
frameBufferList: [], // 缓存音频帧
|
||||
wsUrl: "ws://172.16.89.58:8000/ws/audio", // 替换为实际后端地址
|
||||
};
|
||||
},
|
||||
onUnload() {
|
||||
// 页面卸载时清理资源
|
||||
this.stopRecordAndClean();
|
||||
},
|
||||
methods: {
|
||||
import { ref } from 'vue';
|
||||
import useWebSocket from './useWebSocket';
|
||||
const { initWebSocket, closeWebSocket } = useWebSocket();
|
||||
|
||||
test() {
|
||||
|
||||
|
||||
},
|
||||
// 申请录音权限
|
||||
async applyRecordPermission() {
|
||||
try {
|
||||
const res = await uni.requestPermissions({
|
||||
scope: "scope.record"
|
||||
});
|
||||
const isGranted = res[0].grantStatus === 1;
|
||||
if (!isGranted) {
|
||||
uni.showToast({
|
||||
title: "请授予录音权限",
|
||||
icon: "none"
|
||||
});
|
||||
}
|
||||
return isGranted;
|
||||
} catch (e) {
|
||||
console.error("申请权限失败：", e);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
// ArrayBuffer 转字符串
|
||||
// 兼容的 ArrayBuffer 转字符串方法
|
||||
arrayBufferToStringCompat(buffer) {
|
||||
// 方法1: 使用 String.fromCharCode 和 Uint8Array
|
||||
const uint8Array = new Uint8Array(buffer);
|
||||
let str = '';
|
||||
for (let i = 0; i < uint8Array.length; i++) {
|
||||
str += String.fromCharCode(uint8Array[i]);
|
||||
}
|
||||
return str;
|
||||
// 组件挂载时初始化连接
|
||||
onMounted(() => {
|
||||
initWebSocket();
|
||||
});
|
||||
|
||||
// 方法2: 或者使用更简洁的方式
|
||||
// return String.fromCharCode.apply(null, new Uint8Array(buffer));
|
||||
},
|
||||
// 开始录音
|
||||
async onStartRecord() {
|
||||
// 1. 申请权限
|
||||
// const hasPermission = await this.applyRecordPermission();
|
||||
// if (!hasPermission) return;
|
||||
this.ws = uni.connectSocket({
|
||||
url: this.wsUrl, //仅为示例，并非真实接口地址。
|
||||
complete: () => {
|
||||
console.log('complete');
|
||||
},
|
||||
success: () => {
|
||||
console.log('web');
|
||||
this.ws.onOpen((res) => {
|
||||
console.log('WebSocket连接已打开', res);
|
||||
|
||||
|
||||
this.ws.onMessage((res) => {
|
||||
let messageData = res.data;
|
||||
// 处理不同类型的数据
|
||||
if (typeof messageData === 'string') {
|
||||
// 文本数据
|
||||
try {
|
||||
const parsedData = JSON.parse(messageData);
|
||||
this.handleMessage(parsedData);
|
||||
} catch (e) {
|
||||
this.handleMessage(messageData);
|
||||
}
|
||||
} else if (messageData instanceof ArrayBuffer) {
|
||||
// 二进制数据
|
||||
try {
|
||||
this.$refs.aaa.appendBuffer(messageData)
|
||||
// const str = this.arrayBufferToStringCompat(messageData);
|
||||
// console.log('转换后的字符串:', str);
|
||||
|
||||
} catch (e) {
|
||||
console.log('二进制数据解析失败:', e);
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
console.log('fail');
|
||||
},
|
||||
});
|
||||
|
||||
// await this.initWebSocket();
|
||||
|
||||
// 3. 启动录音
|
||||
try {
|
||||
this.$refs.recordFrame.start({
|
||||
sampleRate: 16000,
|
||||
frameSize: 1024,
|
||||
gain: 1.0,
|
||||
onFrameRecorded: ({
|
||||
isLastFrame,
|
||||
frameBuffer
|
||||
}) => {
|
||||
// 处理帧数据（如实时上传/渲染）
|
||||
// console.log('帧数据:', frameData);
|
||||
this.ws.send({
|
||||
data: ProtocolCodec.pack(MessageType.AUDIO_DATA, frameBuffer);
|
||||
});
|
||||
},
|
||||
onDecibels: (decibels) => {
|
||||
// 处理分贝数据（如实时更新UI）
|
||||
// console.log('当前分贝:', decibels);
|
||||
this.currentDecibels = decibels;
|
||||
}
|
||||
});
|
||||
this.isRecording = true;
|
||||
this.status = "录音中...";
|
||||
} catch (e) {
|
||||
console.error("启动录音失败：", e);
|
||||
this.status = "启动录音失败";
|
||||
this.isRecording = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 停止录音
|
||||
onStopRecord() {
|
||||
this.stopRecordAndClean();
|
||||
},
|
||||
|
||||
// 停止录音并清理资源
|
||||
stopRecordAndClean() {
|
||||
if (this.isRecording) {
|
||||
// 停止录音组件
|
||||
this.$refs.recordFrame.stop();
|
||||
this.isRecording = false;
|
||||
this.status = "已停止录音";
|
||||
}
|
||||
|
||||
// 关闭 WebSocket
|
||||
if (this.ws) {
|
||||
this.ws.close();
|
||||
this.ws = null;
|
||||
}
|
||||
|
||||
// 清理音频上下文
|
||||
if (this.audioContext) {
|
||||
this.audioContext.close();
|
||||
this.audioContext = null;
|
||||
this.scriptProcessor = null;
|
||||
this.frameBufferList = [];
|
||||
}
|
||||
|
||||
// 重置状态
|
||||
this.currentDecibels = 0;
|
||||
},
|
||||
|
||||
// 接收音频帧并处理
|
||||
frameRecorded({
|
||||
isLastFrame,
|
||||
frameBuffer
|
||||
}) {
|
||||
// console.log("收到音频帧：", isLastFrame, frameBuffer.length);
|
||||
|
||||
// 2. 通过 WebSocket 发送给后端
|
||||
if (this.ws) {
|
||||
try {
|
||||
this.ws.send({
|
||||
data: frameBuffer
|
||||
});
|
||||
} catch (e) {
|
||||
console.error("发送音频帧失败：", e);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
// 监听分贝值
|
||||
onCurrentDecibels(decibels) {
|
||||
// this.currentDecibels = decibels.toFixed(2);
|
||||
// console.log("当前分贝：", this.currentDecibels);
|
||||
},
|
||||
|
||||
// 录音停止回调
|
||||
stopIt(base64) {
|
||||
this.stopRecordAndClean();
|
||||
console.log("录音停止，最终音频Base64：", base64?.substring(0, 50) + "...");
|
||||
},
|
||||
},
|
||||
};
|
||||
// 组件卸载时关闭连接（可选）
|
||||
onUnmounted(() => {
|
||||
closeWebSocket();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -248,4 +63,4 @@
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
// 在组件 setup 函数中使用
|
||||
export default function useWebSocket() {
|
||||
// 存储 WebSocket 实例
|
||||
const ws = ref(null);
|
||||
const wsUrl = 'ws://127.0.0.1:8000/ws/audio';
|
||||
// 初始化 WebSocket 连接
|
||||
const initWebSocket = () => {
|
||||
ws.value = uni.connectSocket({
|
||||
url: wsUrl,
|
||||
success: () => {
|
||||
console.log('web');
|
||||
|
||||
// 监听连接打开
|
||||
ws.value.onOpen((res) => {
|
||||
console.log('WebSocket连接已打开', res);
|
||||
|
||||
// 监听消息接收
|
||||
ws.value.onMessage((res) => {
|
||||
let messageData = res.data;
|
||||
|
||||
// 处理不同类型的数据
|
||||
if (typeof messageData === 'string') {
|
||||
// 文本数据
|
||||
try {
|
||||
const parsedData = JSON.parse(messageData);
|
||||
handleMessage(parsedData);
|
||||
} catch (e) {
|
||||
handleMessage(messageData);
|
||||
}
|
||||
} else if (messageData instanceof ArrayBuffer) {
|
||||
// 二进制数据
|
||||
try {
|
||||
// 注意：组合式 API 中需通过 ref 获取子组件实例
|
||||
const aaaRef = ref(null); // 需在组件中声明 <component ref="aaaRef" />
|
||||
aaaRef.value?.appendBuffer(messageData);
|
||||
} catch (e) {
|
||||
console.log('二进制数据解析失败:', e);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
console.log('fail');
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 消息处理函数（根据实际业务逻辑修改）
|
||||
const handleMessage = (data) => {
|
||||
// 原组件中的 handleMessage 逻辑迁移到这里
|
||||
console.log('收到消息:', data);
|
||||
};
|
||||
|
||||
// 辅助函数：ArrayBuffer 转字符串（如果后续需要使用）
|
||||
const arrayBufferToStringCompat = (buffer) => {
|
||||
const decoder = new TextDecoder('utf-8');
|
||||
return decoder.decode(buffer);
|
||||
};
|
||||
|
||||
// 关闭连接函数（可选，按需暴露）
|
||||
const closeWebSocket = () => {
|
||||
if (ws.value) {
|
||||
ws.value.close();
|
||||
console.log('WebSocket连接已关闭');
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
ws,
|
||||
initWebSocket,
|
||||
closeWebSocket,
|
||||
handleMessage
|
||||
};
|
||||
};
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"hash": "030e727a",
|
||||
"configHash": "c22f3258",
|
||||
"lockfileHash": "c10b225f",
|
||||
"browserHash": "77dd6173",
|
||||
"hash": "56a2a6b1",
|
||||
"configHash": "0d2436b6",
|
||||
"lockfileHash": "1c743963",
|
||||
"browserHash": "42eed156",
|
||||
"optimized": {},
|
||||
"chunks": {}
|
||||
}
|
||||
Reference in New Issue
Block a user