zhgdyunapp/examples/sosExample.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>