# ElectronCameraDemo

**Repository Path**: scenario-samples/electron-camera-demo

## Basic Information

- **Project Name**: ElectronCameraDemo
- **Description**: 摄像头录制是PC工具应用普遍存在的一项功能，在应用上实现摄像头录制的功能。

本示例是通过MediaRecorder录制摄像头视频，然后保存到本地实现录音功能。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-26
- **Last Updated**: 2026-01-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 应用摄像头录制

## 介绍
摄像头录制是PC工具应用普遍存在的一项功能，在应用上实现摄像头录制的功能。

本示例是通过[MediaRecorder](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder)录制摄像头视频，然后保存到本地实现录音功能。

## 效果预览
<img src="screenshots/camera.gif" width="400">

## 约束与限制

- 本示例支持API Version 17 Release及以上版本。
- 本示例支持HarmonyOS 5.0.5 Release SDK及以上版本。
- 本示例需要使用DevEco Studio 5.0.5 Release及以上版本进行编译运行。

## 使用说明

1. 点击开始录制，会录制左侧预览的摄像头视频。
2. 点击停止录制，将停止录制摄像头。
3. 点击保存录制视频，选择本地路径将录制好的视频进行保存。

## 实现思路
1. 在第一次进入应用初始化的时候，通过[systemPreferences](https://gitcode.com/openharmony-sig/electron#systempreferencesrequestsystempermissionpermission)请求麦克风和摄像权限，具体代码如下：
    ```
    // 请求摄像头权限
    ipcMain.handle('request-camera-permission', async () => {
        let result = await systemPreferences.requestSystemPermission('camera')
        return result;
    })

    // 请求麦克风权限
    ipcMain.handle('request-microphone-permission', async () => {
        const result = await systemPreferences.requestSystemPermission('microphone');
        return result;
    });
    ```

2. 授权通过后，通过[MediaRecorder](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder)录制MP4格式的音频，具体代码如下：
    ```
    // 初始化媒体录制器
    function initMediaRecorder() {
        if (!mediaStream) return;

        // 创建媒体录制器
        mediaRecorder = new MediaRecorder(mediaStream, {
            mimeType: 'video/mp4; codecs="avc1.64002A"'
        });

        // 处理数据可用事件
        mediaRecorder.ondataavailable = (event) => {
            if (event.data.size > 0) {
                recordedChunks.push(event.data);
            }
        };

        // 处理录制停止事件
        mediaRecorder.onstop = () => {
            // 创建视频Blob
            const videoBlob = new Blob(recordedChunks, { type: 'video/mp4; codecs="avc1.64002A"' });

            // 启用保存按钮
            saveBtn.disabled = false;
            saveBtn.textContent = `保存录制视频 (${formatFileSize(videoBlob.size)})`;

            // 更新状态
            statusText.textContent = '录制完成，可以保存视频';
            statusDot.classList.remove('recording');

            // 停止计时器
            clearInterval(timerInterval);

            // 保存到本地变量供后续使用
            window.currentRecording = videoBlob;
        };

        // 处理录制开始事件
        mediaRecorder.onstart = () => {
            recordedChunks = [];

            // 更新状态
            statusText.textContent = '录制中...';
            statusDot.classList.add('recording');

            // 开始计时
            recordingStartTime = new Date();
            updateTimer();
            timerInterval = setInterval(updateTimer, 1000);

            // 更新按钮状态
            startBtn.disabled = true;
            stopBtn.disabled = false;
            saveBtn.disabled = true;
        };
    }
    ```

## 工程目录
```
app
├──preload             // 预加载模块
│  └──preload.js       // 主窗口的预加载模块
├──renderer            // 渲染进程模块
│  ├──index.html       // 主窗口加载的页面
│  └──renderer.js      // 渲染进程
├──main.js             // 主进程
├──electron_white.png  // 应用图标
└──package.json        // 配置程序入口
```

## 参考文档

[desktopCapturer](https://www.electronjs.org/docs/latest/api/desktop-capturer)

[MediaRecorder](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder)

[navigator](https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator)