366 lines
7.2 KiB
Vue
366 lines
7.2 KiB
Vue
<template>
|
|
<view class="sos-demo">
|
|
<view class="demo-header">
|
|
<text class="demo-title">SOS WebRTC 功能测试</text>
|
|
</view>
|
|
|
|
<view class="demo-content">
|
|
<view class="status-section">
|
|
<text class="status-title">连接状态</text>
|
|
<text class="status-value" :class="connectionStatus.class">
|
|
{{ connectionStatus.text }}
|
|
</text>
|
|
</view>
|
|
|
|
<view class="control-section">
|
|
<button
|
|
class="control-btn"
|
|
@click="initSOS"
|
|
:disabled="isInitialized"
|
|
>
|
|
{{ isInitialized ? '已初始化' : '初始化SOS' }}
|
|
</button>
|
|
|
|
<button
|
|
class="control-btn"
|
|
@click="startCall"
|
|
:disabled="!isInitialized || isCalling"
|
|
>
|
|
{{ isCalling ? '通话中...' : '开始通话' }}
|
|
</button>
|
|
|
|
<button
|
|
class="control-btn"
|
|
@click="endCall"
|
|
:disabled="!isCalling"
|
|
>
|
|
结束通话
|
|
</button>
|
|
</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: 'SOSExample',
|
|
data() {
|
|
return {
|
|
isInitialized: false,
|
|
isCalling: false,
|
|
connectionStatus: {
|
|
text: '未连接',
|
|
class: 'disconnected'
|
|
},
|
|
logs: [],
|
|
sosInstance: null
|
|
}
|
|
},
|
|
|
|
onLoad() {
|
|
this.initSOSPolyfill()
|
|
},
|
|
|
|
onUnload() {
|
|
this.cleanup()
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* 初始化SOS polyfill
|
|
*/
|
|
initSOSPolyfill() {
|
|
try {
|
|
// 加载polyfill
|
|
require('@/utils/tmedia-polyfill.js')
|
|
this.addLog('SOS polyfill 加载成功')
|
|
|
|
// 加载SOS库
|
|
this.sosInstance = require('@/utils/sos-v1.0.17.js')
|
|
this.addLog('SOS库加载成功')
|
|
|
|
} catch (error) {
|
|
this.addLog(`初始化失败: ${error.message}`)
|
|
console.error('SOS初始化失败:', error)
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 初始化SOS
|
|
*/
|
|
initSOS() {
|
|
try {
|
|
if (!this.sosInstance) {
|
|
throw new Error('SOS库未加载')
|
|
}
|
|
|
|
// 这里可以添加SOS的具体初始化逻辑
|
|
// 根据sos-v1.0.17.js的API进行初始化
|
|
|
|
this.isInitialized = true
|
|
this.connectionStatus = {
|
|
text: '已初始化',
|
|
class: 'initialized'
|
|
}
|
|
this.addLog('SOS初始化成功')
|
|
|
|
uni.showToast({
|
|
title: 'SOS初始化成功',
|
|
icon: 'success'
|
|
})
|
|
|
|
} catch (error) {
|
|
this.addLog(`SOS初始化失败: ${error.message}`)
|
|
uni.showToast({
|
|
title: '初始化失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 开始通话
|
|
*/
|
|
startCall() {
|
|
try {
|
|
if (!this.isInitialized) {
|
|
throw new Error('请先初始化SOS')
|
|
}
|
|
|
|
// 这里可以添加开始通话的逻辑
|
|
// 根据sos-v1.0.17.js的API进行通话
|
|
|
|
this.isCalling = true
|
|
this.connectionStatus = {
|
|
text: '通话中',
|
|
class: 'calling'
|
|
}
|
|
this.addLog('开始通话')
|
|
|
|
uni.showToast({
|
|
title: '开始通话',
|
|
icon: 'none'
|
|
})
|
|
|
|
} catch (error) {
|
|
this.addLog(`开始通话失败: ${error.message}`)
|
|
uni.showToast({
|
|
title: '通话失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 结束通话
|
|
*/
|
|
endCall() {
|
|
try {
|
|
if (!this.isCalling) {
|
|
throw new Error('当前没有通话')
|
|
}
|
|
|
|
// 这里可以添加结束通话的逻辑
|
|
|
|
this.isCalling = false
|
|
this.connectionStatus = {
|
|
text: '已断开',
|
|
class: 'disconnected'
|
|
}
|
|
this.addLog('通话结束')
|
|
|
|
uni.showToast({
|
|
title: '通话结束',
|
|
icon: 'success'
|
|
})
|
|
|
|
} catch (error) {
|
|
this.addLog(`结束通话失败: ${error.message}`)
|
|
uni.showToast({
|
|
title: '结束通话失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 清理资源
|
|
*/
|
|
cleanup() {
|
|
try {
|
|
if (this.isCalling) {
|
|
this.endCall()
|
|
}
|
|
|
|
this.isInitialized = false
|
|
this.connectionStatus = {
|
|
text: '已清理',
|
|
class: 'disconnected'
|
|
}
|
|
this.addLog('资源清理完成')
|
|
|
|
} catch (error) {
|
|
this.addLog(`清理失败: ${error.message}`)
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 添加日志
|
|
*/
|
|
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-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.calling {
|
|
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;
|
|
}
|
|
|
|
.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> |