Merge pull request #4 from ShouChenICU/dev

1、主页新增使用提示 2、新增监控端录制功能

Author: ShouChenICU

README.md

@@ -14,6 +14,7 @@ WebCamera 是一个基于 WebRTC 技术的网络摄像头工具站，使用 Nuxt
 - [安装](#安装)
 - [使用](#使用)
 - [构建](#构建)
+- [Docker运行](#Docker运行)
 - [贡献](#贡献)
 - [许可证](#许可证)
 
@@ -53,7 +54,7 @@ yarn run dev
 
 2. 打开浏览器访问 `http://localhost:3000`
 
-3. 摄像头先连接，然后监控页面填入和摄像头相同的连接ID，点连接，即可连接到摄像头
+3. 摄像头先连接，然后监控页面填入和摄像头相同的连接ID，点连接，即可连接到摄像头。
 
 ## 构建
 
@@ -70,15 +71,15 @@ yarn run build
 node server/index.mjs
 ```
 
-## Docker 运行
+**自部署请注意**: 浏览器媒体权限（摄像头和麦克风等）需要地址为`localhost`或使用`HTTPS`才能正常申请和启用，请自行配置`HTTPS`部署。
+
+## Docker运行
 
 ```bash
 docker build -t webcamera .
 docker run -d -p 3000:3000 webcamera
 ```
 
-**自部署请注意**: 浏览器媒体权限（摄像头和麦克风等）需要地址为`localhost`或使用`HTTPS`才能正常申请和启用，请自行配置`HTTPS`部署。
-
 ## 贡献
 
 我们欢迎任何形式的贡献！如果你有任何建议或发现了 bug，请提交一个 issue 或者发送一个 pull request。

components/NavBar.vue

@@ -32,9 +32,13 @@ onMounted(() => {
     ref="navElm"
     class="fixed top-0 right-0 left-0 flex flex-row items-center px-4 md:px-6 py-3 z-50"
   >
-    <NuxtLink :to="locatePath('/')" class="contents"
-      ><img src="/favicon.webp" alt="web camera" class="size-6 mr-2" />WebCamera</NuxtLink
-    >
+    <NuxtLink :to="locatePath('/')" class="contents">
+      <img src="/favicon.webp" alt="web camera" class="size-6 mr-2" />
+      <div>
+        <span>WebCamera</span>
+        <span class="ml-2 text-xs">v0.1.1</span>
+      </div>
+    </NuxtLink>
 
     <div class="flex-1"></div>
 
@@ -47,6 +51,7 @@ onMounted(() => {
         size="xl"
         square
         to="https://github.com/ShouChenICU/WebCamera"
+        target="_blank"
       >
         <template #leading>
           <Icon name="mdi:github" />

i18n.config.ts

@@ -34,7 +34,11 @@ export default defineI18nConfig(() => ({
         webRec: 'Web recording',
         connectionID: 'Connection ID',
         audioDev: 'Audio device',
-        videoDev: 'Video device'
+        videoDev: 'Video device',
+        record: 'Record',
+        recordSettings: 'Record settings',
+        format: 'Format',
+        bps: 'Bitrate'
       },
       btn: {
         myFav: 'My Favorites',
@@ -71,7 +75,17 @@ export default defineI18nConfig(() => ({
         t3: 'Privacy & Security',
         d3: 'WebRTC incorporates built-in encryption to secure the communication content'
       },
-      hint: {}
+      usage: {
+        usage: 'Usage',
+        step1:
+          'First, connect the camera. Go to the `Camera` page on the device to be used as a camera, enter the connection ID, and click connect.',
+        step2:
+          'On the monitoring side, go to the `Monitor` page, enter the same connection ID as the camera, and click connect to connect to the corresponding camera.'
+      },
+      hint: {
+        recHint:
+          'The current browser does not support the file access api, limiting the recording time to 10 minutes'
+      }
     },
     zh: {
       welcome: '基于WebRTC的点对点网络摄像头实时监控工具',
@@ -104,7 +118,11 @@ export default defineI18nConfig(() => ({
         webRec: '网页录音',
         connectionID: '连接ID',
         audioDev: '音频设备',
-        videoDev: '视频设备'
+        videoDev: '视频设备',
+        record: '录制',
+        recordSettings: '录制设置',
+        format: '格式',
+        bps: '比特率'
       },
       btn: {
         myFav: '我的收藏',
@@ -141,7 +159,14 @@ export default defineI18nConfig(() => ({
         t3: '隐私安全',
         d3: 'WebRTC内置了加密技术，保护了通信内容的安全'
       },
-      hint: {}
+      usage: {
+        usage: '使用方法',
+        step1: '先连接摄像头，将作为摄像头的设备进入`摄像头`页面，输入连接ID，点连接。',
+        step2: '监控端进入`监控`页面，填入与摄像头相同的连接ID，点连接，即可连到对应的摄像头'
+      },
+      hint: {
+        recHint: '当前浏览器不支持文件访问API，限制录制时长10分钟'
+      }
     }
   }
 }))

pages/camera.vue

@@ -420,8 +420,9 @@ onUnmounted(() => {
           <UInput
             :type="isShowConnectId ? 'text' : 'password'"
             v-model="cameraId"
-            :disabled="isConnecting"
+            :disabled="isConnecting || logInfo.state === 'connected'"
             :ui="{ icon: { trailing: { pointer: '' } } }"
+            size="lg"
           >
             <template #trailing>
               <UButton

pages/index.vue

@@ -26,7 +26,7 @@ useSeoMeta({
 </script>
 
 <template>
-  <div>
+  <div class="pb-12">
     <div
       class="relative pb-12 pt-24 inset-0 bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] dark:bg-[#121212] dark:bg-[linear-gradient(to_right,#303030_1px,transparent_1px),linear-gradient(to_bottom,#303030_1px,transparent_1px)]"
     >
@@ -62,5 +62,13 @@ useSeoMeta({
         </div>
       </div>
     </div>
+
+    <div class="md:px-12 p-4 space-y-2">
+      <h2 class="text-lg flex flex-row items-center gap-1">
+        <Icon name="fluent:data-usage-24-regular" />{{ $t('usage.usage') }}
+      </h2>
+      <p>1. {{ $t('usage.step1') }}</p>
+      <p>2. {{ $t('usage.step2') }}</p>
+    </div>
   </div>
 </template>

pages/monitor.vue

@@ -44,10 +44,85 @@ const rtcNode = shallowRef<RTCNode>()
 let stateJobId: any
 let watchDogJonId: any
 
+const isRecordSettingModalOpen = ref(false)
+const isRecording = ref(false)
+const recordingStartTime = ref(0)
+const recordingTimeStr = ref('')
+const recordSize = ref(0)
+const recordSetting = ref({
+  mimeType: '',
+  bitsPerSecond: 0
+})
+let videoChunks: Blob[] = []
+let fileHandler: FileSystemFileHandle
+let mediaRecoder: MediaRecorder
+
 useSeoMeta({
   title: t('btn.monitor')
 })
 
+/**
+ * 开始录制
+ */
+async function startRecording() {
+  if (isRecording.value || !curStream.value) {
+    return
+  }
+  isRecording.value = true
+  recordingStartTime.value = new Date().getTime()
+  recordSize.value = 0
+  videoChunks = []
+  if (isModernFileAPIAvailable()) {
+    // 支持现代化文件访问，数据直接写入磁盘
+    fileHandler = await showSaveFilePicker({
+      startIn: 'downloads',
+      suggestedName: 'Video_' + formatDateTime(new Date(), 'yyyyMMddHHmmss') + '.webm'
+    })
+    const writer = await fileHandler.createWritable()
+
+    mediaRecoder = new MediaRecorder(curStream.value, { mimeType: recordSetting.value.mimeType })
+    mediaRecoder.ondataavailable = (ev) => {
+      recordingTimeStr.value = formatTime(new Date().getTime() - recordingStartTime.value)
+      recordSize.value += ev.data.size
+      return writer.write(ev.data)
+    }
+    mediaRecoder.onerror = console.error
+    mediaRecoder.onstop = () => writer.close()
+    mediaRecoder.start(200)
+  } else {
+    // 不支持现代化文件访问，录制数据保存在内存中（注意可能导致OOM
+
+    mediaRecoder = new MediaRecorder(curStream.value, { mimeType: recordSetting.value.mimeType })
+    mediaRecoder.ondataavailable = (ev) => {
+      const timeDuration = new Date().getTime() - recordingStartTime.value
+      recordingTimeStr.value = formatTime(timeDuration)
+      recordSize.value += ev.data.size
+      videoChunks.push(ev.data)
+      if (timeDuration >= 600e3) {
+        // 超过十分钟，停止录制，避免OOM
+        mediaRecoder.stop()
+      }
+    }
+    mediaRecoder.onerror = console.error
+    mediaRecoder.onstop = () => {
+      const videoBlob = new Blob(videoChunks, { type: mediaRecoder.mimeType })
+      doDownloadFromBlob(
+        videoBlob,
+        'Video_' + formatDateTime(new Date(), 'yyyyMMddHHmmss') + '.webm'
+      )
+    }
+    mediaRecoder.start(200)
+  }
+}
+
+/**
+ * 结束录制
+ */
+function stopRecording() {
+  mediaRecoder?.stop()
+  isRecording.value = false
+}
+
 /**
  * 关闭媒体流
  */
@@ -63,6 +138,7 @@ function closeStream() {
  * 断开连接并清理资源
  */
 function disconnect() {
+  stopRecording()
   clearInterval(stateJobId)
   clearInterval(watchDogJonId)
   logInfo.value.logs.push({
@@ -256,6 +332,10 @@ onMounted(() => {
   if (!cameraId.value) {
     cameraId.value = ''
   }
+  const recordMimeTypes = getRecordMimeTypes()
+  if (recordMimeTypes.length > 0) {
+    recordSetting.value.mimeType = recordMimeTypes[0]
+  }
 })
 
 onUnmounted(() => {
@@ -271,8 +351,9 @@ onUnmounted(() => {
           <UInput
             :type="isShowConnectId ? 'text' : 'password'"
             v-model="cameraId"
-            :disabled="isConnecting"
+            :disabled="isConnecting || logInfo.state === 'connected'"
             :ui="{ icon: { trailing: { pointer: '' } } }"
+            size="lg"
           >
             <template #trailing>
               <UButton
@@ -317,6 +398,40 @@ onUnmounted(() => {
             >{{ $t('btn.disconnect') }}</UButton
           >
         </div>
+
+        <UDivider class="my-8" :label="$t('label.record')" />
+
+        <div class="flex flex-row items-center">
+          <span>
+            {{ recordingStartTime === 0 ? '00:00:00' : recordingTimeStr }}
+          </span>
+
+          <span class="ml-2">{{ humanFileSize(recordSize) }}</span>
+
+          <div class="flex-1"></div>
+
+          <UButton
+            variant="ghost"
+            color="gray"
+            square
+            class="mr-2"
+            :disabled="isRecording"
+            @click="() => (isRecordSettingModalOpen = true)"
+            ><template #leading><Icon name="solar:settings-linear" /></template
+          ></UButton>
+
+          <UButton color="green" @click="startRecording" v-if="!isRecording"
+            ><template #leading><icon name="solar:play-linear" /></template
+            >{{ $t('btn.startRec') }}</UButton
+          >
+          <UButton color="rose" @click="stopRecording" v-else
+            ><template #leading><Icon name="solar:stop-linear" /></template
+            >{{ $t('btn.stopRec') }}</UButton
+          >
+        </div>
+        <div v-show="!isModernFileAPIAvailable()" class="text-xs">
+          <span class="text-red-500">*</span>{{ $t('hint.recHint') }}
+        </div>
       </div>
 
       <div class="md:flex-1 md:p-4 mt-8 md:mt-0">
@@ -325,5 +440,23 @@ onUnmounted(() => {
     </div>
 
     <LogBar :logInfo="logInfo" />
+
+    <UModal v-model="isRecordSettingModalOpen">
+      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <div>{{ $t('label.recordSettings') }}</div>
+        </template>
+
+        <div class="space-y-4">
+          <UFormGroup :label="$t('label.format')">
+            <USelectMenu :options="getRecordMimeTypes()" v-model="recordSetting.mimeType" />
+          </UFormGroup>
+
+          <!-- <UFormGroup :label="$t('label.bps')">
+            <UInput type="number" v-model="recordSetting.bitsPerSecond" />
+          </UFormGroup> -->
+        </div>
+      </UCard>
+    </UModal>
   </div>
 </template>

utils/DateUtils.js

@@ -30,6 +30,26 @@ export function formatDateTime(date, format) {
   return format
 }
 
+/**
+ * 将毫秒数格式化为 HH:mm:ss
+ * @param {number} milliseconds
+ * @returns
+ */
+export function formatTime(milliseconds) {
+  // 计算小时数
+  const hours = Math.floor(milliseconds / (1000 * 60 * 60))
+  // 计算剩余的分钟数
+  const minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60))
+  // 计算剩余的秒数
+  const seconds = Math.floor((milliseconds % (1000 * 60)) / 1000)
+
+  // 格式化分钟和秒数为两位数
+  const formattedMinutes = minutes.toString().padStart(2, '0')
+  const formattedSeconds = seconds.toString().padStart(2, '0')
+
+  return `${hours}:${formattedMinutes}:${formattedSeconds}`
+}
+
 export function currentTime(format) {
   if (format === undefined) {
     format = 'yyyy/MM/dd HH:mm:ss'