# camera-record-playback

**Repository Path**: personal-project_23/camera-record-playback

## Basic Information

- **Project Name**: camera-record-playback
- **Description**: 这是一个用于摄像头录像、视频播放的开源项目，支持本地摄像头采集、录制、存储和回放功能。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-05-22
- **Last Updated**: 2026-01-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# run

1. ```cmd
   npm i
   ```

2. ```cmd
   npm run dev
   ```

## 介绍

本项目react项目，使用next作为基础框架开发

* next基本操

  > 1. next为服务端渲染的框架，在服务端渲染上有很好的优势，但本项目并未使用完整的服务端渲染，本项目打包后为一个独立的前端项目
  > 2. 以app内的目录层级作为路由
  > 3. next要求node版本为18+

### 实现功能

* 隐式录制视频，并可自由选择前后摄像头

* 保存视屏，保存后的视频为webp格式，可以通过网站的play页面选择视频并播放

  > webp格式的视频不被大部分的视频播放器兼容

* 在线播放视频

[预览](https://www.wulihub.com.cn/gc/W9ErX9/index.html)

## 使用方法

1. 进入/camera/recording路由
2. 点击右下角的START按钮，选择所要使用的摄像头
3. 选中摄像头后会弹出权限窗口，请点击同意
4. 点击右下角的capture按钮会结束录制并保存文件，不同的终端可能会弹出是否保存文件的对话框
5. 点击右下角的Play按钮前往播放页面
6. 点击选择视频，选中视频后就可以播放了

## debug

* 如果启动出现问题，大部分为包问题

  > 1. 删除lock文件后再次尝试
  
* 如有问题，欢迎打扰（通过gitee方式）