├── .gitignore
├── .prettierrc.json
├── Dockerfile
├── LICENSE
├── README.md
├── app.config.ts
├── app.vue
├── assets
    └── main.css
├── components
    ├── LogBar.vue
    └── NavBar.vue
├── composables
    └── useNavHeight.ts
├── docker-compose.yaml
├── i18n.config.ts
├── nuxt.config.ts
├── ogImg.png
├── package.json
├── pages
    ├── camera.vue
    ├── index.vue
    └── monitor.vue
├── public
    ├── favicon.webp
    └── ogImg.webp
├── server
    ├── api
    │   ├── camera.post.ts
    │   ├── monitor.post.ts
    │   └── sendEvent.post.ts
    ├── tsconfig.json
    └── utils
    │   └── sseMap.ts
├── tailwind.config.ts
├── tsconfig.json
├── utils
    ├── DateUtils.js
    ├── RTCNode.ts
    ├── index.ts
    └── publicStunList.ts
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "https://json.schemastore.org/prettierrc",
3 |   "semi": false,
4 |   "tabWidth": 2,
5 |   "singleQuote": true,
6 |   "printWidth": 100,
7 |   "trailingComma": "none"
8 | }
9 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | # 构建阶段
 2 | FROM node:lts-alpine AS builder
 3 | 
 4 | WORKDIR /app
 5 | 
 6 | COPY package.json yarn.lock* /app/
 7 | 
 8 | RUN yarn install --frozen-lockfile
 9 | 
