fix: premission request, close #156

Author: antfu

packages/client/internals/MenuButton.vue

@@ -25,12 +25,14 @@ onClickOutside(el, () => {
     <button :class="{ disabled }" @click="value = !value">
       <slot name="button" :class="{ disabled }" />
     </button>
-    <div
-      v-show="value"
-      class="rounded-md bg-main shadow absolute bottom-10 left-0 z-20"
-      dark:border="~ gray-400 opacity-10"
-    >
-      <slot name="menu" />
-    </div>
+    <KeepAlive>
+      <div
+        v-if="value"
+        class="rounded-md bg-main shadow absolute bottom-10 left-0 z-20"
+        dark:border="~ gray-400 opacity-10"
+      >
+        <slot name="menu" />
+      </div>
+    </KeepAlive>
   </div>
 </template>

packages/client/internals/Modal.vue

@@ -22,19 +22,21 @@ function onClick(e: MouseEvent) {
 </script>
 
 <template>
-  <div
-    v-show="value"
-    ref="container"
-    class="fixed top-0 bottom-0 left-0 right-0 grid z-20"
-    bg="black opacity-80"
-    @click="onClick"
-  >
+  <KeepAlive>
     <div
-      class="m-auto rounded-md bg-main shadow"
-      dark:border="~ gray-400 opacity-10"
-      :class="props.class"
+      v-if="value"
+      ref="container"
+      class="fixed top-0 bottom-0 left-0 right-0 grid z-20"
+      bg="black opacity-80"
+      @click="onClick"
     >
-      <slot />
+      <div
+        class="m-auto rounded-md bg-main shadow"
+        dark:border="~ gray-400 opacity-10"
+        :class="props.class"
+      >
+        <slot />
+      </div>
     </div>
-  </div>
+  </KeepAlive>
 </template>

packages/client/logic/recording.ts

@@ -1,4 +1,4 @@
-import { Ref, ref, shallowRef, watch } from 'vue'
+import { nextTick, Ref, ref, shallowRef, watch } from 'vue'
 import { useEventListener, useDevicesList } from '@vueuse/core'
 import { isTruthy } from '@antfu/utils'
 import RecorderType from 'recordrtc'
@@ -76,6 +76,8 @@ export function useRecording() {
   }
 
   async function startCameraStream() {
+    await ensureDevicesListPermissions()
+    await nextTick()
     if (!streamCamera.value) {
       if (currentCamera.value === 'none' && currentMic.value === 'none')
         return
@@ -111,6 +113,7 @@ export function useRecording() {
   })
 
   async function startRecording() {
+    await ensureDevicesListPermissions()
     const { default: Recorder } = await import('recordrtc')
     await startCameraStream()