diff --git a/webapp/components/device.tsx b/webapp/components/device.tsx index 6955d08..0506b03 100644 --- 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 (
- -
Microphone: {permissionAudio} diff --git a/webapp/components/prepare.tsx b/webapp/components/prepare.tsx index e8c6972..d2d74a4 100644 --- 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(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 (