Speaker button

webapp/components/device.tsx

@@ -7,6 +7,7 @@ import {
 } from '../lib/device'
 
 import Loading from './svg/loading'
+import SvgSpeaker from './svg/speaker'
 import SvgAudio from './svg/audio'
 import SvgVideo from './svg/video'
 import { SvgPresentCancel, SvgPresentToAll } from './svg/present'
@@ -24,20 +25,24 @@ export default function DeviceBar(props: { streamId: string }) {
   const [permissionAudio, setPermissionAudio] = useState('')
   const [permissionVideo, setPermissionVideo] = useState('')
 
+  const [loadingSpeaker, setLoadingSpeaker] = useState(false)
   const [loadingAudio, setLoadingAudio] = useState(false)
   const [loadingVideo, setLoadingVideo] = useState(false)
   const [loadingScreen, setLoadingScreen] = useState(false)
 
   const {
     userStatus,
+    currentDeviceSpeaker,
     currentDeviceAudio,
     currentDeviceVideo,
+    setCurrentDeviceSpeaker,
     setCurrentDeviceAudio,
     setCurrentDeviceVideo,
     toggleEnableAudio,
     toggleEnableVideo,
   } = useWhipClient(props.streamId)
 
+  const [deviceSpeaker, setDeviceSpeaker] = useState<Device[]>([deviceNone])
   const [deviceAudio, setDeviceAudio] = useState<Device[]>([deviceNone])
   const [deviceVideo, setDeviceVideo] = useState<Device[]>([deviceNone])
 
@@ -82,9 +87,15 @@ export default function DeviceBar(props: { streamId: string }) {
 
     const devices = (await navigator.mediaDevices.enumerateDevices()).filter(i => !!i.deviceId)
 
+    const speakers = devices.filter(i => i.kind === 'audiooutput').map(toDevice)
     const audios = devices.filter(i => i.kind === 'audioinput').map(toDevice)
     const videos = devices.filter(i => i.kind === 'videoinput').map(toDevice)
 
+    if ( currentDeviceSpeaker === deviceNone.deviceId) {
+      const device = speakers[0]
+      if (device) await setCurrentDeviceSpeaker(device.deviceId)
+    } 
+
     if (currentDeviceAudio === deviceNone.deviceId) {
       const device = audios[0]
       if (device) await setCurrentDeviceAudio(device.deviceId)
@@ -95,6 +106,7 @@ export default function DeviceBar(props: { streamId: string }) {
       if (device) await setCurrentDeviceVideo(device.deviceId)
     }
 
+    setDeviceSpeaker([...speakers])
     setDeviceAudio([...audios])
     setDeviceVideo([...videos, deviceScreen])
   }
@@ -130,6 +142,12 @@ export default function DeviceBar(props: { streamId: string }) {
     return () => { navigator.mediaDevices.removeEventListener('devicechange', updateDeviceList) }
   }, [])
 
+  const onChangedDeviceSpeaker = async (current: string) => {
+    setLoadingSpeaker(true)
+    await setCurrentDeviceSpeaker(current)
+    setLoadingSpeaker(false)
+  }
+
   const onChangedDeviceAudio = async (current: string) => {
     setLoadingAudio(true)
     await setCurrentDeviceAudio(current)
@@ -151,6 +169,23 @@ export default function DeviceBar(props: { streamId: string }) {
   return (
     <div className="flex flex-row flex-wrap justify-around p-xs">
       <center className="flex flex-row flex-wrap justify-around">
+        <section className="m-1 p-1 flex flex-row justify-center rounded-md border-1 border-indigo-500">
+          <button className="text-rose-400 rounded-md w-8 h-8" onClick={async () => {
+          }}>
+            <center>{ loadingSpeaker ? <Loading/> : <SvgSpeaker/> }</center>
+          </button>
+          <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}
+            onChange={e => onChangedDeviceSpeaker(e.target.value)}
+          >
+            {deviceSpeaker.map(device =>
+              <option key={device.deviceId} value={device.deviceId}>{device.label}</option>
+            )}
+          </select>
+        </section>
+
         <section className="m-1 p-1 flex flex-row justify-center rounded-md border-1 border-indigo-500">
           <button className="text-rose-400 rounded-md w-8 h-8" onClick={async () => {
             setLoadingAudio(true)

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/svg/speaker.tsx

@@ -0,0 +1,8 @@
+export default function SvgSpeaker() {
+  return (
+    <svg focusable="false" width="24" height="24" viewBox="0 0 24 24">
+      <path fill="currentColor" d="M4 7h4l5-5v20l-5-5H4c-1.1 0-2-.9-2-2V9c0-1.1.9-2 2-2zm11.54 3.88l1.41-1.41c1.78 1.78 1.78 4.66 0 6.44l-1.41-1.41c1.17-1.17 1.17-3.07 0-4.24zm2.83-2.83l1.41-1.41c3.12 3.12 3.12 8.19 0 11.31l-1.41-1.41c2.34-2.34 2.34-6.13 0-8.49z"></path>
+    </svg>
+  )
+}
+

webapp/components/use/whip.ts

@@ -13,10 +13,13 @@ interface WHIPData extends Data {
   setUserName: (name: string) => void,
   setSyncUserStatus: (callback: (userStatus: Stream) => void) => void,
 
+  currentDeviceSpeaker: string,
   currentDeviceAudio: string,
   currentDeviceVideo: string,
+  setCurrentDeviceSpeaker: (current: string) => Promise<void>,
   setCurrentDeviceAudio: (current: string) => Promise<void>,
   setCurrentDeviceVideo: (current: string) => Promise<void>,
+  toggleEnableSpeaker: () => Promise<void>,
   toggleEnableAudio: () => Promise<void>,
   toggleEnableVideo: () => Promise<void>,
 }
@@ -25,8 +28,10 @@ class WHIPContext extends Context {
   client: WHIPClient = new WHIPClient()
   cache: WHIPData
 
+  currentDeviceSpeaker = deviceNone.deviceId
   currentDeviceAudio = deviceNone.deviceId
   currentDeviceVideo = deviceNone.deviceId
+  toggleEnableSpeaker = async () => this.setCurrentDeviceSpeaker(this.userStatus.speaker ? deviceNone.deviceId : this.currentDeviceSpeaker)
   toggleEnableAudio = async () => this.setCurrentDeviceAudio(this.userStatus.audio ? deviceNone.deviceId : this.currentDeviceAudio)
   toggleEnableVideo = async () => this.setCurrentDeviceVideo(this.userStatus.video ? deviceNone.deviceId : this.currentDeviceVideo)
 
@@ -64,10 +69,13 @@ class WHIPContext extends Context {
       setUserName: (name: string) => this.setUserName(name),
       setSyncUserStatus: (callback: (userStatus: Stream) => void) => this.setSyncUserStatus(callback),
 
+      currentDeviceSpeaker: this.currentDeviceSpeaker,
       currentDeviceAudio: this.currentDeviceAudio,
       currentDeviceVideo: this.currentDeviceVideo,
+      setCurrentDeviceSpeaker: (current: string) => this.setCurrentDeviceSpeaker(current),
       setCurrentDeviceAudio: (current: string) => this.setCurrentDeviceAudio(current),
       setCurrentDeviceVideo: (current: string) => this.setCurrentDeviceVideo(current),
+      toggleEnableSpeaker: () => this.toggleEnableSpeaker(),
       toggleEnableAudio: () => this.toggleEnableAudio(),
       toggleEnableVideo: () => this.toggleEnableVideo(),
     }
@@ -98,6 +106,18 @@ class WHIPContext extends Context {
     }
   }
 
+  async setCurrentDeviceSpeaker(current: string) {
+    const { userStatus, currentDeviceSpeaker } = this
+
+    if (current !== currentDeviceSpeaker || !userStatus.speaker) {
+      userStatus.speaker = current === deviceNone.deviceId ? false : true
+      this.currentDeviceSpeaker = current === deviceNone.deviceId ? this.currentDeviceSpeaker : current
+
+      this.sync()
+      this.syncUserStatus(userStatus)
+    }
+  }
+
   onChangedDeviceAudio() {
     const { pc, stream } = this
     // If WebRTC is connected, switch track

webapp/components/use/whxp.ts

@@ -19,6 +19,7 @@ class Context extends EventTarget {
   userStatus: Stream = {
     name: '',
     state: StreamState.New,
+    speaker: true,
     audio: true,
     video: true,
     screen: false,

webapp/lib/api.ts

@@ -24,6 +24,7 @@ enum StreamState {
 interface Stream {
   name: string,
   state: StreamState
+  speaker: boolean,
   audio: boolean,
   video: boolean,
   screen: boolean,

webapp/store/atom.ts

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