yt-chat-components 1.2.2 → 1.2.4

package/src/YtChatView/chatWidget/chatWindow/callInterface/index.tsx

@@ -1,550 +1,550 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Button, Avatar, message } from 'antd';
-import './index.module.css';
-import { callStyle } from './style';
-import { ChatMessageType } from '../../chatWindow/types/chatWidget';
-import Recorder from 'recorder-core'
-import 'recorder-core/src/engine/mp3'
-import 'recorder-core/src/engine/mp3-engine'
-// import 'recorder-core/src/extensions/waveview'
-import ai_call_thinking from '../../../../assets/aicenter/ai_call_thinking.png'
-import ai_call_working from '../../../../assets/aicenter/ai_call_working.gif'
-
-
-interface CallInterfaceProps {
-  onHangup: () => void;
-  contactName?: string;
-  contactAvatar?: string;
-  api_key: string;
-  flowId: string;
-  sessionId: React.MutableRefObject<string>;
-  hostUrl: string;
-  addMessage: (message: ChatMessageType) => void;
-  userInfo: {
-    code: string;
-  };
-}
-
-const CallInterface: React.FC<CallInterfaceProps> = ({ 
-  onHangup, 
-  contactName = '', 
-  contactAvatar,
-  api_key,
-  flowId,
-  sessionId,
-  hostUrl,
-  addMessage,
-  userInfo,
-}) => {
-  const [callDuration, setCallDuration] = useState(0);
-  const [callStatus, setCallStatus] = useState<'connecting' | 'connected'>('connecting');
-  const [workStatus, setWorkStatus] = useState<'正在聆听' | '正在思考' | '正在回复'>('正在聆听');
-  
-  // 添加VAD相关状态
-  const isSpeakingRef = useRef<boolean>(false);
-  const SILENCE_THRESHOLD = 35; // 静音阈值，可根据环境调整
-  const SPEECH_DELAY = 1500; // 停止说话多久后认为一段话结束(毫秒)
-  // 发送信息后持有这个id，当id不为null放弃处理后续说话
-  const msgIdRef = useRef<string | null>(null);
-
-  // WebRTC相关状态和引用
-  const peerConnectionRef = useRef<RTCPeerConnection | null>(null);
-  const localStreamRef = useRef<MediaStream | null>(null);
-  const localAudioRef = useRef<HTMLAudioElement>(null);
-  const remoteStreamRef = useRef<MediaStream | null>(null);
-  const remoteAudioRef = useRef<HTMLAudioElement>(null);
-  let responseAudio: any = null;
-  // let wave: any = null;
-  const wsRef = useRef<WebSocket | null>(null);
-  
-  // VAD相关引用
-  const recorderRef = useRef<any | null>(null);
-  const speechTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const vadProcessorRef = useRef<ScriptProcessorNode | null>(null);
-  const audioContextRef = useRef<AudioContext | null>(null);
-  const [isSpeakingNow,setIsSpeakingNow] = useState(false);
-
-
-  // 添加统一的WebSocket消息发送方法
-  const sendWebSocketMessage = (type: string, data: any) => {
-    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
-      wsRef.current.send(JSON.stringify({type, data}));
-    } else {
-      console.error(`WebSocket未连接，无法发送${type}消息`);
-    }
-  };
-
-  const handleAudioData = (audioData: string) => {
-    setWorkStatus('正在回复');
-    
-    // 将base64音频转换为Blob
-    const byteCharacters = atob(audioData);
-    const byteNumbers = new Array(byteCharacters.length);
-    for (let i = 0; i < byteCharacters.length; i++) {
-      byteNumbers[i] = byteCharacters.charCodeAt(i);
-    }
-    const byteArray = new Uint8Array(byteNumbers);
-    const audioBlob = new Blob([byteArray], { type: 'audio/webm' });
-    
-    // 创建音频URL并播放
-    const audioUrl = URL.createObjectURL(audioBlob);
-    const audio = new Audio(audioUrl);
-    responseAudio = audio;
-    
-    // 监听用户打断
-    audio.onplay = () => {
-      // 设置打断检测，3秒后才启动
-      const interruptionCheck = setInterval(() => {
-        if (isSpeakingRef.current) {
-          // 用户开始说话，打断播放
-          // console.log('用户打断播放');
-          audio.pause();
-          URL.revokeObjectURL(audioUrl);
-          clearInterval(interruptionCheck);
-          setWorkStatus('正在聆听');
-        }
-      }, 3000);
-      
-      // 播放结束时清除检测
-      audio.onended = () => {
-        clearInterval(interruptionCheck);
-        URL.revokeObjectURL(audioUrl);
-        setWorkStatus('正在聆听');
-      };
-    };
-    
-    // 开始播放
-    audio.play().catch(err => {
-      console.error('播放音频失败:', err);
-      setWorkStatus('正在聆听');
-    });
-  };
-
-  const initWebRTC = async () => {
-    try {
-      const peerConnection = new RTCPeerConnection({
-        iceServers: [
-          // 替换为国内可用的STUN服务器
-          { urls: 'stun:stun.qq.com:3478' },
-          { urls: 'stun:stun.miwifi.com:3478' },
-          // 备用服务器
-          { urls: 'stun:stun.voip.eutelia.it:3478' },
-          { urls: 'stun:openrelay.metered.ca:80' }
-        ]
-      });
-      peerConnectionRef.current = peerConnection;
-      const {code} = userInfo;
-      const opeartorId = code || sessionId;
-      // 创建WebSocket连接
-      console.log('开始连接WebSocket');
-      const ws = new WebSocket(`${hostUrl.replace('http', 'ws')}/api/v1/ws/webrtc?flow_id=${flowId}&session_id=${sessionId}&api_key=${api_key}&operator_id=${opeartorId}`);
-      wsRef.current = ws;
-      
-      // 添加连接超时处理
-      const connectionTimeout = setTimeout(() => {
-        if (ws.readyState === WebSocket.CONNECTING) {
-          console.error('WebSocket连接超时');
-          message.error('连接超时，请重试');
-          ws.close();
-        }
-      }, 60000); // 60秒超时
-      
-      // 创建和发送offer的函数
-      const createAndSendOffer = async (_peerConnection: RTCPeerConnection) => {
-        try {
-          const offer = await _peerConnection.createOffer();
-          await _peerConnection.setLocalDescription(offer);
-          
-          sendWebSocketMessage('offer', { offer });
-        } catch (error) {
-          console.error('创建offer失败:', error);
-        }
-      };
-      
-      ws.onopen = () => {
-        console.log('WebSocket连接已建立');
-        clearTimeout(connectionTimeout); // 清除超时定时器
-        
-        // 只有在WebSocket连接成功后才创建和发送offer
-        if (peerConnectionRef.current) {
-          createAndSendOffer(peerConnectionRef.current);
-        }
-      };
-      
-      const localStream = await navigator.mediaDevices.getUserMedia({
-        audio: {
-          echoCancellation: true, // 启用回声消除
-          noiseSuppression: true, // 启用噪声抑制
-          autoGainControl: true   // 启用自动增益控制
-        },
-        video: false
-      });
-      localStreamRef.current = localStream;
-      
-      // if (localAudioRef.current) {
-      //   localAudioRef.current.srcObject = localStream;
-      // }
-      
-      // 设置VAD(语音活动检测)
-      const audioContext = new AudioContext();
-      audioContextRef.current = audioContext;
-      const analyser = audioContext.createAnalyser();
-      analyser.fftSize = 256;
-      const bufferLength = analyser.frequencyBinCount;
-      const dataArray = new Uint8Array(bufferLength);
-      
-      const source = audioContext.createMediaStreamSource(localStream);
-      source.connect(analyser);
-      
-      // 创建音频处理器用于VAD
-      const vadProcessor = audioContext.createScriptProcessor(2048, 1, 1);
-      vadProcessorRef.current = vadProcessor;
-      
-      vadProcessor.onaudioprocess = (e) => {
-        // 正在听对方说话 or 思考，不处理
-        if (workStatus === '正在回复'){
-          console.log("--------------------- 正在回复")
-          return
-        }else if(msgIdRef.current !== null){
-          console.log("--------------------- 正在思考")
-          return;
-        }
-        
-        analyser.getByteFrequencyData(dataArray);
-        
-        // 计算音量平均值
-        let sum = 0;
-        for (let i = 0; i < bufferLength; i++) {
-          sum += dataArray[i];
-        }
-        const average = sum / bufferLength;
-        
-        // 检测是否有语音
-        const isSpeakingNow = average > SILENCE_THRESHOLD;
-
-        if (isSpeakingNow && !isSpeakingRef.current) {
-          setIsSpeakingNow(true)
-          // 开始说话
-          isSpeakingRef.current = true;
-
-          // 开始录制
-          if (!recorderRef.current && localStreamRef.current) {
-            console.log('准备录制');
-            const recorder = new Recorder({
-              type:"mp3",
-              sampleRate:16000,
-              bitRate:16,
-              sourceStream:localStreamRef.current,
-              runningContext:audioContextRef.current,
-              onProcess: (buffers: any, powerLevel: any, bufferDuration: any, bufferSampleRate: any, newBufferIdx: any, asyncEnd: any) => {
-                //录音实时回调，大约1秒调用12次本回调，buffers为开始到现在的所有录音pcm数据块(16位小端LE)
-                //可利用extensions/sonic.js插件实时变速变调，此插件计算量巨大，onProcess需要返回true开启异步模式
-                //可实时上传（发送）数据，配合Recorder.SampleData方法，将buffers中的新数据连续的转换成pcm上传，或使用mock方法将新数据连续的转码成其他格式上传，可以参考文档里面的：Demo片段列表 -> 实时转码并上传-通用版；基于本功能可以做到：实时转发数据、实时保存数据、实时语音识别（ASR）等
-
-                //可实时绘制波形（extensions目录内的waveview.js、wavesurfer.view.js、frequency.histogram.view.js插件功能）
-                // if(workStatus === '正在聆听'){
-                //   wave && wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate);
-                // }
-              }
-            });
-            recorderRef.current = recorder;
-            recorder.open(() => {
-              // if(Recorder.WaveView){
-              //   wave = Recorder.WaveView({elem: ".recwave"});
-              // }
-            });
-            recorder.start();
-          }
-
-          // 清除之前的超时
-          if (speechTimeoutRef.current) {
-            clearTimeout(speechTimeoutRef.current);
-            speechTimeoutRef.current = null;
-          }
-        }
-        else if (!isSpeakingNow && isSpeakingRef.current) {
-          // 可能停止说话，设置超时
-          if (!speechTimeoutRef.current) {
-            speechTimeoutRef.current = setTimeout(() => {
-              // 确认停止说话
-              isSpeakingRef.current = false;
-
-              // 停止录制
-              if (recorderRef.current) {
-                recorderRef.current.stop((blob: Blob, duration:any, mime:any) => {
-                  console.log('onstop', duration, mime);
-                  // 将音频转换为base64
-                  const reader = new FileReader();
-                  reader.readAsDataURL(blob);
-                  reader.onloadend = () => {
-                    const base64Audio = reader.result as string;
-                    // 发送完整的语音片段到服务器
-                    if (wsRef.current) {
-                      msgIdRef.current = new Date().getTime() + ""
-                      sendWebSocketMessage('complete-audio', {
-                        audioData: base64Audio.split(',')[1], // 移除data URL前缀
-                        userMessage: true,
-                        audioFormat:"mp3",
-                        sampleRate:16000,
-                        msgId: msgIdRef.current,
-                      });
-                      console.log('发送完毕');
-
-                      // 添加用户消息到聊天记录
-                      // addMessage({
-                      //   message: "[语音消息]",
-                      //   isSend: true,
-                      //   timestamp: new Date().toISOString()
-                      // });
-
-                      setWorkStatus('正在思考');
-                      setIsSpeakingNow(false)
-                    }
-                  };
-
-                  // wave = null
-                  recorderRef.current = null;
-                },(msg: any)=> {
-                  console.log("录音失败:"+msg);
-                  // wave = null
-                  recorderRef.current.close();//可以通过stop方法的第3个参数来自动调用close
-                  recorderRef.current=null;
-                });
-              }
-
-              speechTimeoutRef.current = null;
-            }, SPEECH_DELAY);
-          }
-        }
-        else if (isSpeakingNow && isSpeakingRef.current) {
-          console.log('继续说话');
-          // 继续说话，重置超时
-          if (speechTimeoutRef.current) {
-            clearTimeout(speechTimeoutRef.current);
-            speechTimeoutRef.current = null;
-          }
-        }
-      };
-      
-      // 连接VAD处理器
-      source.connect(vadProcessor);
-      vadProcessor.connect(audioContext.destination);
-      
-      // 修改WebSocket消息处理
-      ws.onmessage = async (event) => {
-        const message = JSON.parse(event.data);
-        console.log('收到消息', message);
-        
-        if (message.type === 'offer') {
-          await handleOffer(message);
-        } else if (message.type === 'answer') {
-          await handleAnswer(message);
-        } else if (message.type === 'ice-candidate') {
-          await handleIceCandidate(message);
-        } else if (message.type === 'connected') {
-          setCallStatus('connected');
-          if (message.audioData) {
-            handleAudioData(message.audioData);
-          }
-        } else if (message.type === 'complete-audio') {
-          // 处理从后端返回的完整音频响应
-          msgIdRef.current = null
-          if (message.audioData) {
-            handleAudioData(message.audioData);
-          }else {
-            setWorkStatus('正在聆听');
-          }
-        }
-      };
-      
-      // 添加本地音频轨道到对等连接
-      localStream.getTracks().forEach(track => {
-        peerConnection.addTrack(track, localStream);
-      });
-      
-      // 处理远程流
-      peerConnection.ontrack = (event) => {
-        remoteStreamRef.current = event.streams[0];
-        if (remoteAudioRef.current) {
-          remoteAudioRef.current.srcObject = event.streams[0];
-        }
-      };
-      
-      // 处理ICE候选
-      peerConnection.onicecandidate = (event) => {
-        if (event.candidate && wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
-          sendWebSocketMessage('ice-candidate', {candidate: event.candidate})
-        }
-      };
-    } catch (error) {
-      console.error('初始化WebRTC失败:', error);
-      message.error('无法访问麦克风，请检查权限设置');
-    }
-  };
-
-  const clear = () => {
-    console.log('CallInterface组件卸载');
-
-    if (responseAudio !== null){
-      responseAudio.pause();
-      responseAudio = null;
-    }
-
-    // 关闭WebSocket连接
-    if (wsRef.current) {
-      wsRef.current.close();
-    }
-    
-    // 关闭对等连接
-    if (peerConnectionRef.current) {
-      peerConnectionRef.current.close();
-    }
-    
-    // 停止所有媒体轨道
-    if (localStreamRef.current) {
-      localStreamRef.current.getTracks().forEach(track => track.stop());
-    }
-    
-    // 清理VAD相关资源
-    if (vadProcessorRef.current && audioContextRef.current) {
-      vadProcessorRef.current.disconnect();
-    }
-    
-    if (audioContextRef.current) {
-      audioContextRef.current.close();
-    }
-    
-    // 清理超时
-    if (speechTimeoutRef.current) {
-      clearTimeout(speechTimeoutRef.current);
-    }
-  }
-
-  // 初始化WebRTC连接
-  useEffect(() => {
-    initWebRTC().then();
-    // 清理函数
-    return clear
-  }, []);
-  
-  // 处理收到的offer
-  const handleOffer = async (message: any) => {
-    if (peerConnectionRef.current) {
-      await peerConnectionRef.current.setRemoteDescription(new RTCSessionDescription(message.offer));
-      const answer = await peerConnectionRef.current.createAnswer();
-      await peerConnectionRef.current.setLocalDescription(answer);
-      
-      if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
-        sendWebSocketMessage('answer', {answer})
-      } else {
-        console.error('WebSocket未连接，无法发送answer');
-      }
-    }
-  };
-  
-  // 处理收到的answer
-  const handleAnswer = async (message: any) => {
-    if (peerConnectionRef.current) {
-      await peerConnectionRef.current.setRemoteDescription(new RTCSessionDescription(message.answer));
-    }
-  };
-  
-  // 处理收到的ICE候选
-  const handleIceCandidate = async (message: any) => {
-    console.log('收到ICE候选', message);
-    if (peerConnectionRef.current) {
-      await peerConnectionRef.current.addIceCandidate(new RTCIceCandidate(message.candidate));
-    }
-  };
-  
-  // 计时器
-  useEffect(() => {
-    let timer: NodeJS.Timeout;
-    
-    if (callStatus === 'connected') {
-      timer = setInterval(() => {
-        setCallDuration(prev => prev + 1);
-      }, 1000);
-    }
-    
-    return () => {
-      if (timer) clearInterval(timer);
-    };
-  }, [callStatus]);
-  
-  // 格式化通话时间
-  const formatTime = (seconds: number) => {
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
-    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
-  };
-
-  const handleHangup = () => {
-    // 发送挂断信号
-    if (wsRef.current) {
-      sendWebSocketMessage('hangup', {});
-    }
-    
-    // 停止所有媒体轨道
-    if (localStreamRef.current) {
-      localStreamRef.current.getTracks().forEach(track => track.stop());
-    }
-    
-    onHangup();
-  };
-  
-  return (
-    <div className="call-interface">
-      <style dangerouslySetInnerHTML={{ __html: callStyle }}></style>
-      <div className="call-header">
-        <div className="contact-info">
-          <Avatar 
-            size={80} 
-            src={contactAvatar} 
-            style={{ backgroundColor: '#1890ff' }}
-          >
-            {!contactAvatar && contactName.charAt(0)}
-          </Avatar>
-          <h2>{contactName}</h2>
-          <p className="call-status">
-            {callStatus === 'connecting' ? '正在连接...' : formatTime(callDuration)}
-          </p>
-          {
-            callStatus === 'connected' &&
-              <div style={{display: 'flex', flexDirection:'column', justifyContent: 'center', alignItems: 'center'}}>
-                {/*<div style={{width: 120, height: 50, position: 'relative'}}>*/}
-                {/*  {*/}
-                {/*    <div className='recwave' style={{width: 120, height: 50, display: workStatus === '正在聆听' ? 'block' : 'none'}}></div>*/}
-                {/*  }*/}
-                {/*</div>*/}
-                  <div className='recwave' style={{width: 120, height: 65}}>{
-                    (isSpeakingNow &&  workStatus === '正在聆听')||  workStatus === '正在回复' ? <img src={ai_call_working}/>:<img src={ai_call_thinking}/>
-                  }</div>
-                <p className="call-status">
-                  {workStatus}
-                </p>
-              </div>
-
-          }
-        </div>
-      </div>
-      
-      {/* 音频元素 */}
-      <audio ref={localAudioRef} autoPlay muted style={{ display: 'none' }} />
-      <audio ref={remoteAudioRef} autoPlay style={{ display: 'none' }} />
-      
-      <div className="call-controls">
-        <Button 
-          type="primary" 
-          danger 
-          shape="circle" 
-          size="large"
-          onClick={handleHangup}
-          icon={<span className="hangup-icon">✕</span>}
-        />
-      </div>
-    </div>
-  );
-};
-
+import React, { useState, useEffect, useRef } from 'react';
+import { Button, Avatar, message } from 'antd';
+import './index.module.css';
+import { callStyle } from './style';
+import { ChatMessageType } from '../../chatWindow/types/chatWidget';
+import Recorder from 'recorder-core'
+import 'recorder-core/src/engine/mp3'
+import 'recorder-core/src/engine/mp3-engine'
+// import 'recorder-core/src/extensions/waveview'
+import ai_call_thinking from '../../../../assets/aicenter/ai_call_thinking.png'
+import ai_call_working from '../../../../assets/aicenter/ai_call_working.gif'
+
+
+interface CallInterfaceProps {
+  onHangup: () => void;
+  contactName?: string;
+  contactAvatar?: string;
+  api_key: string;
+  flowId: string;
+  sessionId: React.MutableRefObject<string>;
+  hostUrl: string;
+  addMessage: (message: ChatMessageType) => void;
+  userInfo: {
+    code: string;
+  };
+}
+
+const CallInterface: React.FC<CallInterfaceProps> = ({ 
+  onHangup, 
+  contactName = '', 
+  contactAvatar,
+  api_key,
+  flowId,
+  sessionId,
+  hostUrl,
+  addMessage,
+  userInfo,
+}) => {
+  const [callDuration, setCallDuration] = useState(0);
+  const [callStatus, setCallStatus] = useState<'connecting' | 'connected'>('connecting');
+  const [workStatus, setWorkStatus] = useState<'正在聆听' | '正在思考' | '正在回复'>('正在聆听');
+  
+  // 添加VAD相关状态
+  const isSpeakingRef = useRef<boolean>(false);
+  const SILENCE_THRESHOLD = 35; // 静音阈值，可根据环境调整
+  const SPEECH_DELAY = 1500; // 停止说话多久后认为一段话结束(毫秒)
+  // 发送信息后持有这个id，当id不为null放弃处理后续说话
+  const msgIdRef = useRef<string | null>(null);
+
+  // WebRTC相关状态和引用
+  const peerConnectionRef = useRef<RTCPeerConnection | null>(null);
+  const localStreamRef = useRef<MediaStream | null>(null);
+  const localAudioRef = useRef<HTMLAudioElement>(null);
+  const remoteStreamRef = useRef<MediaStream | null>(null);
+  const remoteAudioRef = useRef<HTMLAudioElement>(null);
+  let responseAudio: any = null;
+  // let wave: any = null;
+  const wsRef = useRef<WebSocket | null>(null);
+  
+  // VAD相关引用
+  const recorderRef = useRef<any | null>(null);
+  const speechTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const vadProcessorRef = useRef<ScriptProcessorNode | null>(null);
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const [isSpeakingNow,setIsSpeakingNow] = useState(false);
+
+
+  // 添加统一的WebSocket消息发送方法
+  const sendWebSocketMessage = (type: string, data: any) => {
+    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({type, data}));
+    } else {
+      console.error(`WebSocket未连接，无法发送${type}消息`);
+    }
+  };
+
+  const handleAudioData = (audioData: string) => {
+    setWorkStatus('正在回复');
+    
+    // 将base64音频转换为Blob
+    const byteCharacters = atob(audioData);
+    const byteNumbers = new Array(byteCharacters.length);
+    for (let i = 0; i < byteCharacters.length; i++) {
+      byteNumbers[i] = byteCharacters.charCodeAt(i);
+    }
+    const byteArray = new Uint8Array(byteNumbers);
+    const audioBlob = new Blob([byteArray], { type: 'audio/webm' });
+    
+    // 创建音频URL并播放
+    const audioUrl = URL.createObjectURL(audioBlob);
+    const audio = new Audio(audioUrl);
+    responseAudio = audio;
+    
+    // 监听用户打断
+    audio.onplay = () => {
+      // 设置打断检测，3秒后才启动
+      const interruptionCheck = setInterval(() => {
+        if (isSpeakingRef.current) {
+          // 用户开始说话，打断播放
+          // console.log('用户打断播放');
+          audio.pause();
+          URL.revokeObjectURL(audioUrl);
+          clearInterval(interruptionCheck);
+          setWorkStatus('正在聆听');
+        }
+      }, 3000);
+      
+      // 播放结束时清除检测
+      audio.onended = () => {
+        clearInterval(interruptionCheck);
+        URL.revokeObjectURL(audioUrl);
+        setWorkStatus('正在聆听');
+      };
+    };
+    
+    // 开始播放
+    audio.play().catch(err => {
+      console.error('播放音频失败:', err);
+      setWorkStatus('正在聆听');
+    });
+  };
+
+  const initWebRTC = async () => {
+    try {
+      const peerConnection = new RTCPeerConnection({
+        iceServers: [
+          // 替换为国内可用的STUN服务器
+          { urls: 'stun:stun.qq.com:3478' },
+          { urls: 'stun:stun.miwifi.com:3478' },
+          // 备用服务器
+          { urls: 'stun:stun.voip.eutelia.it:3478' },
+          { urls: 'stun:openrelay.metered.ca:80' }
+        ]
+      });
+      peerConnectionRef.current = peerConnection;
+      const {code} = userInfo;
+      const opeartorId = code || sessionId;
+      // 创建WebSocket连接
+      console.log('开始连接WebSocket');
+      const ws = new WebSocket(`${hostUrl.replace('http', 'ws')}/api/v1/ws/webrtc?flow_id=${flowId}&session_id=${sessionId}&api_key=${api_key}&operator_id=${opeartorId}`);
+      wsRef.current = ws;
+      
+      // 添加连接超时处理
+      const connectionTimeout = setTimeout(() => {
+        if (ws.readyState === WebSocket.CONNECTING) {
+          console.error('WebSocket连接超时');
+          message.error('连接超时，请重试');
+          ws.close();
+        }
+      }, 60000); // 60秒超时
+      
+      // 创建和发送offer的函数
+      const createAndSendOffer = async (_peerConnection: RTCPeerConnection) => {
+        try {
+          const offer = await _peerConnection.createOffer();
+          await _peerConnection.setLocalDescription(offer);
+          
+          sendWebSocketMessage('offer', { offer });
+        } catch (error) {
+          console.error('创建offer失败:', error);
+        }
+      };
+      
+      ws.onopen = () => {
+        console.log('WebSocket连接已建立');
+        clearTimeout(connectionTimeout); // 清除超时定时器
+        
+        // 只有在WebSocket连接成功后才创建和发送offer
+        if (peerConnectionRef.current) {
+          createAndSendOffer(peerConnectionRef.current);
+        }
+      };
+      
+      const localStream = await navigator.mediaDevices.getUserMedia({
+        audio: {
+          echoCancellation: true, // 启用回声消除
+          noiseSuppression: true, // 启用噪声抑制
+          autoGainControl: true   // 启用自动增益控制
+        },
+        video: false
+      });
+      localStreamRef.current = localStream;
+      
+      // if (localAudioRef.current) {
+      //   localAudioRef.current.srcObject = localStream;
+      // }
+      
+      // 设置VAD(语音活动检测)
+      const audioContext = new AudioContext();
+      audioContextRef.current = audioContext;
+      const analyser = audioContext.createAnalyser();
+      analyser.fftSize = 256;
+      const bufferLength = analyser.frequencyBinCount;
+      const dataArray = new Uint8Array(bufferLength);
+      
+      const source = audioContext.createMediaStreamSource(localStream);
+      source.connect(analyser);
+      
+      // 创建音频处理器用于VAD
+      const vadProcessor = audioContext.createScriptProcessor(2048, 1, 1);
+      vadProcessorRef.current = vadProcessor;
+      
+      vadProcessor.onaudioprocess = (e) => {
+        // 正在听对方说话 or 思考，不处理
+        if (workStatus === '正在回复'){
+          console.log("--------------------- 正在回复")
+          return
+        }else if(msgIdRef.current !== null){
+          console.log("--------------------- 正在思考")
+          return;
+        }
+        
+        analyser.getByteFrequencyData(dataArray);
+        
+        // 计算音量平均值
+        let sum = 0;
+        for (let i = 0; i < bufferLength; i++) {
+          sum += dataArray[i];
+        }
+        const average = sum / bufferLength;
+        
+        // 检测是否有语音
+        const isSpeakingNow = average > SILENCE_THRESHOLD;
+
+        if (isSpeakingNow && !isSpeakingRef.current) {
+          setIsSpeakingNow(true)
+          // 开始说话
+          isSpeakingRef.current = true;
+
+          // 开始录制
+          if (!recorderRef.current && localStreamRef.current) {
+            console.log('准备录制');
+            const recorder = new Recorder({
+              type:"mp3",
+              sampleRate:16000,
+              bitRate:16,
+              sourceStream:localStreamRef.current,
+              runningContext:audioContextRef.current,
+              onProcess: (buffers: any, powerLevel: any, bufferDuration: any, bufferSampleRate: any, newBufferIdx: any, asyncEnd: any) => {
+                //录音实时回调，大约1秒调用12次本回调，buffers为开始到现在的所有录音pcm数据块(16位小端LE)
+                //可利用extensions/sonic.js插件实时变速变调，此插件计算量巨大，onProcess需要返回true开启异步模式
+                //可实时上传（发送）数据，配合Recorder.SampleData方法，将buffers中的新数据连续的转换成pcm上传，或使用mock方法将新数据连续的转码成其他格式上传，可以参考文档里面的：Demo片段列表 -> 实时转码并上传-通用版；基于本功能可以做到：实时转发数据、实时保存数据、实时语音识别（ASR）等
+
+                //可实时绘制波形（extensions目录内的waveview.js、wavesurfer.view.js、frequency.histogram.view.js插件功能）
+                // if(workStatus === '正在聆听'){
+                //   wave && wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate);
+                // }
+              }
+            });
+            recorderRef.current = recorder;
+            recorder.open(() => {
+              // if(Recorder.WaveView){
+              //   wave = Recorder.WaveView({elem: ".recwave"});
+              // }
+            });
+            recorder.start();
+          }
+
+          // 清除之前的超时
+          if (speechTimeoutRef.current) {
+            clearTimeout(speechTimeoutRef.current);
+            speechTimeoutRef.current = null;
+          }
+        }
+        else if (!isSpeakingNow && isSpeakingRef.current) {
+          // 可能停止说话，设置超时
+          if (!speechTimeoutRef.current) {
+            speechTimeoutRef.current = setTimeout(() => {
+              // 确认停止说话
+              isSpeakingRef.current = false;
+
+              // 停止录制
+              if (recorderRef.current) {
+                recorderRef.current.stop((blob: Blob, duration:any, mime:any) => {
+                  console.log('onstop', duration, mime);
+                  // 将音频转换为base64
+                  const reader = new FileReader();
+                  reader.readAsDataURL(blob);
+                  reader.onloadend = () => {
+                    const base64Audio = reader.result as string;
+                    // 发送完整的语音片段到服务器
+                    if (wsRef.current) {
+                      msgIdRef.current = new Date().getTime() + ""
+                      sendWebSocketMessage('complete-audio', {
+                        audioData: base64Audio.split(',')[1], // 移除data URL前缀
+                        userMessage: true,
+                        audioFormat:"mp3",
+                        sampleRate:16000,
+                        msgId: msgIdRef.current,
+                      });
+                      console.log('发送完毕');
+
+                      // 添加用户消息到聊天记录
+                      // addMessage({
+                      //   message: "[语音消息]",
+                      //   isSend: true,
+                      //   timestamp: new Date().toISOString()
+                      // });
+
+                      setWorkStatus('正在思考');
+                      setIsSpeakingNow(false)
+                    }
+                  };
+
+                  // wave = null
+                  recorderRef.current = null;
+                },(msg: any)=> {
+                  console.log("录音失败:"+msg);
+                  // wave = null
+                  recorderRef.current.close();//可以通过stop方法的第3个参数来自动调用close
+                  recorderRef.current=null;
+                });
+              }
+
+              speechTimeoutRef.current = null;
+            }, SPEECH_DELAY);
+          }
+        }
+        else if (isSpeakingNow && isSpeakingRef.current) {
+          console.log('继续说话');
+          // 继续说话，重置超时
+          if (speechTimeoutRef.current) {
+            clearTimeout(speechTimeoutRef.current);
+            speechTimeoutRef.current = null;
+          }
+        }
+      };
+      
+      // 连接VAD处理器
+      source.connect(vadProcessor);
+      vadProcessor.connect(audioContext.destination);
+      
+      // 修改WebSocket消息处理
+      ws.onmessage = async (event) => {
+        const message = JSON.parse(event.data);
+        console.log('收到消息', message);
+        
+        if (message.type === 'offer') {
+          await handleOffer(message);
+        } else if (message.type === 'answer') {
+          await handleAnswer(message);
+        } else if (message.type === 'ice-candidate') {
+          await handleIceCandidate(message);
+        } else if (message.type === 'connected') {
+          setCallStatus('connected');
+          if (message.audioData) {
+            handleAudioData(message.audioData);
+          }
+        } else if (message.type === 'complete-audio') {
+          // 处理从后端返回的完整音频响应
+          msgIdRef.current = null
+          if (message.audioData) {
+            handleAudioData(message.audioData);
+          }else {
+            setWorkStatus('正在聆听');
+          }
+        }
+      };
+      
+      // 添加本地音频轨道到对等连接
+      localStream.getTracks().forEach(track => {
+        peerConnection.addTrack(track, localStream);
+      });
+      
+      // 处理远程流
+      peerConnection.ontrack = (event) => {
+        remoteStreamRef.current = event.streams[0];
+        if (remoteAudioRef.current) {
+          remoteAudioRef.current.srcObject = event.streams[0];
+        }
+      };
+      
+      // 处理ICE候选
+      peerConnection.onicecandidate = (event) => {
+        if (event.candidate && wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+          sendWebSocketMessage('ice-candidate', {candidate: event.candidate})
+        }
+      };
+    } catch (error) {
+      console.error('初始化WebRTC失败:', error);
+      message.error('无法访问麦克风，请检查权限设置');
+    }
+  };
+
+  const clear = () => {
+    console.log('CallInterface组件卸载');
+
+    if (responseAudio !== null){
+      responseAudio.pause();
+      responseAudio = null;
+    }
+
+    // 关闭WebSocket连接
+    if (wsRef.current) {
+      wsRef.current.close();
+    }
+    
+    // 关闭对等连接
+    if (peerConnectionRef.current) {
+      peerConnectionRef.current.close();
+    }
+    
+    // 停止所有媒体轨道
+    if (localStreamRef.current) {
+      localStreamRef.current.getTracks().forEach(track => track.stop());
+    }
+    
+    // 清理VAD相关资源
+    if (vadProcessorRef.current && audioContextRef.current) {
+      vadProcessorRef.current.disconnect();
+    }
+    
+    if (audioContextRef.current) {
+      audioContextRef.current.close();
+    }
+    
+    // 清理超时
+    if (speechTimeoutRef.current) {
+      clearTimeout(speechTimeoutRef.current);
+    }
+  }
+
+  // 初始化WebRTC连接
+  useEffect(() => {
+    initWebRTC().then();
+    // 清理函数
+    return clear
+  }, []);
+  
+  // 处理收到的offer
+  const handleOffer = async (message: any) => {
+    if (peerConnectionRef.current) {
+      await peerConnectionRef.current.setRemoteDescription(new RTCSessionDescription(message.offer));
+      const answer = await peerConnectionRef.current.createAnswer();
+      await peerConnectionRef.current.setLocalDescription(answer);
+      
+      if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+        sendWebSocketMessage('answer', {answer})
+      } else {
+        console.error('WebSocket未连接，无法发送answer');
+      }
+    }
+  };
+  
+  // 处理收到的answer
+  const handleAnswer = async (message: any) => {
+    if (peerConnectionRef.current) {
+      await peerConnectionRef.current.setRemoteDescription(new RTCSessionDescription(message.answer));
+    }
+  };
+  
+  // 处理收到的ICE候选
+  const handleIceCandidate = async (message: any) => {
+    console.log('收到ICE候选', message);
+    if (peerConnectionRef.current) {
+      await peerConnectionRef.current.addIceCandidate(new RTCIceCandidate(message.candidate));
+    }
+  };
+  
+  // 计时器
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    
+    if (callStatus === 'connected') {
+      timer = setInterval(() => {
+        setCallDuration(prev => prev + 1);
+      }, 1000);
+    }
+    
+    return () => {
+      if (timer) clearInterval(timer);
+    };
+  }, [callStatus]);
+  
+  // 格式化通话时间
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  const handleHangup = () => {
+    // 发送挂断信号
+    if (wsRef.current) {
+      sendWebSocketMessage('hangup', {});
+    }
+    
+    // 停止所有媒体轨道
+    if (localStreamRef.current) {
+      localStreamRef.current.getTracks().forEach(track => track.stop());
+    }
+    
+    onHangup();
+  };
+  
+  return (
+    <div className="call-interface">
+      <style dangerouslySetInnerHTML={{ __html: callStyle }}></style>
+      <div className="call-header">
+        <div className="contact-info">
+          <Avatar 
+            size={80} 
+            src={contactAvatar} 
+            style={{ backgroundColor: '#1890ff' }}
+          >
+            {!contactAvatar && contactName.charAt(0)}
+          </Avatar>
+          <h2>{contactName}</h2>
+          <p className="call-status">
+            {callStatus === 'connecting' ? '正在连接...' : formatTime(callDuration)}
+          </p>
+          {
+            callStatus === 'connected' &&
+              <div style={{display: 'flex', flexDirection:'column', justifyContent: 'center', alignItems: 'center'}}>
+                {/*<div style={{width: 120, height: 50, position: 'relative'}}>*/}
+                {/*  {*/}
+                {/*    <div className='recwave' style={{width: 120, height: 50, display: workStatus === '正在聆听' ? 'block' : 'none'}}></div>*/}
+                {/*  }*/}
+                {/*</div>*/}
+                  <div className='recwave' style={{width: 120, height: 65}}>{
+                    (isSpeakingNow &&  workStatus === '正在聆听')||  workStatus === '正在回复' ? <img src={ai_call_working}/>:<img src={ai_call_thinking}/>
+                  }</div>
+                <p className="call-status">
+                  {workStatus}
+                </p>
+              </div>
+
+          }
+        </div>
+      </div>
+      
+      {/* 音频元素 */}
+      <audio ref={localAudioRef} autoPlay muted style={{ display: 'none' }} />
+      <audio ref={remoteAudioRef} autoPlay style={{ display: 'none' }} />
+      
+      <div className="call-controls">
+        <Button 
+          type="primary" 
+          danger 
+          shape="circle" 
+          size="large"
+          onClick={handleHangup}
+          icon={<span className="hangup-icon">✕</span>}
+        />
+      </div>
+    </div>
+  );
+};
+
 export default CallInterface;