10 | COPY . /app
11 | 
12 | RUN yarn run build
13 | 
14 | # 运行阶段
15 | FROM node:lts-alpine
16 | 
17 | WORKDIR /app
18 | 
19 | # 从构建阶段复制输出文件到运行容器
20 | COPY --from=builder /app/.output /app
21 | 
22 | # 暴露容器运行时的端口
23 | EXPOSE 3000
24 | 
25 | CMD ["node", "server/index.mjs"]


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright © 2024 <https://github.com/ShouChenICU>
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 | 
7 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # WebCamera
  2 | 
  3 | ![License](https://img.shields.io/badge/license-MIT-blue.svg)
  4 | ![Nuxt](https://img.shields.io/badge/nuxt.js-v3.11.2-green.svg)
  5 | ![Yarn](https://img.shields.io/badge/yarn-v1.22.22-blue.svg)
  6 | 
  7 | ![WebCamera](./public/ogImg.webp)
  8 | 
  9 | WebCamera 是一个基于 WebRTC 技术的网络摄像头监控工具，使用 Nuxt.js 框架开发。
 10 | 
 11 | ## 目录
 12 | 
 13 | - [特性](#特性)
 14 | - [安装](#安装)
 15 | - [使用](#使用)
 16 | - [构建](#构建)
 17 | - [Docker运行](#Docker运行)
 18 | - [贡献](#贡献)
 19 | - [许可证](#许可证)
 20 | 
 21 | ## 特性
 22 | 
 23 | - **实时视频流**: 使用 WebRTC 技术实现高效的实时视频流。
 24 | - **跨平台支持**: 兼容多种浏览器和设备。
 25 | - **易于开发**: 基于 Nuxt.js 框架，方便扩展和维护。
 26 | - **模块化设计**: 便于功能的扩展和集成。
 27 | - **隐私安全**: 使用点对点加密连接，保护隐私安全。
 28 | 
 29 | ## 安装
 30 | 
 31 | 在开始之前，请确保您的系统已经安装了 [Node.js](https://nodejs.org/) 和 [Yarn](https://yarnpkg.com/)。
 32 | 
 33 | 1. 克隆仓库
 34 | 
 35 | ```bash
 36 | git clone https://github.com/ShouChenICU/WebCamera.git
 37 | 
 38 | cd WebCamera
 39 | ```
 40 | 
 41 | 2. 安装依赖
 42 | 
 43 | ```bash
 44 | yarn install
 45 | ```
 46 | 
 47 | ## 使用
 48 | 
 49 | 1. 启动开发服务器
 50 | 
 51 | ```bash
 52 | yarn run dev
 53 | ```
 54 | 
 55 | 2. 打开浏览器访问 `http://localhost:3000`
 56 | 
 57 | 3. 摄像头先连接，然后监控页面填入和摄像头相同的连接ID，点连接，即可连接到摄像头。
 58 | 
 59 | ## 构建
 60 | 
 61 | 1. 进入项目根目录执行
 62 | 
 63 | ```bash
 64 | yarn run build
 65 | ```
 66 | 
 67 | 2. 构建输出在 `.output` 目录中
 68 | 3. 进入 `.output` 执行如下命令即可启动服务
 69 | 
 70 | ```bash
 71 | node server/index.mjs
 72 | ```
 73 | 
 74 | **自部署请注意**: 浏览器媒体权限（摄像头和麦克风等）需要地址为`localhost`或使用`HTTPS`才能正常申请和启用，请自行配置`HTTPS`部署。
 75 | 
 76 | ## Docker运行
 77 | 
 78 | ```bash
 79 | docker build -t webcamera .
 80 | docker run -d -p 3000:3000 webcamera
 81 | ```
 82 | 
 83 | ## 贡献
 84 | 
 85 | 我们欢迎任何形式的贡献！如果你有任何建议或发现了 bug，请提交一个 issue 或者发送一个 pull request。
 86 | 
 87 | 1. Fork 本仓库
 88 | 2. 创建一个新的分支 (`git checkout -b feature-branch`)
 89 | 3. 提交你的更改 (`git commit -am 'Add some feature'`)
 90 | 4. 推送到分支 (`git push origin feature-branch`)
 91 | 5. 创建一个新的 Pull Request
 92 | 
 93 | ## 许可证
 94 | 
 95 | 该项目基于 MIT 许可证，详细信息请参阅 [LICENSE](./LICENSE) 文件。
 96 | 
 97 | ---
 98 | 
 99 | <a href="https://star-history.com/#ShouChenICU/WebCamera&Date">
100 |  <picture>
101 |    <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=ShouChenICU/WebCamera&type=Date&theme=dark" />
102 |    <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=ShouChenICU/WebCamera&type=Date" />
103 |    <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=ShouChenICU/WebCamera&type=Date" />
104 |  </picture>
105 | </a>
106 | 


--------------------------------------------------------------------------------
/app.config.ts:
--------------------------------------------------------------------------------
 1 | export default defineAppConfig({
 2 |   ui: {
 3 |     primary: 'blue',
 4 |     gray: 'slate',
 5 | 
 6 |     notifications: {
 7 |       // Show toasts at the top right of the screen
 8 |       position: 'top-auto bottom-4'
 9 |     }
10 |   },
11 | 
12 |   navLinks: [
13 |     { icon: 'i-solar-home-2-linear', key: 'home', link: '/' },
14 |     { icon: 'solar:cup-line-duotone', key: 'about', link: '/about' }
15 |   ]
16 | })
17 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | useSeoMeta({
 3 |   ogImage: 'https://webcamera.cc/ogImg.webp',
 4 |   twitterCard: 'summary_large_image',
 5 |   twitterTitle: 'WebCamera',
 6 |   twitterDescription:
 7 |     'WebRTC-powered Peer-to-Peer webcam surveillance application for real-time monitoring platform.',
 8 |   twitterImage: 'https://webcamera.cc/ogImg.webp',
 9 |   twitterSite: 'https://webcamera.cc',
10 |   twitterCreator: '@ShouChen_'
11 | })
12 | </script>
13 | 
14 | <template>
15 |   <NuxtPwaManifest />
16 |   <div class="relative min-h-[100vh]">
17 |     <NavBar />
18 | 
19 |     <NuxtPage />
20 |   </div>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/assets/main.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   @apply bg-white text-black;
 3 |   @apply dark:bg-[#121212] dark:text-white;
 4 |   margin: 0;
 5 |   width: 100%;
 6 |   min-height: 100vh;
 7 |   font-family:
 8 |     ui-sans-serif,
 9 |     Inter,
10 |     -apple-system,
11 |     BlinkMacSystemFont,
12 |     'Segoe UI',
13 |     Roboto,
14 |     Oxygen,
15 |     Ubuntu,
16 |     Cantarell,
17 |     'Fira Sans',
18 |     'Droid Sans',
19 |     'Helvetica Neue',
20 |     sans-serif;
21 |   overflow-y: auto;
22 |   overflow-x: hidden;
23 | }
24 | 
25 | body,
26 | body > * {
27 |   transition:
28 |     color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1),
29 |     background-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
30 | }
31 | 
32 | .border-color {
33 |   @apply border-neutral-300 dark:border-neutral-700;
34 | }
35 | 
36 | .inout-leave-active,
37 | .inout-enter-active {
38 |   transition:
39 |     translate 0.24s cubic-bezier(0.3, 1, 0.5, 1),
40 |     opacity 0.24s cubic-bezier(0, 0.8, 0.55, 1);
41 | }
42 | 
43 | .inout-enter-active {
44 |   transition-delay: 0.24s;
45 | }
46 | 
47 | .inout-leave-active {
48 |   /* background:pink; */
49 | }
50 | 
51 | .inout-enter-from,
52 | .inout-leave-to {
53 |   opacity: 0;
54 |   translate: 0 2rem;
55 | }
56 | 
57 | .inout-enter-to,
58 | .inout-leave-from {
59 |   opacity: 1;
60 |   translate: 0;
61 | }
62 | 


--------------------------------------------------------------------------------
/components/LogBar.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const { logInfo } = defineProps(['logInfo'])
 3 | 
 4 | const logs = computed(() => {
 5 |   logInfo.logs.sort((a, b) => (a.time === b.time ? 0 : a.time < b.time ? 1 : -1))
 6 |   logInfo.logs = logInfo.logs.slice(0, 100)
 7 |   return logInfo.logs
 8 | })
 9 | </script>
10 | 
11 | <template>
12 |   <div class="bg-white dark:bg-[#121212] border-t border-color">
13 |     <div class="p-1 text-sm md:flex flex-row items-center">
14 |       <span
15 |         class="inline-flex rounded-full px-2 py-1 flex-row items-center"
16 |         :class="{
17 |           'bg-rose-300 dark:bg-rose-900': logInfo.state !== 'connected',
18 |           'bg-green-400 dark:bg-green-700': logInfo.state === 'connected'
19 |         }"
20 |         ><Icon
21 |           class="mr-1"
22 |           :name="
23 |             logInfo.state === 'connected'
24 |               ? 'solar:link-round-angle-bold'
25 |               : 'solar:link-broken-minimalistic-bold'
26 |           "
27 |         />{{ logInfo.state }}</span
28 |       >
29 | 
30 |       <div class="md:ml-2 px-1">
31 |         local:
32 |         {{
33 |           logInfo?.local?.protocol +
34 |           ' ' +
35 |           logInfo?.local?.address +
36 |           ':' +
37 |           logInfo?.local?.port +
38 |           ' ' +
39 |           logInfo?.local?.candidateType
40 |         }}
41 |       </div>
42 |       <div class="md:ml-2 px-1">
43 |         remote:
44 |         {{
45 |           logInfo?.remote?.protocol +
46 |           ' ' +
47 |           logInfo?.remote?.address +
48 |           ':' +
49 |           logInfo?.remote?.port +
50 |           ' ' +
51 |           logInfo?.remote?.candidateType
52 |         }}
53 |       </div>
54 | 
55 |       <span class="md:flex-1"></span>
56 | 
57 |       <div class="ml-2 inline-block">Tx: {{ humanFileSize(logInfo.bytesSent) }}</div>
58 |       <div class="ml-2 inline-block">Rx: {{ humanFileSize(logInfo.bytesReceived) }}</div>
59 |     </div>
60 | 
61 |     <div
62 |       class="max-h-[50vh] overflow-y-auto overflow-x-hidden break-words break-all text-xs p-1 pb-4"
63 |     >
64 |       <p v-for="log in logs">
65 |         <span class="text-neutral-500">{{ log.time }}</span>
66 |         <span
67 |           class="px-1"
68 |           :class="{
69 |             'text-sky-500': log.type === 'info',
70 |             'text-yellow-500': log.type === 'warn',
71 |             'text-red-500': log.type === 'error'
72 |           }"
73 |           >{{ log.type }}</span
74 |         >
75 |         <span>{{ log.content }}</span>
76 |       </p>
77 |     </div>
78 |   </div>
79 | </template>
80 | 


--------------------------------------------------------------------------------
/components/NavBar.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const locatePath = useLocalePath()
 3 | const colorMode = useColorMode()
 4 | const { setLocale, locale } = useI18n()
 5 | const navElm = ref()
 6 | const navHeight = useNavHeight()
 7 | 
 8 | function switchDark() {
 9 |   // console.log(colorMode)
10 |   if (colorMode.preference === 'dark') {
11 |     colorMode.preference = 'light'
12 |   } else {
13 |     colorMode.preference = 'dark'
14 |   }
15 | }
16 | 
17 | function switchI18n() {
18 |   if (locale.value === 'en') {
19 |     setLocale('zh')
20 |   } else {
21 |     setLocale('en')
22 |   }
23 | }
24 | 
25 | onMounted(() => {
26 |   navHeight.value = navElm.value?.getBoundingClientRect()?.height
27 | })
28 | </script>
29 | 
30 | <template>
31 |   <nav
32 |     ref="navElm"
33 |     class="fixed top-0 right-0 left-0 flex flex-row items-center px-4 md:px-6 py-3 z-50"
34 |   >
35 |     <NuxtLink :to="locatePath('/')" class="contents">
36 |       <img src="/favicon.webp" alt="web camera" class="size-6 mr-2" />
37 |       <div>
38 |         <span>WebCamera</span>
39 |         <span class="ml-2 text-xs">v0.1.3</span>
40 |       </div>
41 |     </NuxtLink>
42 | 
43 |     <div class="flex-1"></div>
44 | 
45 |     <div class="contents">
46 |       <!-- <UDivider orientation="vertical" class="mx-2 h-4" /> -->
47 | 
48 |       <UButton
49 |         variant="ghost"
50 |         color="gray"
51 |         size="xl"
52 |         square
53 |         to="https://github.com/ShouChenICU/WebCamera"
54 |         target="_blank"
55 |       >
56 |         <template #leading>
57 |           <Icon name="mdi:github" />
58 |         </template>
59 |       </UButton>
60 | 
61 |       <UButton variant="ghost" color="gray" size="xl" square @click="switchI18n">
62 |         <template #leading>
63 |           <Icon name="icon-park-outline:chinese" v-if="locale === 'zh'" />
64 |           <Icon name="icon-park-outline:english" v-else-if="locale === 'en'" />
65 |         </template>
66 |       </UButton>
67 | 
68 |       <UButton variant="ghost" color="gray" size="xl" square @click="switchDark">
69 |         <template #leading>
70 |           <Icon name="solar:moon-linear" v-if="colorMode.preference === 'dark'" />
71 |           <Icon name="solar:sun-linear" v-else />
72 |         </template>
73 |       </UButton>
74 |     </div>
75 |   </nav>
76 | </template>
77 | 


--------------------------------------------------------------------------------
/composables/useNavHeight.ts:
--------------------------------------------------------------------------------
1 | export const useNavHeight = () => useState('navHeight', () => 32)
2 | 


--------------------------------------------------------------------------------
/docker-compose.yaml:
--------------------------------------------------------------------------------
 1 | version: '3.8'
 2 | services:
 3 |   app:
 4 |     build:
 5 |       context: .
 6 |       dockerfile: Dockerfile
 7 |     ports:
 8 |       - "3000:3000"
 9 |     environment:
10 |       - NODE_ENV=production # 设置环境变量，如果需要的话
11 |     command: node server/index.mjs # 用你的启动命令替换如果有必要
12 | 


--------------------------------------------------------------------------------
/i18n.config.ts:
--------------------------------------------------------------------------------
  1 | export default defineI18nConfig(() => ({
  2 |   legacy: false,
  3 |   locale: 'zh',
  4 |   messages: {
  5 |     en: {
  6 |       welcome:
  7 |         'WebRTC-powered Peer-to-Peer webcam surveillance application for real-time monitoring platform.',
  8 |       home: 'Home',
  9 |       about: 'About',
 10 |       login: 'Login',
 11 |       label: {
 12 |         title: 'Title',
 13 |         lang: 'Lang',
 14 |         length: 'Length',
 15 |         totalViews: 'Total views',
 16 |         totalLikes: 'Total likes',
 17 |         totalCollections: 'Total collections',
 18 |         description: 'Description',
 19 |         secondsAgo: '{n} seconds ago',
 20 |         minutesAgo: '{n} minutes ago',
 21 |         hoursAgo: '{n} hours ago',
 22 |         daysAgo: '{n} days ago',
 23 |         search: 'Search',
 24 |         model: 'Model',
 25 |         prompt: 'Prompt',
 26 |         genResult: 'Generate result',
 27 |         quickStart: 'Quick start',
 28 |         selectImage: 'Select image',
 29 |         analysisResult: 'Analysis result',
 30 |         recResult: 'Recognition result',
 31 |         summaryResult: 'Summary results',
 32 |         wordCount: 'Word-count',
 33 |         audioFile: 'Audio file',
 34 |         webRec: 'Web recording',
 35 |         connectionID: 'Connection ID',
 36 |         audioDev: 'Audio device',
 37 |         videoDev: 'Video device',
 38 |         resolution: 'Resolution',
 39 |         '4K_priority': '4K Priority',
 40 |         '2K_priority': '2K Priority',
 41 |         '1080P_priority': '1080P Priority',
 42 |         '720P_priority': '720P Priority',
 43 |         record: 'Record',
 44 |         recordSettings: 'Record settings',
 45 |         format: 'Format',
 46 |         bps: 'Bitrate'
 47 |       },
 48 |       btn: {
 49 |         myFav: 'My Favorites',
 50 |         submit: 'Submit',
 51 |         update: 'Update',
 52 |         saveDraft: 'Save draft',
 53 |         ok: 'OK',
 54 |         cancel: 'Cancel',
 55 |         send: 'Send',
 56 |         clear: 'Clear',
 57 |         generate: 'Generate',
 58 |         download: 'Download',
 59 |         translate: 'Translate',
 60 |         copy: 'Copy',
 61 |         copied: 'Copied',
 62 |         startAnalysis: 'Start analysis',
 63 |         startRecognizing: 'Start recognizing',
 64 |         startSummarizing: 'Start summarizing',
 65 |         startRec: 'Start recording',
 66 |         stopRec: 'Stop recording',
 67 |         downloadJSONFile: 'Download JSON file',
 68 |         camera: 'Camera',
 69 |         monitor: 'Monitor',
 70 |         connect: 'Connect',
 71 |         disconnect: 'Disconnect',
 72 |         autoConnect: 'Auto connect',
 73 |         openAudio: 'Open audio'
 74 |       },
 75 |       des: {
 76 |         t1: 'Native Support',
 77 |         d1: 'Most modern browsers natively support WebRTC',
 78 |         t2: 'Efficient Realtime',
 79 |         d2: 'WebRTC utilizes peer-to-peer (P2P) communication to avoid server relays, improving communication efficiency',
 80 |         t3: 'Privacy & Security',
 81 |         d3: 'WebRTC incorporates built-in encryption to secure the communication content'
 82 |       },
 83 |       usage: {
 84 |         usage: 'Usage',
 85 |         step1:
 86 |           '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.',
 87 |         step2:
 88 |           '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.'
 89 |       },
 90 |       hint: {
 91 |         recHint:
 92 |           'The current browser does not support the file access api, limiting the recording time to 10 minutes'
 93 |       }
 94 |     },
 95 |     zh: {
 96 |       welcome: '基于WebRTC的点对点网络摄像头实时监控工具',
 97 |       home: '主页',
 98 |       about: '关于',
 99 |       login: '登陆',
100 |       label: {
101 |         title: '标题',
102 |         lang: '语言',
103 |         length: '长度',
104 |         totalViews: '总浏览量',
105 |         totalLikes: '总点赞数',
106 |         totalCollections: '总收藏数',
107 |         description: '描述',
108 |         secondsAgo: '{n} 秒前',
109 |         minutesAgo: '{n} 分前',
110 |         hoursAgo: '{n} 小时前',
111 |         daysAgo: '{n} 天前',
112 |         search: '搜索',
113 |         model: '模型',
114 |         prompt: '提示词',
115 |         genResult: '生成结果',
116 |         quickStart: '快速开始',
117 |         selectImage: '选择图片',
118 |         analysisResult: '分析结果',
119 |         recResult: '识别结果',
120 |         summaryResult: '总结结果',
121 |         wordCount: '字数',
122 |         audioFile: '音频文件',
123 |         webRec: '网页录音',
124 |         connectionID: '连接ID',
125 |         audioDev: '音频设备',
126 |         videoDev: '视频设备',
127 |         resolution: '分辨率',
128 |         '4K_priority': '4K优先',
129 |         '2K_priority': '2K优先',
130 |         '1080P_priority': '1080P优先',
131 |         '720P_priority': '720P优先',
132 |         record: '录制',
133 |         recordSettings: '录制设置',
134 |         format: '格式',
135 |         bps: '比特率'
136 |       },
137 |       btn: {
138 |         myFav: '我的收藏',
139 |         submit: '提交',
140 |         update: '更新',
141 |         saveDraft: '保存草稿',
142 |         ok: '确定',
143 |         cancel: '取消',
144 |         send: '发送',
145 |         clear: '清空',
146 |         generate: '生成',
147 |         download: '下载',
148 |         translate: '翻译',
149 |         copy: '复制',
150 |         copied: '已复制',
151 |         startAnalysis: '开始分析',
152 |         startRecognizing: '开始识别',
153 |         startSummarizing: '开始总结',
154 |         startRec: '开始录制',
155 |         stopRec: '停止录制',
156 |         downloadJSONFile: '下载JSON文件',
157 |         camera: '摄像头',
158 |         monitor: '监控',
159 |         connect: '连接',
160 |         disconnect: '断开连接',
161 |         autoConnect: '自动连接',
162 |         openAudio: '开启音频'
163 |       },
164 |       des: {
165 |         t1: '原生支持',
166 |         d1: '大部分现代浏览器原生支持WebRTC',
167 |         t2: '高效实时',
168 |         d2: 'WebRTC通过P2P通信避免服务器中继，提高通信效率',
169 |         t3: '隐私安全',
170 |         d3: 'WebRTC内置了加密技术，保护了通信内容的安全'
171 |       },
172 |       usage: {
173 |         usage: '使用方法',
174 |         step1: '先连接摄像头，将作为摄像头的设备进入`摄像头`页面，输入连接ID，点连接。',
175 |         step2: '监控端进入`监控`页面，填入与摄像头相同的连接ID，点连接，即可连到对应的摄像头'
176 |       },
177 |       hint: {
178 |         recHint: '当前浏览器不支持文件访问API，限制录制时长10分钟'
179 |       }
180 |     }
181 |   }
182 | }))
183 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |   devtools: { enabled: true },
 4 |   css: ['~/assets/main.css'],
 5 |   modules: ['@nuxtjs/seo', '@nuxtjs/i18n', '@nuxt/ui', '@vite-pwa/nuxt'],
 6 | 
 7 |   app: {
 8 |     head: {
 9 |       charset: 'utf-8',
10 |       viewport: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0',
11 |       link: [{ rel: 'icon', href: '/favicon.webp' }]
12 |     }
13 |   },
14 | 
15 |   site: {
16 |     // url: 'http://localhost:3000',
17 |     url: 'https://webcamera.cc',
18 |     name: 'WebCamera',
19 |     description: 'WebCamera'
20 |     // defaultLocale: 'zh'
21 |   },
22 | 
23 |   i18n: {
24 |     vueI18n: './i18n.config.ts',
25 |     baseUrl: 'https://webcamera.cc',
26 |     locales: [
27 |       { code: 'en', iso: 'en-US' },
28 |       { code: 'zh', iso: 'zh-CN' }
29 |     ],
30 |     defaultLocale: 'en',
31 |     detectBrowserLanguage: {
32 |       useCookie: true,
33 |       cookieKey: 'i18n_redirected',
34 |       redirectOn: 'root'
35 |     }
36 |   },
37 | 
38 |   ogImage: {
39 |     enabled: false
40 |   },
41 | 
42 |   colorMode: {
43 |     preference: 'system', // default value of $colorMode.preference
44 |     fallback: 'light', // fallback value if not system preference found
45 |     hid: 'nuxt-color-mode-script',
46 |     globalName: '__NUXT_COLOR_MODE__',
47 |     componentName: 'ColorScheme',
48 |     classPrefix: '',
49 |     classSuffix: '',
50 |     storageKey: 'nuxt-color-mode'
51 |   },
52 | 
53 |   pwa: {
54 |     strategies: 'generateSW',
55 |     registerType: 'autoUpdate',
56 | 
57 |     workbox: {
58 |       runtimeCaching: [
59 |         {
60 |           urlPattern: () => true,
61 |           handler: 'NetworkOnly'
62 |         }
63 |       ]
64 |     },
65 | 
66 |     manifest: {
67 |       name: 'Web Camera',
68 |       short_name: 'WebCamera',
69 |       theme_color: '#ffffff',
70 | 
71 |       icons: [
72 |         {
73 |           src: '/favicon.webp',
74 |           sizes: '512x512',
75 |           type: 'image/webp',
76 |           purpose: 'any'
77 |         }
78 |       ]
79 |     }
80 |   }
81 | })
82 | 


--------------------------------------------------------------------------------
/ogImg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShouChenICU/WebCamera/4007149dc40c27a9b02a047c8c8293e4fac0aafb/ogImg.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev --host",
 8 |     "generate": "nuxt generate",
 9 |     "preview": "nuxt preview",
10 |     "postinstall": "nuxt prepare"
11 |   },
12 |   "dependencies": {
13 |     "@isaacs/ttlcache": "^1.4.1",
14 |     "@nuxt/ui": "^2.16.0",
15 |     "@nuxtjs/i18n": "^8.3.1",
16 |     "@nuxtjs/seo": "^2.0.0-rc.10",
17 |     "@vite-pwa/nuxt": "^0.7.0",
18 |     "nuxt": "^3.11.2",
19 |     "sse.js": "^2.4.1",
20 |     "vue": "^3.4.27",
21 |     "vue-router": "^4.3.2",
22 |     "webrtc-adapter": "^9.0.1"
23 |   },
24 |   "devDependencies": {
25 |     "prettier": "^3.2.5"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/pages/camera.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { RTCNode } from '#imports'
  3 | import { SSE } from 'sse.js'
  4 | 
  5 | const { t } = useI18n()
  6 | const navHeight = useNavHeight()
  7 | const videoElm = ref()
  8 | 
  9 | // 当前媒体流
 10 | const curStream = ref<MediaStream>()
 11 | 
 12 | // 当前音视频设备
 13 | const curVideoDevInfo = ref({ id: undefined, label: undefined })
 14 | const curAudioDevInfo = ref({ id: undefined, label: undefined })
 15 | const curResolution = ref('4K_priority')
 16 | 
 17 | // 可选音视频设备
 18 | const videoDevList = ref<Array<any>>([])
 19 | const audioDevList = ref<Array<any>>([])
 20 | const resolutionList = ref<Array<any>>([
 21 |   '4K_priority',
 22 |   '2K_priority',
 23 |   '1080P_priority',
 24 |   '720P_priority'
 25 | ])
 26 | 
 27 | const isOpenAudio = ref(true)
 28 | 
 29 | // 是否开启自动重联
 30 | const isAutoReconnect = ref(false)
 31 | 
 32 | // 日志信息
 33 | const logInfo = ref<any>({
 34 |   state: 'disconnected',
 35 |   logs: [],
 36 |   bytesReceived: 0,
 37 |   bytesSent: 0,
 38 |   local: {
 39 |     address: '',
 40 |     port: '',
 41 |     protocol: '',
 42 |     candidateType: ''
 43 |   },
 44 |   remote: {
 45 |     address: '',
 46 |     port: '',
 47 |     protocol: '',
 48 |     candidateType: ''
 49 |   }
 50 | })
 51 | 
 52 | const cameraId = ref()
 53 | const monitorId = ref('')
 54 | const isShowConnectId = ref(false)
 55 | const isConnecting = ref(false)
 56 | 
 57 | // 连接信令服务器的EventSource
 58 | const sse = shallowRef<SSE>()
 59 | 
 60 | // RTC封装
 61 | const rtcNode = shallowRef<RTCNode>()
 62 | 
 63 | let stateJobId: any
 64 | let watchDogJonId: any
 65 | 
 66 | useSeoMeta({
 67 |   title: t('btn.camera')
 68 | })
 69 | 
 70 | /**
 71 |  * 摄像头自动尝试重连
 72 |  */
 73 | function tryReconnnect() {
 74 |   setTimeout(() => {
 75 |     if (!isAutoReconnect.value || isConnecting.value || rtcNode.value?.isConnected()) {
 76 |       return
 77 |     }
 78 |     doConnect()
 79 |   }, 3000)
 80 | }
 81 | 
 82 | /**
 83 |  * 断开连接并清理资源
 84 |  */
 85 | function disconnect() {
 86 |   clearInterval(stateJobId)
 87 |   clearInterval(watchDogJonId)
 88 |   logInfo.value.logs.push({
 89 |     time: toISOStringWithTimezone(new Date()),
 90 |     type: 'info',
 91 |     content: 'Disconnect'
 92 |   })
 93 |   monitorId.value = ''
 94 |   isConnecting.value = false
 95 |   logInfo.value.state = 'disconnected'
 96 |   rtcNode.value?.dispose()
 97 |   sse.value?.close()
 98 |   refreshStream()
 99 |   tryReconnnect()
100 | }
101 | 
102 | /**
103 |  * 连接信令服务器
104 |  */
105 | function connectSignServer() {
106 |   if (!sse.value || sse.value.readyState !== 1) {
107 |     // 如果SSE不存在或者状态不是连接，则初始化
108 |     // 注意这里 SSE.OPEN 取不到值，使用数字1
109 |     logInfo.value.logs.push({
110 |       time: toISOStringWithTimezone(new Date()),
111 |       type: 'info',
112 |       content: 'Connecting sign server'
113 |     })
114 |     sse.value = new SSE('/api/camera', {
115 |       method: 'post',
116 |       headers: { 'Content-Type': 'application/json' },
117 |       payload: JSON.stringify({ cameraId: cameraId.value }),
118 |       start: false
119 |     })
120 |     sse.value.onopen = () => {
121 |       logInfo.value.logs.push({
122 |         time: toISOStringWithTimezone(new Date()),
123 |         type: 'info',
124 |         content: 'Sign server connected'
125 |       })
126 |     }
127 | 
128 |     sse.value.onerror = (e) => {
129 |       console.warn(e)
130 |     }
131 |     sse.value.onreadystatechange = (e) => {
132 |       if (sse.value?.readyState === 2) {
133 |         logInfo.value.logs.push({
134 |           time: toISOStringWithTimezone(new Date()),
135 |           type: 'warn',
136 |           content: 'Sign server disconnected'
137 |         })
138 |         setTimeout(() => {
139 |           if (rtcNode.value?.isConnected() || isConnecting.value) {
140 |             connectSignServer()
141 |           }
142 |         }, 500)
143 |       }
144 |     }
145 |   }
146 | 
147 |   sse.value.onmessage = (e) => {
148 |     // console.log(e)
149 | 
150 |     const obj = JSON.parse(e.data)
151 |     if (obj?.type === 'sdp') {
152 |       logInfo.value.logs.push({
153 |         time: toISOStringWithTimezone(new Date()),
154 |         type: 'info',
155 |         content: 'Receive SDP type: ' + obj.content?.type
156 |       })
157 |       rtcNode.value?.setRemoteSDP(obj.content)
158 |     } else if (obj?.type === 'candidate') {
159 |       logInfo.value.logs.push({
160 |         time: toISOStringWithTimezone(new Date()),
161 |         type: 'info',
162 |         content: 'Receive candidate: ' + JSON.stringify(obj.content)
163 |       })
164 |       rtcNode.value?.addICECandidate(obj.content)
165 |     } else if (obj.type === 'monitorId') {
166 |       if (isConnecting.value && !rtcNode.value?.isConnected()) {
167 |         monitorId.value = obj.content
168 |         if (curStream.value) {
169 |           rtcNode.value?.updateStream(curStream.value)
170 | 
171 |           // 超时检测
172 |           watchDogJonId = setTimeout(() => {
173 |             if (isConnecting.value) {
174 |               logInfo.value.logs.push({
175 |                 time: toISOStringWithTimezone(new Date()),
176 |                 type: 'error',
177 |                 content: 'Connect timeout'
178 |               })
179 |               disconnect()
180 |             }
181 |           }, 20e3)
182 |         }
183 |       }
184 |     }
185 |   }
186 |   sse.value?.stream()
187 | }
188 | 
189 | /**
190 |  * 开始连接
191 |  */
192 | function doConnect() {
193 |   if (isConnecting.value || !cameraId.value.trim()) {
194 |     return
195 |   }
196 |   localStorage.setItem('cameraId', cameraId.value)
197 |   logInfo.value.logs.push({
198 |     time: toISOStringWithTimezone(new Date()),
199 |     type: 'info',
200 |     content: 'Do connecting...'
201 |   })
202 |   isConnecting.value = true
203 |   monitorId.value = ''
204 |   logInfo.value.state = 'connecting'
205 | 
206 |   rtcNode.value?.dispose()
207 |   // refreshStream()
208 |   rtcNode.value = new RTCNode(pubIceServers)
209 |   rtcNode.value.onConnected = () => {
210 |     isConnecting.value = false
211 |     logInfo.value.state = 'connected'
212 |     stateJobId = setInterval(async () => {
213 |       const info = await rtcNode.value?.getInfo()
214 |       logInfo.value.bytesSent = info?.bytesSent
215 |       logInfo.value.bytesReceived = info?.bytesReceived
216 |       logInfo.value.local = info?.local
217 |       logInfo.value.remote = info?.remote
218 |     }, 1000)
219 |     logInfo.value.logs.push({
220 |       time: toISOStringWithTimezone(new Date()),
221 |       type: 'info',
222 |       content: 'Connected'
223 |     })
224 |   }
225 |   rtcNode.value.onDispose = disconnect
226 |   rtcNode.value.onError = (e) => {
227 |     console.warn(e)
228 |   }
229 |   rtcNode.value.onSDP = (sdp) => {
230 |     logInfo.value.logs.push({
231 |       time: toISOStringWithTimezone(new Date()),
232 |       type: 'info',
233 |       content: 'Send SDP, type: ' + sdp.type
234 |     })
235 |     $fetch('/api/sendEvent', {
236 |       method: 'post',
237 |       body: { id: monitorId.value, type: 'sdp', content: sdp }
238 |     })
239 |   }
240 |   rtcNode.value.onICECandidate = (candidate) => {
241 |     logInfo.value.logs.push({
242 |       time: toISOStringWithTimezone(new Date()),
243 |       type: 'info',
244 |       content: 'Send candidate: ' + JSON.stringify(candidate)
245 |     })
246 |     $fetch('/api/sendEvent', {
247 |       method: 'post',
248 |       body: { id: monitorId.value, type: 'candidate', content: candidate }
249 |     })
250 |   }
251 | 
252 |   connectSignServer()
253 | }
254 | 
255 | /**
256 |  * 关闭当前媒体流
257 |  */
258 | function closeStream() {
259 |   if (curStream.value) {
260 |     curStream.value.getTracks().forEach((t) => t.stop())
261 |     curStream.value = undefined
262 |   }
263 | }
264 | 
265 | /**
266 |  * 刷新媒体流
267 |  */
268 | async function refreshStream() {
269 |   closeStream()
270 |   try {
271 |     // 解析分辨率
272 |     let idealWidth = 3840
273 |     let idealHeight = 2160
274 |     if (curResolution.value === '2K_priority') {
275 |       idealWidth = 2560
276 |       idealHeight = 1440
277 |     } else if (curResolution.value === '1080P_priority') {
278 |       idealWidth = 1920
279 |       idealHeight = 1080
280 |     } else if (curResolution.value === '720P_priority') {
281 |       idealWidth = 1280
282 |       idealHeight = 720
283 |     }
284 |     // 如果是移动端，则翻转宽高
285 |     // if (window.innerHeight > window.innerWidth) {
286 |     //   const tmp = idealWidth
287 |     //   idealWidth = idealHeight
288 |     //   idealHeight = tmp
289 |     // }
290 |     curStream.value = await navigator?.mediaDevices?.getUserMedia({
291 |       video: {
292 |         deviceId: curVideoDevInfo.value.id,
293 |         width: { ideal: idealWidth },
294 |         height: { ideal: idealHeight }
295 |       },
296 |       audio: isOpenAudio.value ? { deviceId: curAudioDevInfo.value.id } : false
297 |     })
298 |     if (!curStream.value) {
299 |       logInfo.value.logs.push({
300 |         time: toISOStringWithTimezone(new Date()),
301 |         type: 'error',
302 |         content: 'Audio and video are not authorized!'
303 |       })
304 |       return false
305 |     }
306 | 
307 |     if (curVideoDevInfo.value?.id) {
308 |       logInfo.value.logs.push({
309 |         time: toISOStringWithTimezone(new Date()),
310 |         type: 'info',
311 |         content: 'Video dev: ' + curVideoDevInfo.value?.id + ' - ' + curVideoDevInfo.value?.label
312 |       })
313 |       localStorage.setItem('videoDev', JSON.stringify(curVideoDevInfo.value))
314 |     }
315 |     if (curAudioDevInfo.value?.id && isOpenAudio.value) {
316 |       logInfo.value.logs.push({
317 |         time: toISOStringWithTimezone(new Date()),
318 |         type: 'info',
319 |         content: 'Audio dev: ' + curAudioDevInfo.value?.id + ' - ' + curAudioDevInfo.value?.label
320 |       })
321 |       localStorage.setItem('audioDev', JSON.stringify(curAudioDevInfo.value))
322 |     }
323 |     localStorage.setItem('videoResolution', curResolution.value)
324 |     videoElm.value.srcObject = curStream.value
325 |   } catch (e) {
326 |     logInfo.value.logs.push({
327 |       time: toISOStringWithTimezone(new Date()),
328 |       type: 'error',
329 |       content: 'Audio and video are not authorized!'
330 |     })
331 |     return false
332 |   }
333 | 
334 |   if (rtcNode.value?.isConnected()) {
335 |     logInfo.value.logs.push({
336 |       time: toISOStringWithTimezone(new Date()),
337 |       type: 'info',
338 |       content: 'Update stream'
339 |     })
340 |     rtcNode.value?.updateStream(curStream.value)
341 |   }
342 | 
343 |   return true
344 | }
345 | 
346 | onMounted(async () => {
347 |   logInfo.value.logs.push({
348 |     time: toISOStringWithTimezone(new Date()),
349 |     type: 'info',
350 |     content: 'Camera'
351 |   })
352 | 
353 |   // 尝试使用上次选择的设备
354 |   let tmpDev = localStorage.getItem('videoDev')
355 |   if (tmpDev) {
356 |     curVideoDevInfo.value = JSON.parse(tmpDev)
357 |   }
358 |   tmpDev = localStorage.getItem('audioDev')
359 |   if (tmpDev) {
360 |     curAudioDevInfo.value = JSON.parse(tmpDev)
361 |   }
362 |   let tmpResolution = localStorage.getItem('videoResolution')
363 |   if (tmpResolution) {
364 |     curResolution.value = tmpResolution
365 |   }
366 | 
367 |   // 更新媒体流
368 |   if (!(await refreshStream())) {
369 |     return
370 |   }
371 | 
372 |   // 枚举媒体设备
373 |   const devs = await navigator?.mediaDevices?.enumerateDevices()
374 |   const devInfoMap: any = {}
375 |   for (const dev of devs) {
376 |     const devInfo = { id: dev.deviceId, label: dev.label }
377 |     devInfoMap[dev.deviceId] = devInfo
378 |     if (dev.kind === 'videoinput') {
379 |       videoDevList.value.push(devInfo)
380 |     } else if (dev.kind === 'audioinput') {
381 |       audioDevList.value.push(devInfo)
382 |     }
383 |   }
384 |   const videoTracks = curStream.value?.getVideoTracks()
385 |   //   console.log(videoTracks)
386 |   if (videoTracks && videoTracks.length > 0) {
387 |     const vt = videoTracks[0]
388 |     const setting = vt.getSettings()
389 |     curVideoDevInfo.value = devInfoMap[setting.deviceId + '']
390 |   }
391 |   const audioTracks = curStream.value?.getAudioTracks()
392 |   if (audioTracks && audioTracks.length > 0) {
393 |     const at = audioTracks[0]
394 |     const setting = at.getSettings()
395 |     curAudioDevInfo.value = devInfoMap[setting.deviceId + '']
396 |   }
397 |   localStorage.setItem('videoDev', JSON.stringify(curVideoDevInfo.value))
398 |   localStorage.setItem('audioDev', JSON.stringify(curAudioDevInfo.value))
399 | 
400 |   watch(curAudioDevInfo, refreshStream)
401 |   watch(curVideoDevInfo, refreshStream)
402 |   watch(curResolution, refreshStream)
403 |   watch(isOpenAudio, refreshStream)
404 | 
405 |   // 获取上次使用的连接ID
406 |   cameraId.value = localStorage.getItem('cameraId')
407 |   if (!cameraId.value) {
408 |     cameraId.value = genRandomString(16)
409 |     localStorage.setItem('cameraId', cameraId.value)
410 |   }
411 | 
412 |   const tmpIsAutoReconnect = localStorage.getItem('isAutoReconnect')
413 |   if (tmpIsAutoReconnect === 'true') {
414 |     isAutoReconnect.value = true
415 |     tryReconnnect()
416 |   } else {
417 |     isAutoReconnect.value = false
418 |   }
419 |   watch(isAutoReconnect, (val) => {
420 |     localStorage.setItem('isAutoReconnect', val + '')
421 |     if (val) {
422 |       tryReconnnect()
423 |     }
424 |   })
425 | })
426 | 
427 | onUnmounted(() => {
428 |   rtcNode.value?.dispose()
429 |   sse.value?.close()
430 |   closeStream()
431 | })
432 | </script>
433 | 
434 | <template>
435 |   <div class="bg-neutral-50 dark:bg-black" :style="{ 'padding-top': navHeight + 'px' }">
436 |     <div class="overflow-y-auto md:flex md:flex-row p-4">
437 |       <div class="md:flex-1 md:p-4 space-y-4">
438 |         <!-- 选择视频设备 -->
439 |         <UFormGroup :label="$t('label.videoDev')">
440 |           <USelectMenu :options="videoDevList" v-model="curVideoDevInfo" :disabled="isConnecting" />
441 |         </UFormGroup>
442 | 
443 |         <UFormGroup :label="$t('label.resolution')">
444 |           <USelectMenu :options="resolutionList" v-model="curResolution" :disabled="isConnecting">
445 |             <template #label>{{ $t('label.' + curResolution) }}</template>
446 |             <template #option="opt">{{ $t('label.' + opt.option) }}</template>
447 |           </USelectMenu>
448 |         </UFormGroup>
449 | 
450 |         <!-- 选择音频设备 -->
451 |         <UFormGroup :label="$t('label.audioDev')">
452 |           <USelectMenu
453 |             :options="audioDevList"
454 |             v-model="curAudioDevInfo"
455 |             :disabled="!isOpenAudio || isConnecting"
456 |           />
457 | 
458 |           <!-- 是否启用音频 -->
459 |         </UFormGroup>
460 |         <div class="flex flex-row items-center justify-end gap-4 text-sm">
461 |           <label class="contents">
462 |             <span>{{ $t('btn.openAudio') }}</span>
463 |             <UToggle v-model="isOpenAudio" :disabled="isConnecting" />
464 |           </label>
465 |         </div>
466 | 
467 |         <!-- 连接ID -->
468 |         <UFormGroup :label="$t('label.connectionID')">
469 |           <UInput
470 |             :type="isShowConnectId ? 'text' : 'password'"
471 |             v-model="cameraId"
472 |             :disabled="isConnecting || logInfo.state === 'connected'"
473 |             :ui="{ icon: { trailing: { pointer: '' } } }"
474 |             size="lg"
475 |           >
476 |             <template #trailing>
477 |               <UButton
478 |                 @click="isShowConnectId = !isShowConnectId"
479 |                 variant="ghost"
480 |                 color="gray"
481 |                 square
482 |                 ><template #leading
483 |                   ><Icon
484 |                     :name="
485 |                       isShowConnectId ? 'solar:eye-linear' : 'solar:eye-closed-line-duotone'
486 |                     " /></template
487 |               ></UButton>
488 |             </template>
489 |           </UInput>
490 |         </UFormGroup>
491 | 
492 |         <div>
493 |           <UButton
494 |             block
495 |             variant="outline"
496 |             size="lg"
497 |             class="mt-8"
498 |             @click="doConnect"
499 |             v-show="logInfo.state !== 'connected'"
500 |             :loading="isConnecting"
501 |             ><template #leading
502 |               ><Icon name="solar:link-round-angle-bold" v-if="!isConnecting" /></template
503 |             >{{ $t('btn.connect') }}</UButton
504 |           >
505 |           <UButton
506 |             block
507 |             variant="outline"
508 |             size="lg"
509 |             color="rose"
510 |             class="mt-8"
511 |             @click="disconnect"
512 |             v-show="logInfo.state === 'connected'"
513 |             ><template #leading
514 |               ><Icon name="solar:link-broken-minimalistic-bold" v-if="!isConnecting" /></template
515 |             >{{ $t('btn.disconnect') }}</UButton
516 |           >
517 |         </div>
518 |         <div class="flex flex-row items-center justify-end gap-4 text-sm">
519 |           <label class="contents">
520 |             <span>{{ $t('btn.autoConnect') }}</span>
521 |             <UToggle v-model="isAutoReconnect" />
522 |           </label>
523 |         </div>
524 |       </div>
525 |       <div class="md:flex-1 md:p-4 mt-8 md:mt-0">
526 |         <video autoplay controls muted ref="videoElm" class="w-full rounded-md"></video>
527 |       </div>
528 |     </div>
529 | 
530 |     <LogBar :logInfo="logInfo" />
531 |   </div>
532 | </template>
533 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const locatePath = useLocalePath()
 3 | const { t } = useI18n()
 4 | 
 5 | const desList = ref([
 6 |   {
 7 |     icon: 'material-symbols:browse-activity-outline-rounded',
 8 |     title: 't1',
 9 |     des: 'd1'
10 |   },
11 |   {
12 |     icon: 'material-symbols:speed-outline-rounded',
13 |     title: 't2',
14 |     des: 'd2'
15 |   },
16 |   {
17 |     icon: 'material-symbols:encrypted-outline',
18 |     title: 't3',
19 |     des: 'd3'
20 |   }
21 | ])
22 | 
23 | useSeoMeta({
24 |   title: t('home')
25 | })
26 | </script>
27 | 
28 | <template>
29 |   <div class="pb-12">
30 |     <div
31 |       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)]"
32 |     >
33 |       <div class="text-center">
34 |         <h1 class="text-3xl flex flex-row justify-center items-center gap-4">
35 |           <img src="/favicon.webp" alt="web camera" class="size-8" />WebCamera
36 |         </h1>
37 |         <h2 class="text-base mt-8">{{ $t('welcome') }}</h2>
38 |       </div>
39 | 
40 |       <div class="flex flex-row items-center justify-center gap-8 mt-12">
41 |         <UButton color="violet" size="lg" :to="locatePath('/camera')"
42 |           ><template #leading><Icon name="solar:videocamera-record-outline" /></template
43 |           >{{ $t('btn.camera') }}</UButton
44 |         >
45 | 
46 |         <UButton color="sky" size="lg" :to="locatePath('/monitor')"
47 |           ><template #leading><Icon name="solar:monitor-camera-line-duotone" /></template
48 |           >{{ $t('btn.monitor') }}</UButton
49 |         >
50 |       </div>
51 |     </div>
52 | 
53 |     <div class="md:grid md:grid-cols-3 md:p-12 gap-4 p-4 space-y-4 md:space-y-0">
54 |       <div
55 |         v-for="(item, idx) of desList"
56 |         class="flex flex-row items-center md:gap-4 gap-3 p-3 shadow shadow-black/20 rounded-lg bg-white dark:bg-neutral-800"
57 |       >
58 |         <Icon :name="item.icon" size="32" />
59 |         <div class="flex-1">
60 |           <h2 class="md:text-xl text-lg">{{ $t('des.' + item.title) }}</h2>
61 |           <p class="md:text-sm text-xs">{{ $t('des.' + item.des) }}</p>
62 |         </div>
63 |       </div>
64 |     </div>
65 | 
66 |     <div class="md:px-12 p-4 space-y-2">
67 |       <h2 class="text-lg flex flex-row items-center gap-1">
68 |         <Icon name="fluent:data-usage-24-regular" />{{ $t('usage.usage') }}
69 |       </h2>
70 |       <p>1. {{ $t('usage.step1') }}</p>
71 |       <p>2. {{ $t('usage.step2') }}</p>
72 |     </div>
73 |   </div>
74 | </template>
75 | 


--------------------------------------------------------------------------------
/pages/monitor.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { RTCNode } from '#imports'
  3 | import { SSE } from 'sse.js'
  4 | 
  5 | const { t } = useI18n()
  6 | const navHeight = useNavHeight()
  7 | 
  8 | // 当前媒体流
  9 | const curStream = ref<MediaStream>()
 10 | const videoElm = ref()
 11 | 
 12 | // 日志信息
 13 | const logInfo = ref<any>({
 14 |   state: 'disconnected',
 15 |   logs: [],
 16 |   bytesReceived: 0,
 17 |   bytesSent: 0,
 18 |   local: {
 19 |     address: '',
 20 |     port: '',
 21 |     protocol: '',
 22 |     candidateType: ''
 23 |   },
 24 |   remote: {
 25 |     address: '',
 26 |     port: '',
 27 |     protocol: '',
 28 |     candidateType: ''
 29 |   }
 30 | })
 31 | 
 32 | const isShowConnectId = ref(false)
 33 | const cameraId = ref()
 34 | const monitorId = ref('')
 35 | const isConnecting = ref(false)
 36 | 
 37 | // 连接信令服务器的EventSource
 38 | const sse = shallowRef<SSE>()
 39 | 
 40 | // RTC封装
 41 | const rtcNode = shallowRef<RTCNode>()
 42 | 
 43 | let stateJobId: any
 44 | let watchDogJobId: any
 45 | 
 46 | const isModernFileAPISupport = ref(false)
 47 | 
 48 | const isRecordSettingModalOpen = ref(false)
 49 | const isRecording = ref(false)
 50 | const recordingStartTime = ref(0)
 51 | const recordingTimeStr = ref('')
 52 | const recordSize = ref(0)
 53 | const recordSetting = ref({
 54 |   mimeType: '',
 55 |   bitsPerSecond: 0
 56 | })
 57 | let videoChunks: Blob[] = []
 58 | let fileHandler: FileSystemFileHandle
 59 | let mediaRecoder: MediaRecorder
 60 | 
 61 | useSeoMeta({
 62 |   title: t('btn.monitor')
 63 | })
 64 | 
 65 | /**
 66 |  * 开始录制
 67 |  */
 68 | async function startRecording() {
 69 |   if (isRecording.value || !curStream.value) {
 70 |     return
 71 |   }
 72 |   isRecording.value = true
 73 |   recordingStartTime.value = new Date().getTime()
 74 |   recordSize.value = 0
 75 |   videoChunks = []
 76 |   if (isModernFileAPIAvailable()) {
 77 |     try {
 78 |       // 支持现代化文件访问，数据直接写入磁盘
 79 |       fileHandler = await showSaveFilePicker({
 80 |         startIn: 'downloads',
 81 |         suggestedName: 'Video_' + formatDateTime(new Date(), 'yyyyMMddHHmmss') + '.webm'
 82 |       })
 83 |     } catch (e) {
 84 |       console.warn(e)
 85 |       recordingStartTime.value = 0
 86 |       isRecording.value = false
 87 |       return
 88 |     }
 89 |     const writer = await fileHandler.createWritable()
 90 | 
 91 |     mediaRecoder = new MediaRecorder(curStream.value, { mimeType: recordSetting.value.mimeType })
 92 |     mediaRecoder.ondataavailable = (ev) => {
 93 |       recordingTimeStr.value = formatTime(new Date().getTime() - recordingStartTime.value)
 94 |       recordSize.value += ev.data.size
 95 |       return writer.write(ev.data)
 96 |     }
 97 |     mediaRecoder.onerror = console.error
 98 |     mediaRecoder.onstop = () => writer.close()
 99 |     mediaRecoder.start(200)
100 |   } else {
101 |     // 不支持现代化文件访问，录制数据保存在内存中（注意可能导致OOM
102 | 
103 |     mediaRecoder = new MediaRecorder(curStream.value, { mimeType: recordSetting.value.mimeType })
104 |     mediaRecoder.ondataavailable = (ev) => {
105 |       const timeDuration = new Date().getTime() - recordingStartTime.value
106 |       recordingTimeStr.value = formatTime(timeDuration)
107 |       recordSize.value += ev.data.size
108 |       videoChunks.push(ev.data)
109 |       if (timeDuration >= 600e3) {
110 |         // 超过十分钟，停止录制，避免OOM
111 |         mediaRecoder.stop()
112 |       }
113 |     }
114 |     mediaRecoder.onerror = console.error
115 |     mediaRecoder.onstop = () => {
116 |       const videoBlob = new Blob(videoChunks, { type: mediaRecoder.mimeType })
117 |       doDownloadFromBlob(
118 |         videoBlob,
119 |         'Video_' + formatDateTime(new Date(), 'yyyyMMddHHmmss') + '.webm'
120 |       )
121 |     }
122 |     mediaRecoder.start(200)
123 |   }
124 | }
125 | 
126 | /**
127 |  * 结束录制
128 |  */
129 | function stopRecording() {
130 |   mediaRecoder?.stop()
131 |   isRecording.value = false
132 | }
133 | 
134 | /**
135 |  * 关闭媒体流
136 |  */
137 | function closeStream() {
138 |   if (curStream.value) {
139 |     curStream.value.getTracks().forEach((t) => t.stop())
140 |     curStream.value = undefined
141 |     videoElm.value.srcObject = undefined
142 |   }
143 | }
144 | 
145 | /**
146 |  * 断开连接并清理资源
147 |  */
148 | function disconnect() {
149 |   stopRecording()
150 |   clearInterval(stateJobId)
151 |   clearInterval(watchDogJobId)
152 |   logInfo.value.logs.push({
153 |     time: toISOStringWithTimezone(new Date()),
154 |     type: 'info',
155 |     content: 'Disconnect'
156 |   })
157 |   isConnecting.value = false
158 |   logInfo.value.state = 'disconnected'
159 |   rtcNode.value?.dispose()
160 |   sse.value?.close()
161 |   closeStream()
162 | }
163 | 
164 | /**
165 |  * 连接信令服务器
166 |  */
167 | function connectSignServer() {
168 |   if (!sse.value || sse.value.readyState !== 1) {
169 |     // 如果SSE不存在或者状态不是连接，则初始化
170 |     // 注意这里 SSE.OPEN 取不到值，使用数字1
171 |     logInfo.value.logs.push({
172 |       time: toISOStringWithTimezone(new Date()),
173 |       type: 'info',
174 |       content: 'Connecting sign server'
175 |     })
176 |     sse.value = new SSE('/api/monitor', {
177 |       method: 'post',
178 |       headers: { 'Content-Type': 'application/json' },
179 |       payload: JSON.stringify({ monitorId: monitorId.value }),
180 |       start: false
181 |     })
182 |     sse.value.onopen = () => {
183 |       logInfo.value.logs.push({
184 |         time: toISOStringWithTimezone(new Date()),
185 |         type: 'info',
186 |         content: 'Sign server connected'
187 |       })
188 |       if (!rtcNode.value || !rtcNode.value.isConnected()) {
189 |         $fetch('/api/sendEvent', {
190 |           method: 'post',
191 |           body: { id: cameraId.value, type: 'monitorId', content: monitorId.value }
192 |         }).catch((e) => {
193 |           console.error(e)
194 |           logInfo.value.logs.push({
195 |             time: toISOStringWithTimezone(new Date()),
196 |             type: 'warn',
197 |             content: 'Camera not found'
198 |           })
199 |           disconnect()
200 |         })
201 |       }
202 |     }
203 |     sse.value.onerror = (e) => {
204 |       console.warn(e)
205 |     }
206 |     sse.value.onreadystatechange = (e) => {
207 |       if (sse.value?.readyState === 2) {
208 |         logInfo.value.logs.push({
209 |           time: toISOStringWithTimezone(new Date()),
210 |           type: 'warn',
211 |           content: 'Sign server disconnected'
212 |         })
213 |         setTimeout(() => {
214 |           if (rtcNode.value?.isConnected()) {
215 |             connectSignServer()
216 |           }
217 |         }, 500)
218 |       }
219 |     }
220 |   }
221 |   sse.value.onmessage = (e) => {
222 |     const obj = JSON.parse(e.data)
223 |     // console.log(obj)
224 | 
225 |     if (obj?.type === 'sdp') {
226 |       logInfo.value.logs.push({
227 |         time: toISOStringWithTimezone(new Date()),
228 |         type: 'info',
229 |         content: 'Receive SDP type: ' + obj.content?.type
230 |       })
231 |       rtcNode.value?.setRemoteSDP(obj.content)
232 |       if (!videoElm.value.paused) {
233 |         videoElm.value.pause()
234 |         setTimeout(() => {
235 |           videoElm.value.play()
236 |         }, 100)
237 |       }
238 |     } else if (obj?.type === 'candidate') {
239 |       logInfo.value.logs.push({
240 |         time: toISOStringWithTimezone(new Date()),
241 |         type: 'info',
242 |         content: 'Receive candidate: ' + JSON.stringify(obj.content)
243 |       })
244 |       rtcNode.value?.addICECandidate(obj.content)
245 |     }
246 |   }
247 |   sse.value?.stream()
248 | }
249 | 
250 | /**
251 |  * 开始连接
252 |  */
253 | function doConnect() {
254 |   if (isConnecting.value || !cameraId.value.trim()) {
255 |     return
256 |   }
257 |   localStorage.setItem('connectId', cameraId.value)
258 |   logInfo.value.logs.push({
259 |     time: toISOStringWithTimezone(new Date()),
260 |     type: 'info',
261 |     content: 'Do connecting...'
262 |   })
263 |   closeStream()
264 |   videoElm.value.srcObject = undefined
265 |   isConnecting.value = true
266 |   logInfo.value.state = 'connecting'
267 | 
268 |   if (rtcNode) {
269 |     rtcNode.value?.dispose()
270 |   }
271 |   rtcNode.value = new RTCNode(pubIceServers)
272 |   rtcNode.value.onConnected = () => {
273 |     isConnecting.value = false
274 |     logInfo.value.state = 'connected'
275 |     videoElm.value.srcObject = curStream.value
276 |     stateJobId = setInterval(async () => {
277 |       const info = await rtcNode.value?.getInfo()
278 |       logInfo.value.bytesSent = info?.bytesSent
279 |       logInfo.value.bytesReceived = info?.bytesReceived
280 |       logInfo.value.local = info?.local
281 |       logInfo.value.remote = info?.remote
282 |     }, 1000)
283 |     logInfo.value.logs.push({
284 |       time: toISOStringWithTimezone(new Date()),
285 |       type: 'info',
286 |       content: 'Connected'
287 |     })
288 |   }
289 |   rtcNode.value.onDispose = disconnect
290 |   rtcNode.value.onError = (e) => {
291 |     console.warn(e)
292 |   }
293 |   rtcNode.value.onSDP = (sdp) => {
294 |     logInfo.value.logs.push({
295 |       time: toISOStringWithTimezone(new Date()),
296 |       type: 'info',
297 |       content: 'Send SDP, type: ' + sdp.type
298 |     })
299 |     $fetch('/api/sendEvent', {
300 |       method: 'post',
301 |       body: { id: cameraId.value, type: 'sdp', content: sdp }
302 |     })
303 |   }
304 |   rtcNode.value.onICECandidate = (candidate) => {
305 |     logInfo.value.logs.push({
306 |       time: toISOStringWithTimezone(new Date()),
307 |       type: 'info',
308 |       content: 'Send candidate: ' + JSON.stringify(candidate)
309 |     })
310 |     $fetch('/api/sendEvent', {
311 |       method: 'post',
312 |       body: { id: cameraId.value, type: 'candidate', content: candidate }
313 |     })
314 |   }
315 |   curStream.value = rtcNode.value.getMediaStream()
316 | 
317 |   connectSignServer()
318 | 
319 |   // 超时检测
320 |   watchDogJobId = setTimeout(() => {
321 |     if (isConnecting.value) {
322 |       logInfo.value.logs.push({
323 |         time: toISOStringWithTimezone(new Date()),
324 |         type: 'error',
325 |         content: 'Connect timeout'
326 |       })
327 |       disconnect()
328 |     }
329 |   }, 20e3)
330 | }
331 | 
332 | onMounted(() => {
333 |   logInfo.value.logs.push({
334 |     time: toISOStringWithTimezone(new Date()),
335 |     type: 'info',
336 |     content: 'Monitor'
337 |   })
338 |   monitorId.value = genRandomString(16)
339 |   cameraId.value = localStorage.getItem('connectId')
340 |   if (!cameraId.value) {
341 |     cameraId.value = ''
342 |   }
343 |   const recordMimeTypes = getRecordMimeTypes()
344 |   if (recordMimeTypes.length > 0) {
345 |     recordSetting.value.mimeType = recordMimeTypes[0]
346 |   }
347 |   isModernFileAPISupport.value = isModernFileAPIAvailable()
348 | })
349 | 
350 | onUnmounted(() => {
351 |   disconnect()
352 | })
353 | </script>
354 | 
355 | <template>
356 |   <div class="bg-neutral-50 dark:bg-black" :style="{ 'padding-top': navHeight + 'px' }">
357 |     <div class="overflow-y-auto md:flex md:flex-row p-4">
358 |       <div class="md:flex-1 md:p-4 space-y-4">
359 |         <UFormGroup :label="$t('label.connectionID')">
360 |           <UInput
361 |             :type="isShowConnectId ? 'text' : 'password'"
362 |             v-model="cameraId"
363 |             :disabled="isConnecting || logInfo.state === 'connected'"
364 |             :ui="{ icon: { trailing: { pointer: '' } } }"
365 |             size="lg"
366 |           >
367 |             <template #trailing>
368 |               <UButton
369 |                 @click="isShowConnectId = !isShowConnectId"
370 |                 variant="ghost"
371 |                 color="gray"
372 |                 square
373 |                 ><template #leading
374 |                   ><Icon
375 |                     :name="
376 |                       isShowConnectId ? 'solar:eye-linear' : 'solar:eye-closed-line-duotone'
377 |                     " /></template
378 |               ></UButton>
379 |             </template>
380 |           </UInput>
381 |         </UFormGroup>
382 | 
383 |         <div>
384 |           <UButton
385 |             block
386 |             variant="outline"
387 |             size="lg"
388 |             class="mt-8"
389 |             @click="doConnect"
390 |             v-show="logInfo.state !== 'connected'"
391 |             :loading="isConnecting"
392 |             ><template #leading
393 |               ><Icon name="solar:link-round-angle-bold" v-if="!isConnecting" /></template
394 |             >{{ $t('btn.connect') }}</UButton
395 |           >
396 | 
397 |           <UButton
398 |             block
399 |             variant="outline"
400 |             size="lg"
401 |             color="rose"
402 |             class="mt-8"
403 |             @click="disconnect"
404 |             v-show="logInfo.state === 'connected'"
405 |             ><template #leading
406 |               ><Icon name="solar:link-broken-minimalistic-bold" v-if="!isConnecting" /></template
407 |             >{{ $t('btn.disconnect') }}</UButton
408 |           >
409 |         </div>
410 | 
411 |         <UDivider class="my-8" :label="$t('label.record')" />
412 | 
413 |         <div class="flex flex-row items-center">
414 |           <span>
415 |             {{ recordingStartTime === 0 ? '00:00:00' : recordingTimeStr }}
416 |           </span>
417 | 
418 |           <span class="ml-2">{{ humanFileSize(recordSize) }}</span>
419 | 
420 |           <div class="flex-1"></div>
421 | 
422 |           <UButton
423 |             variant="ghost"
424 |             color="gray"
425 |             square
426 |             class="mr-2"
427 |             :disabled="isRecording"
428 |             @click="() => (isRecordSettingModalOpen = true)"
429 |             ><template #leading><Icon name="solar:settings-linear" /></template
430 |           ></UButton>
431 | 
432 |           <UButton color="green" @click="startRecording" v-if="!isRecording"
433 |             ><template #leading><icon name="solar:play-linear" /></template
434 |             >{{ $t('btn.startRec') }}</UButton
435 |           >
436 |           <UButton color="rose" @click="stopRecording" v-else
437 |             ><template #leading><Icon name="solar:stop-linear" /></template
438 |             >{{ $t('btn.stopRec') }}</UButton
439 |           >
440 |         </div>
441 |         <div v-show="!isModernFileAPISupport" class="text-xs">
442 |           <span class="text-red-500">*</span>{{ $t('hint.recHint') }}
443 |         </div>
444 |       </div>
445 | 
446 |       <div class="md:flex-1 md:p-4 mt-8 md:mt-0">
447 |         <video controls autoplay ref="videoElm" class="w-full rounded-md"></video>
448 |       </div>
449 |     </div>
450 | 
451 |     <LogBar :logInfo="logInfo" />
452 | 
453 |     <UModal v-model="isRecordSettingModalOpen">
454 |       <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
455 |         <template #header>
456 |           <div>{{ $t('label.recordSettings') }}</div>
457 |         </template>
458 | 
459 |         <div class="space-y-4">
460 |           <UFormGroup :label="$t('label.format')">
461 |             <USelectMenu :options="getRecordMimeTypes()" v-model="recordSetting.mimeType" />
462 |           </UFormGroup>
463 | 
464 |           <!-- <UFormGroup :label="$t('label.bps')">
465 |             <UInput type="number" v-model="recordSetting.bitsPerSecond" />
466 |           </UFormGroup> -->
467 |         </div>
468 |       </UCard>
469 |     </UModal>
470 |   </div>
471 | </template>
472 | 


--------------------------------------------------------------------------------
/public/favicon.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShouChenICU/WebCamera/4007149dc40c27a9b02a047c8c8293e4fac0aafb/public/favicon.webp


--------------------------------------------------------------------------------
/public/ogImg.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShouChenICU/WebCamera/4007149dc40c27a9b02a047c8c8293e4fac0aafb/public/ogImg.webp


--------------------------------------------------------------------------------
/server/api/camera.post.ts:
--------------------------------------------------------------------------------
 1 | export default defineEventHandler(async (event) => {
 2 |   const body = await readBody(event)
 3 | 
 4 |   // console.log(body)
 5 | 
 6 |   const cameraId = body?.cameraId
 7 | 
 8 |   if (!cameraId) {
 9 |     throw createError({ statusCode: 400, statusText: 'Bad Request' })
10 |   }
11 | 
12 |   const tmpEs = sseMap.get(cameraId)
13 |   if (tmpEs) {
14 |     await tmpEs.close()
15 |     // throw createError({ statusCode: 400, statusText: 'Connect id already exists' })
16 |   }
17 | 
18 |   const es = createEventStream(event)
19 |   sseMap.set(cameraId, es)
20 | 
21 |   es.onClosed(async () => {
22 |     sseMap.delete(cameraId)
23 |     await es.close()
24 |   })
25 | 
26 |   es.push(JSON.stringify({ type: 'heartbeat' }))
27 | 
28 |   return es.send()
29 | })
30 | 


--------------------------------------------------------------------------------
/server/api/monitor.post.ts:
--------------------------------------------------------------------------------
 1 | export default defineEventHandler(async (event) => {
 2 |   const body = await readBody(event)
 3 | 
 4 |   // console.log(body)
 5 | 
 6 |   const monitorId = body?.monitorId
 7 |   //   const sdp = body?.sdp
 8 | 
 9 |   if (!monitorId) {
10 |     throw createError({ statusCode: 400, statusText: 'Bad Request' })
11 |   }
12 | 
13 |   const es = createEventStream(event)
14 |   sseMap.set(monitorId, es)
15 | 
16 |   es.onClosed(async () => {
17 |     sseMap.delete(monitorId)
18 |     await es.close()
19 |   })
20 | 
21 |   es.push(JSON.stringify({ type: 'heartbeat' }))
22 | 
23 |   return es.send()
24 | })
25 | 


--------------------------------------------------------------------------------
/server/api/sendEvent.post.ts:
--------------------------------------------------------------------------------
 1 | export default defineEventHandler(async (event) => {
 2 |   const body = await readBody(event)
 3 | 
 4 |   // console.log('event', body)
 5 | 
 6 |   const id = body.id
 7 |   const type = body.type
 8 |   const content = body.content
 9 |   if (!id || !type || !content) {
10 |     throw createError({ statusCode: 400, statusText: 'Bad Request' })
11 |   }
12 | 
13 |   const es = sseMap.get(id)
14 |   if (!es) {
15 |     throw createError({ statusCode: 404, statusText: 'Not found' })
16 |   }
17 | 
18 |   await es.push(JSON.stringify({ type: type, content: content }))
19 | 
20 |   return 'success'
21 | })
22 | 


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/server/utils/sseMap.ts:
--------------------------------------------------------------------------------
 1 | import TTLCache from '@isaacs/ttlcache'
 2 | import { toISOStringWithTimezone } from '~/utils/DateUtils'
 3 | 
 4 | export const sseMap = new TTLCache<string, any>({
 5 |   max: 2048,
 6 |   ttl: 600e3,
 7 |   dispose: (val, key) => {
 8 |     try {
 9 |       console.log(toISOStringWithTimezone(new Date()) + ' dispose: ' + key.substring(0, 6) + '...')
10 |       val.close()
11 |     } catch (e) {
12 |       console.warn(e)
13 |     }
14 |   }
15 | })
16 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from 'tailwindcss'
 2 | // import typography from '@tailwindcss/typography'
 3 | 
 4 | export default <Partial<Config>>{
 5 |   darkMode: 'selector',
 6 |   theme: {
 7 |     extend: {
 8 |       aspectRatio: {
 9 |         auto: 'auto',
10 |         square: '1 / 1',
11 |         video: '16 / 9'
12 |       }
13 |     }
14 |   }
15 |   // plugins: [typography]
16 | }
17 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/utils/DateUtils.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 格式化日期
  3 |  * @param {Date} date 日期
  4 |  * @param {string} format 格式化字符串
  5 |  * @returns 格式化的日期
  6 |  */
  7 | export function formatDateTime(date, format) {
  8 |   const re = /(y+)/
  9 |   if (re.test(format)) {
 10 |     const t = re.exec(format)[1]
 11 |     format = format.replace(t, (date.getFullYear() + '').substring(4 - t.length))
 12 |   }
 13 | 
 14 |   const o = {
 15 |     'M+': date.getMonth() + 1, // 月份
 16 |     'd+': date.getDate(), // 日
 17 |     'H+': date.getHours(), // 小时
 18 |     'm+': date.getMinutes(), // 分
 19 |     's+': date.getSeconds(), // 秒
 20 |     'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
 21 |     S: date.getMilliseconds() // 毫秒
 22 |   }
 23 |   for (let k in o) {
 24 |     const regx = new RegExp('(' + k + ')')
 25 |     if (regx.test(format)) {
 26 |       const t = regx.exec(format)[1]
 27 |       format = format.replace(t, t.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
 28 |     }
 29 |   }
 30 |   return format
 31 | }
 32 | 
 33 | /**
 34 |  * 将毫秒数格式化为 HH:mm:ss
 35 |  * @param {number} milliseconds
 36 |  * @returns
 37 |  */
 38 | export function formatTime(milliseconds) {
 39 |   // 计算小时数
 40 |   const hours = Math.floor(milliseconds / (1000 * 60 * 60))
 41 |   // 计算剩余的分钟数
 42 |   const minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60))
 43 |   // 计算剩余的秒数
 44 |   const seconds = Math.floor((milliseconds % (1000 * 60)) / 1000)
 45 | 
 46 |   // 格式化分钟和秒数为两位数
 47 |   const formattedMinutes = minutes.toString().padStart(2, '0')
 48 |   const formattedSeconds = seconds.toString().padStart(2, '0')
 49 | 
 50 |   return `${hours}:${formattedMinutes}:${formattedSeconds}`
 51 | }
 52 | 
 53 | export function currentTime(format) {
 54 |   if (format === undefined) {
 55 |     format = 'yyyy/MM/dd HH:mm:ss'
 56 |   }
 57 |   return formatDateTime(new Date(), format)
 58 | }
 59 | 
 60 | /**
 61 |  * 给定日期返回距今的时间偏移，超过7天返回正常日期格式化字符串
 62 |  * @param {Date} date 日期
 63 |  * @param {function} t i18n函数
 64 |  * @returns 格式化字符串
 65 |  */
 66 | export function timeAgo(date, t) {
 67 |   if (!date) {
 68 |     return ''
 69 |   }
 70 |   if (typeof date === 'string') {
 71 |     date = new Date(date)
 72 |   }
 73 |   const now = new Date()
 74 |   const diffMs = Math.abs(now - date)
 75 |   const diffSec = Math.floor(diffMs / 1000)
 76 |   const diffMin = Math.floor(diffSec / 60)
 77 |   const diffHour = Math.floor(diffMin / 60)
 78 |   const diffDay = Math.floor(diffHour / 24)
 79 | 
 80 |   if (diffDay <= 7) {
 81 |     if (diffDay === 0) {
 82 |       if (diffHour === 0) {
 83 |         if (diffMin === 0) {
 84 |           return t('label.secondsAgo', { n: diffSec })
 85 |         } else {
 86 |           return t('label.minutesAgo', { n: diffMin })
 87 |         }
 88 |       } else {
 89 |         return t('label.hoursAgo', { n: diffHour })
 90 |       }
 91 |     } else {
 92 |       return t('label.daysAgo', { n: diffDay })
 93 |     }
 94 |   } else {
 95 |     return formatDateTime(date, 'yyyy/MM/dd')
 96 |   }
 97 | }
 98 | 
 99 | export function timeRecent(date) {
100 |   if (!date) {
101 |     return ''
102 |   }
103 |   if (typeof date === 'string') {
104 |     date = new Date(date)
105 |   }
106 |   const now = new Date()
107 |   const diffMs = Math.abs(now - date)
108 |   const diffSec = Math.floor(diffMs / 1000)
109 |   const diffMin = Math.floor(diffSec / 60)
110 |   const diffHour = Math.floor(diffMin / 60)
111 |   const diffDay = Math.floor(diffHour / 24)
112 | 
113 |   if (diffDay <= 1) {
114 |     return formatDateTime(date, 'HH:mm:ss')
115 |   } else {
116 |     return formatDateTime(date, 'yyyy/MM/dd HH:mm:ss')
117 |   }
118 | }
119 | 
120 | export function toISOStringWithTimezone(date) {
121 |   function pad(number) {
122 |     if (number < 10) {
123 |       return '0' + number
124 |     }
125 |     return number
126 |   }
127 | 
128 |   var offset = date.getTimezoneOffset()
129 |   var offsetHours = Math.abs(offset / 60)
130 |   var offsetMinutes = Math.abs(offset % 60)
131 |   var timezoneOffset = (offset >= 0 ? '-' : '+') + pad(offsetHours) + ':' + pad(offsetMinutes)
132 | 
133 |   return (
134 |     date.getFullYear() +
135 |     '-' +
136 |     pad(date.getMonth() + 1) +
137 |     '-' +
138 |     pad(date.getDate()) +
139 |     'T' +
140 |     pad(date.getHours()) +
141 |     ':' +
142 |     pad(date.getMinutes()) +
143 |     ':' +
144 |     pad(date.getSeconds()) +
145 |     '.' +
146 |     date.getMilliseconds() +
147 |     timezoneOffset
148 |   )
149 | }
150 | 


--------------------------------------------------------------------------------
/utils/RTCNode.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * RTC节点封装工具类
  3 |  */
  4 | export class RTCNode {
  5 |   private pc: RTCPeerConnection
  6 |   private mediaStream: MediaStream
  7 |   private dataChunnel: RTCDataChannel | undefined
  8 |   public onSDP: (sdp: RTCSessionDescriptionInit) => void = () => {}
  9 |   public onICECandidate: (candidate: RTCIceCandidate) => void = () => {}
 10 |   public onError: (e: any) => void = () => {}
 11 |   public onConnected: () => void = () => {}
 12 |   public onDispose: () => void = () => {}
 13 | 
 14 |   constructor(iceServers: RTCIceServer[] | undefined = undefined) {
 15 |     this.mediaStream = new MediaStream()
 16 |     // 初始化
 17 |     this.pc = new RTCPeerConnection({ iceServers: iceServers })
 18 |     this.pc.onnegotiationneeded = () => this.reNegotition()
 19 |     this.pc.onicecandidate = (e) => (e.candidate ? this.onICECandidate(e.candidate) : undefined)
 20 |     this.pc.onicecandidateerror = this.onError
 21 |     // 收到媒体流
 22 |     this.pc.ontrack = (e) => {
 23 |       const track = e?.track
 24 |       if (track) {
 25 |         track.onmute = () => {
 26 |           this.mediaStream.removeTrack(track)
 27 |           track.stop()
 28 |         }
 29 |         this.mediaStream.addTrack(track)
 30 |       }
 31 |     }
 32 |     this.pc.onconnectionstatechange = () => {
 33 |       if (['closed', 'disconnected', 'failed'].includes(this.pc.connectionState)) {
 34 |         this.dispose()
 35 |         this.onDispose()
 36 |       } else if (this.pc.connectionState === 'connected') {
 37 |         this.onConnected()
 38 |       }
 39 |     }
 40 |   }
 41 | 
 42 |   /**
 43 |    * 重协商SDP
 44 |    */
 45 |   private async reNegotition() {
 46 |     return this.pc
 47 |       .createOffer()
 48 |       .then((offer) => this.pc.setLocalDescription(offer))
 49 |       .then(() => (this.pc.localDescription ? this.onSDP(this.pc.localDescription) : undefined))
 50 |       .catch((e) => {
 51 |         console.error(e)
 52 |         this.onError(e)
 53 |         this.dispose()
 54 |       })
 55 |   }
 56 | 
 57 |   /**
 58 |    * 更新要发送的媒体流
 59 |    * @param stream 媒体流
 60 |    */
 61 |   public updateStream(stream: MediaStream) {
 62 |     this.pc.getSenders().forEach((sender) => {
 63 |       this.pc.removeTrack(sender)
 64 |       sender.track?.stop()
 65 |     })
 66 |     stream.getTracks().forEach((track) => this.pc.addTrack(track))
 67 |   }
 68 | 
 69 |   /**
 70 |    * 设置远端SDP
 71 |    * @param sdp 会话描述
 72 |    */
 73 |   public async setRemoteSDP(sdp: RTCSessionDescriptionInit) {
 74 |     return this.pc
 75 |       .setRemoteDescription(sdp)
 76 |       .then(() => (sdp?.type === 'offer' ? this.pc.createAnswer() : undefined))
 77 |       .then(async (anwser) => {
 78 |         if (anwser) {
 79 |           await this.pc.setLocalDescription(anwser)
 80 |           this.onSDP(anwser)
 81 |         }
 82 |       })
 83 |       .catch((e) => {
 84 |         console.error(e)
 85 |         this.onError(e)
 86 |         this.dispose()
 87 |       })
 88 |   }
 89 | 
 90 |   /**
 91 |    * 添加ICE服务候选
 92 |    * @param candidate ICE服务候选
 93 |    */
 94 |   public async addICECandidate(candidate: RTCIceCandidateInit) {
 95 |     return this.pc.addIceCandidate(candidate)
 96 |   }
 97 | 
 98 |   /**
 99 |    * 获取接收到的媒体流
100 |    * @returns 媒体流
101 |    */
102 |   public getMediaStream() {
103 |     return this.mediaStream
104 |   }
105 | 
106 |   /**
107 |    * 获取数据通道，没有则创建
108 |    * @returns 数据通道
109 |    */
110 |   public getDataChunnel() {
111 |     if (!this.dataChunnel) {
112 |       this.dataChunnel = this.pc.createDataChannel('dataChunnel')
113 |     }
114 |     return this.dataChunnel
115 |   }
116 | 
117 |   /**
118 |    * 获取统计信息
119 |    * @returns 统计信息
120 |    */
121 |   public async getInfo() {
122 |     return this.pc
123 |       .getStats()
124 |       .then((states: RTCStatsReport) => {
125 |         const info = {
126 |           bytesSent: 0,
127 |           bytesReceived: 0,
128 |           local: {
129 |             address: '',
130 |             port: 0,
131 |             protocol: '',
132 |             candidateType: ''
133 |           },
134 |           remote: {
135 |             address: '',
136 |             port: 0,
137 |             protocol: '',
138 |             candidateType: ''
139 |           }
140 |         }
141 |         for (const state of states.values()) {
142 |           if (state.type === 'transport') {
143 |             info.bytesSent = state?.bytesSent
144 |             info.bytesReceived = state?.bytesReceived
145 |             const selectedCandidatePair = states.get(state?.selectedCandidatePairId)
146 |             const localCandidate = states.get(selectedCandidatePair?.localCandidateId)
147 |             info.local.address = localCandidate?.address
148 |             info.local.port = localCandidate?.port
149 |             info.local.protocol = localCandidate?.protocol
150 |             info.local.candidateType = localCandidate?.candidateType
151 |             const remoteCandidate = states.get(selectedCandidatePair?.remoteCandidateId)
152 |             info.remote.address = remoteCandidate?.address
153 |             info.remote.port = remoteCandidate?.port
154 |             info.remote.protocol = remoteCandidate?.protocol
155 |             info.remote.candidateType = remoteCandidate?.candidateType
156 |             break
157 |           }
158 |         }
159 |         return info
160 |       })
161 |       .catch(this.onError)
162 |   }
163 | 
164 |   /**
165 |    * 判断是否已连接
166 |    * @returns 为 true 则已连接，否则未连接
167 |    */
168 |   public isConnected() {
169 |     return this.pc.connectionState === 'connected'
170 |   }
171 | 
172 |   /**
173 |    * 销毁节点并清理资源
174 |    */
175 |   public dispose() {
176 |     // 停止发送的媒体轨道
177 |     this.pc.getSenders().forEach((sender) => sender?.track?.stop())
178 | 
179 |     // 停止接收的媒体轨道
180 |     this.pc.getReceivers().forEach((receiver) => receiver?.track?.stop())
181 | 
182 |     // 关闭数据通道
183 |     this.dataChunnel?.close()
184 | 
185 |     // 移除所有的事件监听器
186 |     this.pc.onicecandidate = null
187 |     this.pc.ontrack = null
188 |     this.pc.ondatachannel = null
189 |     this.pc.oniceconnectionstatechange = null
190 |     this.pc.onsignalingstatechange = null
191 |     this.pc.onicegatheringstatechange = null
192 |     this.pc.onnegotiationneeded = null
193 |     this.pc.close()
194 |   }
195 | }
196 | 


--------------------------------------------------------------------------------
/utils/index.ts:
--------------------------------------------------------------------------------
  1 | export function genRandomString(length: number): string {
  2 |   const charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
  3 |   let randomString = ''
  4 |   for (let i = 0; i < length; i++) {
  5 |     const randomIndex = Math.floor(Math.random() * charset.length)
  6 |     randomString += charset.charAt(randomIndex)
  7 |   }
  8 |   return randomString
  9 | }
 10 | 
 11 | export function postEventSource(url: string, data: any, eventHandler: Function) {
 12 |   return fetch(url, {
 13 |     method: 'POST',
 14 |     headers: {
 15 |       'Content-Type': 'application/json'
 16 |     },
 17 |     body: JSON.stringify(data)
 18 |   })
 19 |     .then((response) => {
 20 |       if (!response.ok) {
 21 |         if (response.statusText) {
 22 |           throw Error(response.statusText)
 23 |         }
 24 |         throw new Error('Network response was not ok')
 25 |       }
 26 |       const contentType = response.headers.get('Content-Type')
 27 |       if (!contentType || !contentType.includes('text/event-stream')) {
 28 |         throw new Error('Expected text/event-stream content type')
 29 |       }
 30 |       if (response.body !== null) {
 31 |         return response.body.getReader()
 32 |       } else {
 33 |         throw new Error('Response body is null')
 34 |       }
 35 |     })
 36 |     .then((reader) => {
 37 |       const decoder = new TextDecoder()
 38 |       let buffer = ''
 39 | 
 40 |       async function processText(text: string) {
 41 |         buffer += text
 42 |         let newlineIndex
 43 |         while ((newlineIndex = buffer.indexOf('\n')) >= 0) {
 44 |           const line = buffer.slice(0, newlineIndex).trim()
 45 |           buffer = buffer.slice(newlineIndex + 1)
 46 | 
 47 |           if (line.startsWith('data:')) {
 48 |             const eventData = line.slice(5).trim()
 49 |             // const parsedData = JSON.parse(eventData)
 50 |             await eventHandler(eventData)
 51 |           }
 52 |         }
 53 |       }
 54 |       async function read() {
 55 |         const { done, value } = await reader.read()
 56 |         if (done) {
 57 |           // console.log('Stream complete')
 58 |           return
 59 |         }
 60 |         const chunk = decoder.decode(value, { stream: true })
 61 |         await processText(chunk)
 62 |         return read()
 63 |       }
 64 |       return read()
 65 |     })
 66 | }
 67 | 
 68 | export function closeRTCPeerConnection(peerConnection: RTCPeerConnection): void {
 69 |   if (!peerConnection) {
 70 |     console.error('Invalid RTCPeerConnection object')
 71 |     return
 72 |   }
 73 | 
 74 |   // 停止发送的媒体轨道
 75 |   peerConnection.getSenders().forEach((sender) => {
 76 |     if (sender.track) {
 77 |       sender.track.stop()
 78 |     }
 79 |   })
 80 | 
 81 |   // 停止接收的媒体轨道
 82 |   peerConnection.getReceivers().forEach((receiver) => {
 83 |     if (receiver.track) {
 84 |       receiver.track.stop()
 85 |     }
 86 |   })
 87 | 
 88 |   // 关闭所有的数据通道
 89 |   if ((peerConnection as any).dataChannels) {
 90 |     ;(peerConnection as any).dataChannels.forEach((channel: RTCDataChannel) => {
 91 |       channel.close()
 92 |     })
 93 |   }
 94 | 
 95 |   // 移除所有的事件监听器
 96 |   peerConnection.onicecandidate = null
 97 |   peerConnection.ontrack = null
 98 |   peerConnection.ondatachannel = null
 99 |   peerConnection.oniceconnectionstatechange = null
100 |   peerConnection.onsignalingstatechange = null
101 |   peerConnection.onicegatheringstatechange = null
102 |   peerConnection.onnegotiationneeded = null
103 | 
104 |   // 关闭 RTCPeerConnection
105 |   peerConnection.close()
106 |   //   console.log('RTCPeerConnection closed')
107 | }
108 | 
109 | /**
110 |  * 将字节格式化为人类友好的文本
111 |  *
112 |  * @param bytes 字节数量
113 |  * @param decimals 显示的小数位数
114 |  *
115 |  * @return 格式化后的字符串
116 |  */
117 | export function humanFileSize(bytes: number, decimals = 2) {
118 |   if (!bytes) return '0B'
119 |   var k = 1024
120 |   var dm = decimals || 2
121 |   var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
122 |   var i = Math.floor(Math.log(bytes) / Math.log(k))
123 |   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + sizes[i]
124 | }
125 | 
126 | /**
127 |  * 判断浏览器是否支持现代文件操作
128 |  */
129 | export function isModernFileAPIAvailable() {
130 |   const fileHandleSupported = 'FileSystemFileHandle' in window
131 |   const openFilePickerSupported = 'showOpenFilePicker' in window
132 |   const saveFilePickerSupported = 'showSaveFilePicker' in window
133 |   const directoryPickerSupported = 'showDirectoryPicker' in window
134 | 
135 |   return (
136 |     fileHandleSupported &&
137 |     openFilePickerSupported &&
138 |     saveFilePickerSupported &&
139 |     directoryPickerSupported
140 |   )
141 | }
142 | 
143 | export function doDownloadFromHref(href: string, filename: string) {
144 |   const a = document.createElement('a')
145 |   a.style.display = 'none'
146 |   a.href = href
147 |   a.download = filename
148 |   document.body.appendChild(a)
149 |   a.click()
150 |   a.remove()
151 | }
152 | 
153 | /**
154 |  * 从Blob下载
155 |  *
156 |  * @param {Blob} blob
157 |  * @param {string} filename
158 |  */
159 | export function doDownloadFromBlob(blob: Blob | File, filename: string) {
160 |   const objUrl = URL.createObjectURL(blob)
161 |   doDownloadFromHref(objUrl, filename)
162 |   URL.revokeObjectURL(objUrl)
163 | }
164 | 
165 | export function getRecordMimeTypes() {
166 |   const mimeTypes = [
167 |     'video/mp4',
168 |     'video/webm',
169 |     'video/ogg',
170 |     'video/mpeg',
171 |     'video/quicktime',
172 |     'video/x-msvideo'
173 |   ]
174 |   return mimeTypes.filter((t) => MediaRecorder.isTypeSupported(t))
175 | }
176 | 


--------------------------------------------------------------------------------
/utils/publicStunList.ts:
--------------------------------------------------------------------------------
  1 | export const pubStunList = [
  2 |   'iphone-stun.strato-iphone.de:3478',
  3 |   'numb.viagenie.ca:3478',
  4 |   'relay.webwormhole.io',
  5 |   's1.taraba.net:3478',
  6 |   's2.taraba.net:3478',
  7 |   'stun.12connect.com:3478',
  8 |   'stun.12voip.com:3478',
  9 |   'stun1.faktortel.com.au:3478',
 10 |   'stun1.l.google.com:19302',
 11 |   'stun.1und1.de:3478',
 12 |   'stun1.voiceeclipse.net:3478',
 13 |   'stun2.l.google.com:19302',
 14 |   'stun.2talk.com:3478',
 15 |   'stun.2talk.co.nz:3478',
 16 |   'stun.3clogic.com:3478',
 17 |   'stun.3cx.com:3478',
 18 |   'stun3.l.google.com:19302',
 19 |   'stun4.l.google.com:19302',
 20 |   'stun.aa.net.uk:3478',
 21 |   'stun.acrobits.cz:3478',
 22 |   'stun.actionvoip.com:3478',
 23 |   'stun.advfn.com:3478',
 24 |   'stun.aeta-audio.com:3478',
 25 |   'stun.aeta.com:3478',
 26 |   'stun.alltel.com.au:3478',
 27 |   'stun.altar.com.pl:3478',
 28 |   'stun.a-mm.tv:3478',
 29 |   'stun.annatel.net:3478',
 30 |   'stun.antisip.com:3478',
 31 |   'stun.arbuz.ru:3478',
 32 |   'stun.avigora.com:3478',
 33 |   'stun.avigora.fr:3478',
 34 |   'stun.awa-shima.com:3478',
 35 |   'stun.awt.be:3478',
 36 |   'stun.b2b2c.ca:3478',
 37 |   'stun.bahnhof.net:3478',
 38 |   'stun.barracuda.com:3478',
 39 |   'stun.bluesip.net:3478',
 40 |   'stun.bmwgs.cz:3478',
 41 |   'stun.botonakis.com:3478',
 42 |   'stun.budgetphone.nl:3478',
 43 |   'stun.budgetsip.com:3478',
 44 |   'stun.cablenet-as.net:3478',
 45 |   'stun.callromania.ro:3478',
 46 |   'stun.callwithus.com:3478',
 47 |   'stun.cbsys.net:3478',
 48 |   'stun.chathelp.ru:3478',
 49 |   'stun.cheapvoip.com:3478',
 50 |   'stun.ciktel.com:3478',
 51 |   'stun.cloopen.com:3478',
 52 |   'stun.cloudflare.com:3478',
 53 |   'stun.colouredlines.com.au:3478',
 54 |   'stun.comfi.com:3478',
 55 |   'stun.commpeak.com:3478',
 56 |   'stun.comtube.com:3478',
 57 |   'stun.comtube.ru:3478',
 58 |   'stun.cope.es:3478',
 59 |   'stun.counterpath.com:3478',
 60 |   'stun.counterpath.net:3478',
 61 |   'stun.cryptonit.net:3478',
 62 |   'stun.darioflaccovio.it:3478',
 63 |   'stun.datamanagement.it:3478',
 64 |   'stun.dcalling.de:3478',
 65 |   'stun.decanet.fr:3478',
 66 |   'stun.demos.ru:3478',
 67 |   'stun.develz.org:3478',
 68 |   'stun.dingaling.ca:3478',
 69 |   'stun.doublerobotics.com:3478',
 70 |   'stun.drogon.net:3478',
 71 |   'stun.duocom.es:3478',
 72 |   'stun.dus.net:3478',
 73 |   'stun.easybell.de:3478',
 74 |   'stun.easycall.pl:3478',
 75 |   'stun.easyvoip.com:3478',
 76 |   'stun.efficace-factory.com:3478',
 77 |   'stun.e-fon.ch:3478',
 78 |   'stun.einsundeins.com:3478',
 79 |   'stun.einsundeins.de:3478',
 80 |   'stun.ekiga.net:3478',
 81 |   'stun.epygi.com:3478',
 82 |   'stun.etoilediese.fr:3478',
 83 |   'stun.eyeball.com:3478',
 84 |   'stun.faktortel.com.au:3478',
 85 |   'stun.flashdance.cx:3478',
 86 |   'stun.freecall.com:3478',
 87 |   'stun.freeswitch.org:3478',
 88 |   'stun.freevoipdeal.com:3478',
 89 |   'stun.fuzemeeting.com:3478',
 90 |   'stun.gmx.de:3478',
 91 |   'stun.gmx.net:3478',
 92 |   'stun.gradwell.com:3478',
 93 |   'stun.halonet.pl:3478',
 94 |   'stun.hellonanu.com:3478',
 95 |   'stun.hoiio.com:3478',
 96 |   'stun.hosteurope.de:3478',
 97 |   'stun.ideasip.com:3478',
 98 |   'stun.imesh.com:3478',
 99 |   'stun.infra.net:3478',
100 |   'stun.internetcalls.com:3478',
101 |   'stun.intervoip.com:3478',
102 |   'stun.ipcomms.net:3478',
103 |   'stun.ipfire.org:3478',
104 |   'stun.ippi.fr:3478',
105 |   'stun.ipshka.com:3478',
106 |   'stun.iptel.org:3478',
107 |   'stun.irian.at:3478',
108 |   'stun.it1.hr:3478',
109 |   'stun.ivao.aero:3478',
110 |   'stun.jappix.com:3478',
111 |   'stun.jumblo.com:3478',
112 |   'stun.justvoip.com:3478',
113 |   'stun.kanet.ru:3478',
114 |   'stun.kiwilink.co.nz:3478',
115 |   'stun.kundenserver.de:3478',
116 |   'stun.l.google.com:19302',
117 |   'stun.linea7.net:3478',
118 |   'stun.linphone.org:3478',
119 |   'stun.liveo.fr:3478',
120 |   'stun.lowratevoip.com:3478',
121 |   'stun.lugosoft.com:3478',
122 |   'stun.lundimatin.fr:3478',
123 |   'stun.magnet.ie:3478',
124 |   'stun.manle.com:3478',
125 |   'stun.mgn.ru:3478',
126 |   'stun.mitake.com.tw:3478',
127 |   'stun.mit.de:3478',
128 |   'stun.miwifi.com:3478',
129 |   'stun.modulus.gr:3478',
130 |   'stun.mozcom.com:3478',
131 |   'stun.myvoiptraffic.com:3478',
132 |   'stun.mywatson.it:3478',
133 |   'stun.nas.net:3478',
134 |   'stun.neotel.co.za:3478',
135 |   'stun.netappel.com:3478',
136 |   'stun.netappel.fr:3478',
137 |   'stun.netgsm.com.tr:3478',
138 |   'stun.nextcloud.com:443',
139 |   'stun.nfon.net:3478',
140 |   'stun.noblogs.org:3478',
141 |   'stun.noc.ams-ix.net:3478',
142 |   'stun.node4.co.uk:3478',
143 |   'stun.nonoh.net:3478',
144 |   'stun.nottingham.ac.uk:3478',
145 |   'stun.nova.is:3478',
146 |   'stun.nventure.com:3478',
147 |   'stun.on.net.mk:3478',
148 |   'stun.ooma.com:3478',
149 |   'stun.ooonet.ru:3478',
150 |   'stun.oriontelekom.rs:3478',
151 |   'stun.outland-net.de:3478',
152 |   'stun.ozekiphone.com:3478',
153 |   'stun.patlive.com:3478',
154 |   'stun.personal-voip.de:3478',
155 |   'stun.petcube.com:3478',
156 |   'stun.phone.com:3478',
157 |   'stun.phoneserve.com:3478',
158 |   'stun.pjsip.org:3478',
159 |   'stun.poivy.com:3478',
160 |   'stun.powerpbx.org:3478',
161 |   'stun.powervoip.com:3478',
162 |   'stun.ppdi.com:3478',
163 |   'stun.prizee.com:3478',
164 |   'stun.qq.com:3478',
165 |   'stun.qvod.com:3478',
166 |   'stun.rackco.com:3478',
167 |   'stun.rapidnet.de:3478',
168 |   'stun.rb-net.com:3478',
169 |   'stun.refint.net:3478',
170 |   'stun.remote-learner.net:3478',
171 |   'stun.rixtelecom.se:3478',
172 |   'stun.rockenstein.de:3478',
173 |   'stun.rolmail.net:3478',
174 |   'stun.rounds.com:3478',
175 |   'stun.rynga.com:3478',
176 |   'stun.samsungsmartcam.com:3478',
177 |   'stun.schlund.de:3478',
178 |   'stunserver.org:3478',
179 |   'stun.services.mozilla.com:3478',
180 |   'stun.sigmavoip.com:3478',
181 |   'stun.sipdiscount.com:3478',
182 |   'stun.sipgate.net:10000',
183 |   'stun.sipgate.net:3478',
184 |   'stun.siplogin.de:3478',
185 |   'stun.sipnet.net:3478',
186 |   'stun.sipnet.ru:3478',
187 |   'stun.siportal.it:3478',
188 |   'stun.sippeer.dk:3478',
189 |   'stun.siptraffic.com:3478',
190 |   'stun.sip.us:3478',
191 |   'stun.skylink.ru:3478',
192 |   'stun.sma.de:3478',
193 |   'stun.smartvoip.com:3478',
194 |   'stun.smsdiscount.com:3478',
195 |   'stun.snafu.de:3478',
196 |   'stun.softjoys.com:3478',
197 |   'stun.solcon.nl:3478',
198 |   'stun.solnet.ch:3478',
199 |   'stun.sonetel.com:3478',
200 |   'stun.sonetel.net:3478',
201 |   'stun.sovtest.ru:3478',
202 |   'stun.speedy.com.ar:3478',
203 |   'stun.spokn.com:3478',
204 |   'stun.srce.hr:3478',
205 |   'stun.ssl7.net:3478',
206 |   'stun.stunprotocol.org:3478',
207 |   'stun.symform.com:3478',
208 |   'stun.symplicity.com:3478',
209 |   'stun.sysadminman.net:3478',
210 |   'stun.tagan.ru:3478',
211 |   'stun.tatneft.ru:3478',
212 |   'stun.teachercreated.com:3478',
213 |   'stun.telbo.com:3478',
214 |   'stun.telefacil.com:3478',
215 |   'stun.tel.lu:3478',
216 |   'stun.tis-dialog.ru:3478',
217 |   'stun.tng.de:3478',
218 |   'stun.t-online.de:3478',
219 |   'stun.twt.it:3478',
220 |   'stun.u-blox.com:3478',
221 |   'stun.ucallweconn.net:3478',
222 |   'stun.ucsb.edu:3478',
223 |   'stun.ucw.cz:3478',
224 |   'stun.uls.co.za:3478',
225 |   'stun.unseen.is:3478',
226 |   'stun.usfamily.net:3478',
227 |   'stun.veoh.com:3478',
228 |   'stun.vidyo.com:3478',
229 |   'stun.vipgroup.net:3478',
230 |   'stun.virtual-call.com:3478',
231 |   'stun.viva.gr:3478',
232 |   'stun.vivox.com:3478',
233 |   'stun.vline.com:3478',
234 |   'stun.vodafone.ro:3478',
235 |   'stun.voicetrading.com:3478',
236 |   'stun.voip.aebc.com:3478',
237 |   'stun.voiparound.com:3478',
238 |   'stun.voip.blackberry.com:3478',
239 |   'stun.voipblast.com:3478',
240 |   'stun.voipbuster.com:3478',
241 |   'stun.voipbusterpro.com:3478',
242 |   'stun.voipcheap.com:3478',
243 |   'stun.voipcheap.co.uk:3478',
244 |   'stun.voip.eutelia.it:3478',
245 |   'stun.voipfibre.com:3478',
246 |   'stun.voipgain.com:3478',
247 |   'stun.voipgate.com:3478',
248 |   'stun.voipinfocenter.com:3478',
249 |   'stun.voipplanet.nl:3478',
250 |   'stun.voippro.com:3478',
251 |   'stun.voipraider.com:3478',
252 |   'stun.voipstunt.com:3478',
253 |   'stun.voipwise.com:3478',
254 |   'stun.voipzoom.com:3478',
255 |   'stun.vo.lu:3478',
256 |   'stun.vopium.com:3478',
257 |   'stun.voxgratia.org:3478',
258 |   'stun.voxox.com:3478',
259 |   'stun.voys.nl:3478',
260 |   'stun.voztele.com:3478',
261 |   'stun.vyke.com:3478',
262 |   'stun.webcalldirect.com:3478',
263 |   'stun.whoi.edu:3478',
264 |   'stun.wifirst.net:3478',
265 |   'stun.wwdl.net:3478',
266 |   'stun.xs4all.nl:3478',
267 |   'stun.xtratelecom.es:3478',
268 |   'stun.yesss.at:3478',
269 |   'stun.zadarma.com:3478',
270 |   'stun.zadv.com:3478',
271 |   'stun.zoiper.com:3478'
272 | ]
273 | 
274 | export const pubIceServers = pubStunList.map((i) => ({
275 |   urls: 'stun:' + i
276 | }))
277 | 


--------------------------------------------------------------------------------