Merge pull request #9 from ShouChenICU/dev

1、新增分辨率选项 2、后台日志脱敏

Author: ShouChenICU

components/NavBar.vue

@@ -36,7 +36,7 @@ onMounted(() => {
       <img src="/favicon.webp" alt="web camera" class="size-6 mr-2" />
       <div>
         <span>WebCamera</span>
-        <span class="ml-2 text-xs">v0.1.2</span>
+        <span class="ml-2 text-xs">v0.1.3</span>
       </div>
     </NuxtLink>
 

i18n.config.ts

@@ -35,6 +35,11 @@ export default defineI18nConfig(() => ({
         connectionID: 'Connection ID',
         audioDev: 'Audio device',
         videoDev: 'Video device',
+        resolution: 'Resolution',
+        '4K_priority': '4K Priority',
+        '2K_priority': '2K Priority',
+        '1080P_priority': '1080P Priority',
+        '720P_priority': '720P Priority',
         record: 'Record',
         recordSettings: 'Record settings',
         format: 'Format',
@@ -119,6 +124,11 @@ export default defineI18nConfig(() => ({
         connectionID: '连接ID',
         audioDev: '音频设备',
         videoDev: '视频设备',
+        resolution: '分辨率',
+        '4K_priority': '4K优先',
+        '2K_priority': '2K优先',
+        '1080P_priority': '1080P优先',
+        '720P_priority': '720P优先',
         record: '录制',
         recordSettings: '录制设置',
         format: '格式',

pages/camera.vue

@@ -12,10 +12,17 @@ const curStream = ref<MediaStream>()
 // 当前音视频设备
 const curVideoDevInfo = ref({ id: undefined, label: undefined })
 const curAudioDevInfo = ref({ id: undefined, label: undefined })
+const curResolution = ref('4K_priority')
 
 // 可选音视频设备
 const videoDevList = ref<Array<any>>([])
 const audioDevList = ref<Array<any>>([])
+const resolutionList = ref<Array<any>>([
+  '4K_priority',
+  '2K_priority',
+  '1080P_priority',
+  '720P_priority'
+])
 
 const isOpenAudio = ref(true)
 
@@ -261,8 +268,31 @@ function closeStream() {
 async function refreshStream() {
   closeStream()
   try {
+    // 解析分辨率
+    let idealWidth = 3840
+    let idealHeight = 2160
+    if (curResolution.value === '2K_priority') {
+      idealWidth = 2560
+      idealHeight = 1440
+    } else if (curResolution.value === '1080P_priority') {
+      idealWidth = 1920
+      idealHeight = 1080
+    } else if (curResolution.value === '720P_priority') {
+      idealWidth = 1280
+      idealHeight = 720
+    }
+    // 如果是移动端，则翻转宽高
+    // if (window.innerHeight > window.innerWidth) {
+    //   const tmp = idealWidth
+    //   idealWidth = idealHeight
+    //   idealHeight = tmp
+    // }
     curStream.value = await navigator?.mediaDevices?.getUserMedia({
-      video: { deviceId: curVideoDevInfo.value.id },
+      video: {
+        deviceId: curVideoDevInfo.value.id,
+        width: { ideal: idealWidth },
+        height: { ideal: idealHeight }
+      },
       audio: isOpenAudio.value ? { deviceId: curAudioDevInfo.value.id } : false
     })
     if (!curStream.value) {
@@ -290,6 +320,7 @@ async function refreshStream() {
       })
       localStorage.setItem('audioDev', JSON.stringify(curAudioDevInfo.value))
     }
+    localStorage.setItem('videoResolution', curResolution.value)
     videoElm.value.srcObject = curStream.value
   } catch (e) {
     logInfo.value.logs.push({
@@ -328,6 +359,10 @@ onMounted(async () => {
   if (tmpDev) {
     curAudioDevInfo.value = JSON.parse(tmpDev)
   }
+  let tmpResolution = localStorage.getItem('videoResolution')
+  if (tmpResolution) {
+    curResolution.value = tmpResolution
+  }
 
   // 更新媒体流
   if (!(await refreshStream())) {
@@ -364,6 +399,7 @@ onMounted(async () => {
 
   watch(curAudioDevInfo, refreshStream)
   watch(curVideoDevInfo, refreshStream)
+  watch(curResolution, refreshStream)
   watch(isOpenAudio, refreshStream)
 
   // 获取上次使用的连接ID
@@ -399,15 +435,27 @@ onUnmounted(() => {
   <div class="bg-neutral-50 dark:bg-black" :style="{ 'padding-top': navHeight + 'px' }">
     <div class="overflow-y-auto md:flex md:flex-row p-4">
       <div class="md:flex-1 md:p-4 space-y-4">
+        <!-- 选择视频设备 -->
         <UFormGroup :label="$t('label.videoDev')">
           <USelectMenu :options="videoDevList" v-model="curVideoDevInfo" :disabled="isConnecting" />
         </UFormGroup>
+
+        <UFormGroup :label="$t('label.resolution')">
+          <USelectMenu :options="resolutionList" v-model="curResolution" :disabled="isConnecting">
+            <template #label>{{ $t('label.' + curResolution) }}</template>
+            <template #option="opt">{{ $t('label.' + opt.option) }}</template>
+          </USelectMenu>
+        </UFormGroup>
+
+        <!-- 选择音频设备 -->
         <UFormGroup :label="$t('label.audioDev')">
           <USelectMenu
             :options="audioDevList"
             v-model="curAudioDevInfo"
             :disabled="!isOpenAudio || isConnecting"
           />
+
+          <!-- 是否启用音频 -->
         </UFormGroup>
         <div class="flex flex-row items-center justify-end gap-4 text-sm">
           <label class="contents">
@@ -416,6 +464,7 @@ onUnmounted(() => {
           </label>
         </div>
 
+        <!-- 连接ID -->
         <UFormGroup :label="$t('label.connectionID')">
           <UInput
             :type="isShowConnectId ? 'text' : 'password'"

pages/monitor.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { RTCNode } from '#imports'
-import type { _1 } from '#tailwind-config/theme/aspectRatio'
 import { SSE } from 'sse.js'
 
 const { t } = useI18n()
@@ -42,7 +41,7 @@ const sse = shallowRef<SSE>()
 const rtcNode = shallowRef<RTCNode>()
 
 let stateJobId: any
-let watchDogJonId: any
+let watchDogJobId: any
 
 const isModernFileAPISupport = ref(false)
 
@@ -75,11 +74,18 @@ async function startRecording() {
   recordSize.value = 0
   videoChunks = []
   if (isModernFileAPIAvailable()) {
-    // 支持现代化文件访问，数据直接写入磁盘
-    fileHandler = await showSaveFilePicker({
-      startIn: 'downloads',
-      suggestedName: 'Video_' + formatDateTime(new Date(), 'yyyyMMddHHmmss') + '.webm'
-    })
+    try {
+      // 支持现代化文件访问，数据直接写入磁盘
+      fileHandler = await showSaveFilePicker({
+        startIn: 'downloads',
+        suggestedName: 'Video_' + formatDateTime(new Date(), 'yyyyMMddHHmmss') + '.webm'
+      })
+    } catch (e) {
+      console.warn(e)
+      recordingStartTime.value = 0
+      isRecording.value = false
+      return
+    }
     const writer = await fileHandler.createWritable()
 
     mediaRecoder = new MediaRecorder(curStream.value, { mimeType: recordSetting.value.mimeType })
@@ -142,7 +148,7 @@ function closeStream() {
 function disconnect() {
   stopRecording()
   clearInterval(stateJobId)
-  clearInterval(watchDogJonId)
+  clearInterval(watchDogJobId)
   logInfo.value.logs.push({
     time: toISOStringWithTimezone(new Date()),
     type: 'info',
@@ -311,7 +317,7 @@ function doConnect() {
   connectSignServer()
 
   // 超时检测
-  watchDogJonId = setTimeout(() => {
+  watchDogJobId = setTimeout(() => {
     if (isConnecting.value) {
       logInfo.value.logs.push({
         time: toISOStringWithTimezone(new Date()),

server/utils/sseMap.ts

@@ -6,7 +6,7 @@ export const sseMap = new TTLCache<string, any>({
   ttl: 600e3,
   dispose: (val, key) => {
     try {
-      console.log(toISOStringWithTimezone(new Date()) + ' dispose: ' + key)
+      console.log(toISOStringWithTimezone(new Date()) + ' dispose: ' + key.substring(0, 6) + '...')
       val.close()
     } catch (e) {
       console.warn(e)