feat(webapp): change device default enable

binbat · Dec 15, 2023 · a5f0165 · a5f0165
1 parent 1460593
commit a5f0165
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 22 deletions.
diff --git a/webapp/components/device.tsx b/webapp/components/device.tsx
@@ -21,7 +21,6 @@ export default function DeviceBar() {
   const disableDevice = "none"
   const refEnabled = useRef(false)
 
-  const [permission, setPermission] = useState("...")
   const [permissionAudio, setPermissionAudio] = useState("...")
   const [permissionVideo, setPermissionVideo] = useState("...")
 
@@ -59,20 +58,6 @@ export default function DeviceBar() {
       }
     })
 
-  const requestPermission = async () => {
-    try {
-      permissionsQuery()
-      const result = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
-      result instanceof MediaStream ? setPermission("success") : setPermission("error")
-      result.getTracks().map(track => track.stop())
-      //@ts-ignore
-    } catch ({ name, message }) {
-      setPermission(message)
-    } finally {
-      await permissionsQuery()
-    }
-  }
-
   const updateDeviceList = async () => {
     const devices = await navigator.mediaDevices.enumerateDevices()
     const audios: Device[] = []
@@ -88,6 +73,22 @@ export default function DeviceBar() {
       }
     })
 
+    if (currentDeviceAudio === disableDevice && currentSelectDeviceAudio === disableDevice) {
+      let device = audios[0]
+      if (device) {
+        setCurrentDeviceAudio(device.deviceId)
+        setCurrentSelectDeviceAudio(device.deviceId)
+      }
+    }
+
+    if (currentDeviceVideo === disableDevice && currentSelectDeviceVideo === disableDevice) {
+      let device = videos[0]
+      if (device) {
+        setCurrentDeviceVideo(device.deviceId)
+        setCurrentSelectDeviceVideo(device.deviceId)
+      }
+    }
+
     setDeviceAudio([deviceNone, ...audios])
     setDeviceVideo([deviceNone, ...videos, deviceScreen])
   }
@@ -98,7 +99,7 @@ export default function DeviceBar() {
       // In some device have problem:
       // - Android Web Browser
       // - Wechat WebView
-      await requestPermission()
+      await permissionsQuery()
     } catch { }
     await updateDeviceList()
   }
@@ -191,10 +192,6 @@ export default function DeviceBar() {
   return (
     <div className='flex flex-row flex-wrap justify-around p-xs'>
       <center className='basis-full'>
-        <label className='text-white'>
-          Your Device Status: <code className={permission === "success" ? "text-green" : "text-red"}>{permission}</code>
-        </label>
-
         <section className='flex flex-row justify-center text-white'>
           <div className='mx-xs'>
             Microphone: <code className={permissionAudio === "granted" ? "text-green" : "text-red"}>{permissionAudio}</code>

diff --git a/webapp/components/prepare.tsx b/webapp/components/prepare.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useAtom } from 'jotai'
 import DeviceBar from './device'
 import Loading from "./loading"
@@ -15,10 +15,11 @@ import { asyncGetStreamId } from '../lib/storage'
 
 export default function Prepare(props: { meetingId: string }) {
   const [loading, setLoading] = useState<boolean>(false)
+  const refEnabled = useRef(false)
 
   const [displayName, setDisplayName] = useAtom(displayNameAtom)
 
-  const [localStream] = useAtom(localStreamAtom)
+  const [localStream, setLocalStream] = useAtom(localStreamAtom)
   const [localStreamId, setLocalStreamId] = useAtom(localStreamIdAtom)
   const [localUserStatus, setLocalUserStatus] = useAtom(localUserStatusAtom)
   const [_, setMeetingJoined] = useAtom(meetingJoinedAtom)
@@ -40,6 +41,23 @@ export default function Prepare(props: { meetingId: string }) {
     setMeetingJoined(true)
   }
 
+  const init = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ video: { width: 320 }, audio: true })
+      setLocalStream({
+        stream: stream,
+        name: "Me",
+      })
+    } catch { }
+  }
+
+  useEffect(() => {
+    if (!refEnabled.current) {
+      refEnabled.current = true
+      init()
+    }
+  }, [])
+
   return (
     <div className='flex flex-col justify-around'>
       <center className='m-xs'>