518 lines
11 KiB
Vue
518 lines
11 KiB
Vue
<template>
|
|
<view class="sos-wrapper-demo">
|
|
<view class="demo-header">
|
|
<text class="demo-title">SOS SDK 包装器测试</text>
|
|
</view>
|
|
|
|
<view class="demo-content">
|
|
<!-- 状态显示 -->
|
|
<view class="status-section">
|
|
<text class="status-title">SDK状态</text>
|
|
<text class="status-value" :class="sdkStatus.class">
|
|
{{ sdkStatus.text }}
|
|
</text>
|
|
</view>
|
|
|
|
<!-- 控制按钮 -->
|
|
<view class="control-section">
|
|
<button
|
|
class="control-btn"
|
|
@click="initSDK"
|
|
:disabled="isInitialized"
|
|
>
|
|
{{ isInitialized ? '已初始化' : '初始化SDK' }}
|
|
</button>
|
|
|
|
<button
|
|
class="control-btn"
|
|
@click="getDeviceList"
|
|
:disabled="!isInitialized"
|
|
>
|
|
获取设备列表
|
|
</button>
|
|
|
|
<button
|
|
class="control-btn"
|
|
@click="startAudioSpeak"
|
|
:disabled="!isInitialized || isSpeaking"
|
|
>
|
|
{{ isSpeaking ? '对讲中...' : '开始对讲' }}
|
|
</button>
|
|
|
|
<button
|
|
class="control-btn"
|
|
@click="stopAudioSpeak"
|
|
:disabled="!isSpeaking"
|
|
>
|
|
停止对讲
|
|
</button>
|
|
|
|
<button
|
|
class="control-btn"
|
|
@click="destroySDK"
|
|
:disabled="!isInitialized"
|
|
>
|
|
销毁SDK
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 设备列表 -->
|
|
<view class="device-section" v-if="deviceList.length > 0">
|
|
<text class="section-title">设备列表</text>
|
|
<view
|
|
class="device-item"
|
|
v-for="(device, index) in deviceList"
|
|
:key="index"
|
|
>
|
|
<text class="device-name">{{ device.name || '未知设备' }}</text>
|
|
<text class="device-id">ID: {{ device.id }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 日志显示 -->
|
|
<view class="log-section">
|
|
<text class="log-title">操作日志</text>
|
|
<scroll-view class="log-content" scroll-y>
|
|
<view
|
|
class="log-item"
|
|
v-for="(log, index) in logs"
|
|
:key="index"
|
|
>
|
|
<text class="log-time">{{ log.time }}</text>
|
|
<text class="log-message">{{ log.message }}</text>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'SOSWrapperExample',
|
|
data() {
|
|
return {
|
|
sosWrapper: null,
|
|
isInitialized: false,
|
|
isSpeaking: false,
|
|
sdkStatus: {
|
|
text: '未初始化',
|
|
class: 'disconnected'
|
|
},
|
|
deviceList: [],
|
|
logs: []
|
|
}
|
|
},
|
|
|
|
onLoad() {
|
|
this.initSOSWrapper()
|
|
},
|
|
|
|
onUnload() {
|
|
this.cleanup()
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* 初始化SOS包装器
|
|
*/
|
|
initSOSWrapper() {
|
|
try {
|
|
// 加载SOS包装器
|
|
const sosModule = require('@/utils/sos-wrapper.js')
|
|
|
|
this.addLog('SOS包装器加载成功')
|
|
|
|
// 检查SDK是否可用
|
|
if (sosModule.SDK) {
|
|
this.addLog('SOS.SDK构造函数可用')
|
|
} else {
|
|
this.addLog('SOS.SDK构造函数不可用')
|
|
}
|
|
|
|
} catch (error) {
|
|
this.addLog(`SOS包装器加载失败: ${error.message}`)
|
|
console.error('SOS包装器加载失败:', error)
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 初始化SDK
|
|
*/
|
|
async initSDK() {
|
|
try {
|
|
const sosModule = require('@/utils/sos-wrapper.js')
|
|
|
|
if (!sosModule.SDK) {
|
|
throw new Error('SOS.SDK构造函数不可用')
|
|
}
|
|
|
|
// 创建SDK实例
|
|
this.sosWrapper = new sosModule.SDK({
|
|
// 这里可以添加配置参数
|
|
// 根据实际需求配置
|
|
})
|
|
|
|
// 初始化SDK
|
|
await this.sosWrapper.init()
|
|
|
|
this.isInitialized = true
|
|
this.sdkStatus = {
|
|
text: '已初始化',
|
|
class: 'initialized'
|
|
}
|
|
|
|
this.addLog('SDK初始化成功')
|
|
|
|
// 添加事件监听器
|
|
this.setupEventListeners()
|
|
|
|
uni.showToast({
|
|
title: 'SDK初始化成功',
|
|
icon: 'success'
|
|
})
|
|
|
|
} catch (error) {
|
|
this.addLog(`SDK初始化失败: ${error.message}`)
|
|
uni.showToast({
|
|
title: 'SDK初始化失败',
|
|
icon: 'none'
|
|
})
|
|
console.error('SDK初始化失败:', error)
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 设置事件监听器
|
|
*/
|
|
setupEventListeners() {
|
|
if (!this.sosWrapper) return
|
|
|
|
// 添加各种事件监听器
|
|
this.sosWrapper.addEventListener('sdk::event::state', (event) => {
|
|
this.addLog(`SDK状态事件: ${JSON.stringify(event)}`)
|
|
})
|
|
|
|
this.sosWrapper.addEventListener('sdk::event::error', (event) => {
|
|
this.addLog(`SDK错误事件: ${JSON.stringify(event)}`)
|
|
})
|
|
|
|
this.sosWrapper.addEventListener('sdk::event::success', (event) => {
|
|
this.addLog(`SDK成功事件: ${JSON.stringify(event)}`)
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 获取设备列表
|
|
*/
|
|
getDeviceList() {
|
|
try {
|
|
if (!this.sosWrapper) {
|
|
throw new Error('SDK未初始化')
|
|
}
|
|
|
|
this.sosWrapper.deviceList((result) => {
|
|
if (result && result.data) {
|
|
this.deviceList = result.data
|
|
this.addLog(`获取到 ${result.data.length} 个设备`)
|
|
} else {
|
|
this.addLog('获取设备列表失败')
|
|
}
|
|
})
|
|
|
|
} catch (error) {
|
|
this.addLog(`获取设备列表失败: ${error.message}`)
|
|
console.error('获取设备列表失败:', error)
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 开始音频对讲
|
|
*/
|
|
startAudioSpeak() {
|
|
try {
|
|
if (!this.sosWrapper) {
|
|
throw new Error('SDK未初始化')
|
|
}
|
|
|
|
if (this.deviceList.length === 0) {
|
|
throw new Error('没有可用设备')
|
|
}
|
|
|
|
// 使用第一个设备进行对讲
|
|
const deviceId = this.deviceList[0].id
|
|
|
|
this.sosWrapper.audioSpeakStart(deviceId, (result) => {
|
|
if (result && result.success) {
|
|
this.isSpeaking = true
|
|
this.sdkStatus = {
|
|
text: '对讲中',
|
|
class: 'speaking'
|
|
}
|
|
this.addLog(`开始对讲设备: ${deviceId}`)
|
|
} else {
|
|
this.addLog(`开始对讲失败: ${result.message || '未知错误'}`)
|
|
}
|
|
})
|
|
|
|
} catch (error) {
|
|
this.addLog(`开始对讲失败: ${error.message}`)
|
|
console.error('开始对讲失败:', error)
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 停止音频对讲
|
|
*/
|
|
stopAudioSpeak() {
|
|
try {
|
|
if (!this.sosWrapper || !this.isSpeaking) {
|
|
throw new Error('当前没有对讲')
|
|
}
|
|
|
|
if (this.deviceList.length === 0) {
|
|
throw new Error('没有可用设备')
|
|
}
|
|
|
|
const deviceId = this.deviceList[0].id
|
|
|
|
this.sosWrapper.audioSpeakStop(deviceId, (result) => {
|
|
if (result && result.success) {
|
|
this.isSpeaking = false
|
|
this.sdkStatus = {
|
|
text: '已初始化',
|
|
class: 'initialized'
|
|
}
|
|
this.addLog(`停止对讲设备: ${deviceId}`)
|
|
} else {
|
|
this.addLog(`停止对讲失败: ${result.message || '未知错误'}`)
|
|
}
|
|
})
|
|
|
|
} catch (error) {
|
|
this.addLog(`停止对讲失败: ${error.message}`)
|
|
console.error('停止对讲失败:', error)
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 销毁SDK
|
|
*/
|
|
destroySDK() {
|
|
try {
|
|
if (this.sosWrapper) {
|
|
this.sosWrapper.destroy()
|
|
this.sosWrapper = null
|
|
}
|
|
|
|
this.isInitialized = false
|
|
this.isSpeaking = false
|
|
this.sdkStatus = {
|
|
text: '已销毁',
|
|
class: 'disconnected'
|
|
}
|
|
this.deviceList = []
|
|
|
|
this.addLog('SDK已销毁')
|
|
|
|
uni.showToast({
|
|
title: 'SDK已销毁',
|
|
icon: 'success'
|
|
})
|
|
|
|
} catch (error) {
|
|
this.addLog(`销毁SDK失败: ${error.message}`)
|
|
console.error('销毁SDK失败:', error)
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 清理资源
|
|
*/
|
|
cleanup() {
|
|
this.destroySDK()
|
|
this.addLog('页面卸载，资源已清理')
|
|
},
|
|
|
|
/**
|
|
* 添加日志
|
|
*/
|
|
addLog(message) {
|
|
const now = new Date()
|
|
const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
|
|
|
|
this.logs.unshift({
|
|
time,
|
|
message
|
|
})
|
|
|
|
// 限制日志数量
|
|
if (this.logs.length > 50) {
|
|
this.logs = this.logs.slice(0, 50)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.sos-wrapper-demo {
|
|
padding: 20rpx;
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.demo-header {
|
|
text-align: center;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.demo-title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.demo-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30rpx;
|
|
}
|
|
|
|
.status-section {
|
|
background: white;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.status-title {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-bottom: 15rpx;
|
|
display: block;
|
|
}
|
|
|
|
.status-value {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
padding: 15rpx 25rpx;
|
|
border-radius: 25rpx;
|
|
display: inline-block;
|
|
}
|
|
|
|
.status-value.disconnected {
|
|
background: #ffebee;
|
|
color: #f44336;
|
|
}
|
|
|
|
.status-value.initialized {
|
|
background: #e3f2fd;
|
|
color: #2196f3;
|
|
}
|
|
|
|
.status-value.speaking {
|
|
background: #e8f5e8;
|
|
color: #4caf50;
|
|
}
|
|
|
|
.control-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.control-btn {
|
|
background: #2196f3;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 25rpx;
|
|
padding: 25rpx;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.control-btn:disabled {
|
|
background: #ccc;
|
|
color: #999;
|
|
}
|
|
|
|
.device-section {
|
|
background: white;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
display: block;
|
|
}
|
|
|
|
.device-item {
|
|
padding: 20rpx;
|
|
border: 1rpx solid #eee;
|
|
border-radius: 10rpx;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.device-name {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
display: block;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.device-id {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
display: block;
|
|
}
|
|
|
|
.log-section {
|
|
background: white;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.log-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
display: block;
|
|
}
|
|
|
|
.log-content {
|
|
height: 400rpx;
|
|
border: 1rpx solid #eee;
|
|
border-radius: 10rpx;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.log-item {
|
|
display: flex;
|
|
margin-bottom: 10rpx;
|
|
padding: 10rpx;
|
|
background: #f9f9f9;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.log-time {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-right: 20rpx;
|
|
min-width: 120rpx;
|
|
}
|
|
|
|
.log-message {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
flex: 1;
|
|
}
|
|
</style> |