finish speaker button

webapp/components/device.tsx

@@ -174,8 +174,7 @@ export default function DeviceBar(props: { streamId: string }) {
           }}>
             <center>{ loadingSpeaker ? <Loading/> : <SvgSpeaker/> }</center>
           </button>
-          <div className="flex flex-col justify-between w-1 pointer-events-none">
-          </div>
+          <div className="flex flex-col justify-between w-1 pointer-events-none"></div>
           <select
             className="w-3.5 h-8 rounded-sm rotate-180"
             value={currentDeviceSpeaker}

webapp/components/layout.tsx

@@ -69,7 +69,7 @@ export default function Layout(props: { meetingId: string }) {
       <div></div>
 
       {enabledPresentation
-        ? <Player stream={presentationStream.stream} muted={true} width="auto" />
+        ? <Player stream={presentationStream.stream} muted={true} width="auto" currentDeviceSpeaker={'none'} />
         : null
       }
 

webapp/components/player/player.tsx

@@ -29,7 +29,7 @@ function AudioWave(props: { stream: MediaStream }) {
   return <div ref={refWave}></div>
 }
 
-export default function Player(props: { stream: MediaStream, muted: boolean, audio?: boolean, video?: boolean, width: string }) {
+export default function Player(props: { stream: MediaStream, muted: boolean, audio?: boolean, video?: boolean, width: string, currentDeviceSpeaker: string}) {
   const refVideo = useRef<HTMLVideoElement>(null)
   const [showAudio, setShowAudio] = useState(false)
   const audioTrack = props.stream.getAudioTracks()[0]
@@ -44,6 +44,10 @@ export default function Player(props: { stream: MediaStream, muted: boolean, aud
     if (audioTrack && props.audio) {
       const el = document.createElement('audio')
       el.srcObject = new MediaStream([audioTrack])
+
+      if (el.setSinkId) {
+        el.setSinkId(props.currentDeviceSpeaker) 
+      } 
       el.play()
 
       return () => {
@@ -52,7 +56,7 @@ export default function Player(props: { stream: MediaStream, muted: boolean, aud
         el.remove()
       }
     }
-  }, [audioTrack, videoTrack])
+  }, [audioTrack, videoTrack, props.currentDeviceSpeaker])
 
   useEffect(() => {
     if (refVideo.current && videoTrack) {

webapp/components/player/whep-player.tsx

@@ -5,9 +5,13 @@ import Detail from './detail'
 import Player from './player'
 import { presentationStreamAtom } from '../../store/atom'
 import { Stream } from '../../lib/api'
+import useWhipClient from '../use/whip'
+import {getStorageStream } from '../../lib/storage'
 
 export default function WhepPlayer(props: { streamId: string, userStatus: Stream, width: string }) {
   const refEnabled = useRef(false)
+  const localStreamId = getStorageStream()
+  const { currentDeviceSpeaker} = useWhipClient(localStreamId)
   const { stream, restart, start, connStatus, setRemoteStatus } = useWhepClient(props.streamId)
   const [, setPresentationStream] = useAtom(presentationStreamAtom)
 
@@ -31,7 +35,7 @@ export default function WhepPlayer(props: { streamId: string, userStatus: Stream
 
   return (
     <center className="flex flex-col">
-      <Player stream={stream} muted={false} width={props.width} audio={true} video={props.userStatus.video} />
+      <Player stream={stream} muted={false} width={props.width} audio={true} video={props.userStatus.video} currentDeviceSpeaker={currentDeviceSpeaker}/>
       <Detail streamId={props.streamId} connStatus={connStatus} userStatus={props.userStatus} restart={restart} />
     </center>
   )

webapp/components/player/whip-player.tsx

@@ -18,7 +18,7 @@ export default function WhipPlayer(props: { streamId: string, width: string }) {
 
   return (
     <center className="flex flex-col">
-      <Player stream={stream} muted={true} width={props.width} audio={false} video={userStatus.video} />
+      <Player stream={stream} muted={true} width={props.width} audio={false} video={userStatus.video} currentDeviceSpeaker={'none'}/>
       <Detail streamId={props.streamId} connStatus={userStatus.state} userStatus={userStatus} restart={restart} />
     </center>
   )

webapp/components/prepare.tsx

@@ -18,7 +18,7 @@ export default function Prepare(_props: { meetingId: string }) {
   const localStreamId = getStorageStream()
   const [_, setMeetingJoined] = useAtom(meetingJoinedAtom)
 
-  const { id, stream, setUserName, setSyncUserStatus, start } = useWhipClient(localStreamId)
+  const { id, stream, currentDeviceSpeaker,setUserName, setSyncUserStatus, start } = useWhipClient(localStreamId)
 
   const join = async () => {
     setLoading(true)
@@ -39,7 +39,7 @@ export default function Prepare(_props: { meetingId: string }) {
   return (
     <div className="flex flex-col justify-around">
       <center className="m-xs">
-        <Player stream={stream} muted={true} width="320px" audio={true} video={true} />
+        <Player stream={stream} muted={true} width="320px" audio={true} video={true} currentDeviceSpeaker={currentDeviceSpeaker}/>
       </center>
 
       <center className="mb-xs">

webapp/components/use/whip.ts

@@ -25,7 +25,6 @@ interface WHIPData extends Data {
 }
 
 class WHIPContext extends Context {
-  private audioElement: HTMLAudioElement
   client: WHIPClient = new WHIPClient()
   cache: WHIPData
 
@@ -38,7 +37,6 @@ class WHIPContext extends Context {
 
   constructor(id: string) {
     super(id)
-    this.audioElement = document.createElement('audio')
     this.cache = this.clone()
   }
 
@@ -111,31 +109,10 @@ class WHIPContext extends Context {
   async setCurrentDeviceSpeaker(current: string) {
     const { userStatus, currentDeviceSpeaker } = this
 
-    // 检查是否需要切换设备
     if (current !== currentDeviceSpeaker || !userStatus.speaker) {
-      if (!this.audioElement) {
-        // 使用全局或共享的 audioElement
-        this.audioElement = document.createElement('audio')
-        document.body.appendChild(this.audioElement)
-      }
-
-      // 设置新的扬声器设备
-      if (this.audioElement.setSinkId) {
-        try {
-          await this.audioElement.setSinkId(current)
-          console.log(`扬声器切换到设备: ${current}`)
-        } catch (error) {
-          console.error('切换音频输出设备失败:', error)
-        }
-      } else {
-        console.error('当前浏览器不支持 setSinkId')
-      }
-
-      // 更新状态
       userStatus.speaker = current === deviceNone.deviceId ? false : true
       this.currentDeviceSpeaker = current === deviceNone.deviceId ? this.currentDeviceSpeaker : current
 
-      // 同步状态并触发相关回调
       this.sync()
       this.syncUserStatus(userStatus)
     }

webapp/store/atom.ts

@@ -16,6 +16,7 @@ interface UserStatus {
    */
   name: string
   state: StreamState
+  speaker: boolean
   audio: boolean
   video: boolean
   screen: boolean