# @facilitronworks/react-native-windows-camera 中文文档

规范地址：https://npmcn.com/package/%40facilitronworks/react-native-windows-camera/

版本：0\.1\.0-alpha\.0
npm 元数据更新时间：2026-07-18T14:22:10.216Z
中文译文更新时间：2026-11-14T08:15:27.623Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40facilitronworks/react-native-windows-camera
原文对照：https://npmcn.com/package/%40facilitronworks/react-native-windows-camera/?lang=original
项目主页：https://github.com/FacilitronWorks/react-native-windows-camera#readme
源码仓库：https://github.com/FacilitronWorks/react-native-windows-camera

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：86.4 kB，24 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \*，react-native \*，react-native-windows \>=0\.79\.0，expo-camera \*
- 首次发布：2026-07-18T14:22:09.623Z
- 最新版本发布：2026-07-18T14:22:10.017Z
- 近 30 天下载量：4248（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 1 个）

## 中文简介

用于反应-内置-窗口-新架构的相机. Real MediaCapture 相片抓取今天(出品-被证明);活取景器 Fabric 组件View 脚手架下. 老社区相机于2023年去世,没有任何接班人支持过Windows.

## 安装

```sh
npm install @facilitronworks/react-native-windows-camera
```

也可以使用：`pnpm add @facilitronworks/react-native-windows-camera`、`yarn add @facilitronworks/react-native-windows-camera`、`bun add @facilitronworks/react-native-windows-camera`

## README

> ⚠️ **WIP——预发.** 内部的捕捉模块是出品-被验证(今天在出品博览会+反应-内置-窗口0.83新作-architecture App中发货),但这种独立的包件构建还没有被编译-验证,活取景器是脚手架,不是特色. 在第一次发布前不要消耗.

# @facilitronworks/ react-native-windows-相机

一个相机 **反应- 内生- 窗口新架构** (造型/组合).

**今天真实 :** 一发相机 **图片捕获** 通过 `Windows.Media.Capture.MediaCapture` —— JPEG 文件+像素尺寸+基数64, 前部/后部设备选择, 权限检测—— 后面 **与相机兼容的联署材料表面** (单位:千美元)`CameraView`, (中文(简体) ), `useCameraPermissions`, (中文(简体) ), `Camera`, (中文(简体) ), `PermissionStatus`, (中文(简体) ), `FlashMode`) (中文(简体) ).

**下一个里程碑(包括脚手架):** 一个现场观看者 Fabric `ComponentView`,在 RN 成分树上以相同的 XamlIsland/ContentIsland 配方 我们的WebView组件已经进入 生产.

## 此软件包为何存在

Windows上没有用于反射原生的相机 。 完全没有.

-   `react-native-camera` ——曾有Windows的社区相机 ——已贬值并存档(至2023年已死亡).
-   其指定的继任者 `react-native-vision-camera` 支持iOS,Android, 支持iOS, Android, 支持iOS, Android 支持iOS, Android 支持iOS, Android 支持iOS, Android 支持iOS, Android 支持iOS, Android 支持iOS, Android, 和(实验) macOS. **没有Windows支持,也没有计划.**
-   `expo-camera` 拥有iOS,Android,和web DOM的本土执行. **没有反应窗口** - 在RNW坠机时进口 (单位:千美元)`requireNativeModule('ExpoCamera…')`) (中文(简体) ).

每一个需要照片的RNW应用自始至终都靠自己. 这个软件包是 提取我们用来解决 航运产品的问题.

## 现状矩阵——真实与待定

| 表面 | 状态 | 页:1 |
| --- | --- | --- |
| `takePictureAsync()` (无头捕取) | ✅ **实际生产** | `RNWCameraCapture` 模块: MediaCapture 1-shot JPEG into app LocalFolder; 返回 expo `CameraCapturedPicture` 形状( e)`{ uri, width, height, base64?, exif: null }`(中文(简体) ) |
| `base64` 选项 | 实值 | `CryptographicBuffer.EncodeToBase64String` 超过 JPEG 字节 |
| 宽度/ 高度回读 | 实值 | `BitmapDecoder` 超过抓获的文件(尽最大努力) |
| `facing: 'front' | 'back'` | 实值 | 附文- panel 设备选择; 桌面 web相机通常不报告面板 ~ 第一位列出的设备 |
| 权限( E)`useCameraPermissions`,请求/获取) | 实值 | 请求=实数 `MediaCapture.InitializeAsync` 探测器( 这是软件包上的 OS 同意门); 获取 = 同步缓存状态 |
| `<CameraView/>` 骑车、儿童表演、通过裁判抓取作品 | 实值 | 今天制作一个标签占位符框( 无活预览) |
| **现场浏览器** | 🚧 **仅脚手架** (单位:千美元)`windows/…/scaffold/`,不包括在建筑中) | 道具/命令/事件/下行管道完成;可见的预览表面是剩余的工作(见路线图) |
| 录像`recordAsync`(中文(简体) ) | 未执行 | 决定 `{ uri: '' }`(仅限照片) |
| 条码扫描 | 未执行 | `scanFromURLAsync` 决定 `[]` |
| 闪光/ 火炬 | \* 追踪到,没有操作 | 硬件闪存在网络相机上很罕见 |
| 缩放、焦点、图片大小 | 未执行 |  |
| 独立构建此 repo | ⏳ **待决** | ưμ㼯A |

## 制作故事

抓取路径不是演示 。 是从 **用于 窗口** (反应-内生-窗口0.83.2 新建筑,WinAppSDK 1.8,ARM64, 应用版2.3.728, July 2026), 在那里它驱动应用的批量相片捕捉 流动及其 `launchCameraAsync` 路径 – 真实用户与该路径拍摄真实相片 机器的网络摄像头,通过与iOS/Android相同的JS管道上传. App 特定命名在提取时被参数化( 模块名称、 抓取) 文件夹);逻辑是逐字记录.

这个 _从工作生产应用程序取出; 独立建筑 有待审定._ 我们并不声称这笔押金是按原样汇编的.

## 安装( 一旦发布)

```sh
yarn add @facilitronworks/react-native-windows-camera
```

自动链接拾取 `windows/ReactNativeWindowsCamera.vcxproj` 通过 `react-native.config.js`添加 **`webcam` 设备能力** 你的应用程序 `Package.appxmanifest`数字 :

```xml
<Capabilities>
  <DeviceCapability Name="webcam" />
</Capabilities>
```

### 消费模式

**A. 直接进口(所有平台的工作):**

```tsx
import { CameraView, useCameraPermissions } from '@facilitronworks/react-native-windows-camera'
// Windows -> this package's native capture (+ placeholder preview).
// iOS/Android -> transparently re-exports expo-camera.
```

**B. 地铁别名(零呼叫站点变化):** 继续导入 `expo-camera` 在Windows上随处可见和别名 `metro.config.js`数字 :

```js
resolver: {
  resolveRequest: (context, moduleName, platform) => {
    if (platform === 'windows' && moduleName === 'expo-camera') {
      return context.resolveRequest(
        context,
        '@facilitronworks/react-native-windows-camera',
        platform,
      )
    }
    return context.resolveRequest(context, moduleName, platform)
  },
}
```

(Pattern B正是制作应用在今天是如何消耗这个代码的

### 使用量

```tsx
const ref = useRef<CameraViewRef>(null)
const [permission, requestPermission] = useCameraPermissions()

<CameraView ref={ref} facing="back" style={{ flex: 1 }} />

const photo = await ref.current?.takePictureAsync({ base64: true })
// -> { uri: 'file:///…/RNWCameraCaptures/….jpg', width, height, base64 }
```

说明: `takePictureAsync` 尽管预览是占位符,但效果仍然很好 抓取为无头 (`MediaCapture` 一发). 您的用户看到一个黑匣子 标签为“ 在 Windows 上无法使用的 Camera 预览 ” , 查看器将位于其中 .

## 建筑

```
<CameraView/> (JS, src/Camera.windows.tsx — expo-camera-compatible surface)
  ├─ TODAY:  labeled placeholder View
  │          ref.takePictureAsync() ──▶ NativeModules.RNWCameraCapture
  │                                       └─ CameraCaptureModule (C++/WinRT)
  │                                            MediaCapture → JPEG → LocalFolder
  └─ NEXT:   Fabric component "RNWCameraView" (scaffold/CameraViewComponentView)
               ├─ per-instance MediaCapture (live session)
               ├─ "takePicture" command / topPictureTaken event (requestId-correlated)
               ├─ Tag-keyed instance registry + Destroying-hooked teardown
               │  (releases the webcam, nulls the EventEmitter — no stale
               │   dispatch into a dead JS view; this fix is already in the code)
               └─ TODO: MediaFrameReader → Composition surface → ContentIsland
                        ──Connect()──▶ RNW ContentIslandComponentView
```

JS表面总是解决一张照片:如果原景区的命令/活动 绕行失败或出局( 8 s) , 它透明地倒回 无头模块抓取.

## 路线图

1.  **独立的建筑验证** 联 合 国 `windows/ReactNativeWindowsCamera.sln` (代码汇编在生产应用项目内部; cpp-lib 包装) 这里没有证据).
2.  **现场浏览器** - 剩下的真正难的一块。 WinUI 3 拥有 **没有** 端口 UWP 软件 `CaptureElement`,因此没有滴入的 XAML 预览 控制系统。 这项计划的每一种成分都已经在其他地方得到证明 我们的堆:
    -   驱动 a `MediaFrameReader` 关闭组件的直播 `MediaCapture`· ;
    -   blit 框为 a `Microsoft.UI.Composition` 表面;
    -   将视觉包成一个 `Microsoft.UI.Content.ContentIsland` 并把它交给 RNWs (英语) `ContentIslandComponentView.Connect()` —— 说 **确切的岛屿东道主 制作我们的WebView2组件船** (见 [便利工作/反应-本土-网页-窗口](https://github.com/FacilitronWorks/react-native-webview-windows) 和可重复使用的原始内容 [辅助工作/nw-native-core](https://github.com/FacilitronWorks/rnw-native-core)) (中文(简体) ). RNWs (英语) `ContentIslandComponentView` 然后进行大小、定位、滚动 免费跟踪、剪接、DPI和焦点.
3.  线 `scaffold/CameraViewComponentView.*` 输入 vcxproj + 提供者,翻转 `NativeCameraView` 打开 `src/Camera.windows.tsx`。 。 。 .
4.  硬件支持的闪光/托克; `getAvailablePictureSizesAsync`。 。 。 .
5.  视频录音(MediaCapture支持;需要API设计+测试).

## 与上游的关系

-   **前镜头**这个包裹刻意地反映了公众JS API 可以通过地铁的化名作为滴入Windows的实现. 如果博览会永远 视窗支持前模组核心,我们很乐意在上游作为 页:1 `expo-camera` Windows平台实施.
-   **反应-内生-视觉-相机**: 不同的API 家族; 如果上游需要的话 a Windows后端,这里的原生地层(MediaCapture init/capture/teardown, 设备选择,同意检测)是转让的部分.

## 构建验证

**倾出.** 存在什么和已经证明什么:

-   [x] `CameraCaptureModule.{h,cpp}` 编译和运行 **在生产应用程序内 项目** (RNW 0.83.2, WinAppSDK 1.8, ARM64, 新存档)——真实相片 2026年7月起被俘并上传,航运.
-   [ ] 这个独立的 `windows/ReactNativeWindowsCamera.sln` 已经 **没有 已经建成了** (RNW cpp-lib 模板形状;与 我们的 webview 软件包: 投影流量 `UseExperimentalNuget`, (中文(简体) ), 属性表包括路径, `RNW_NEW_ARCH` 定义流).
-   [ ] 在一款新鲜的RNW 0.83app中自动链接端到端.
-   [ ] x64和x86建筑(生产证据为ARM64).
-   [ ] 这个 `scaffold/` 构成部分View从未被编译过——它是 设计,审查的代码,不是建造的文物。 它被排除在 目的项目.

## 许可证

麻省理工学院.

## 常见问题

### @facilitronworks/react-native-windows-camera 是什么？

用于反应-内置-窗口-新架构的相机\. Real MediaCapture 相片抓取今天\(出品-被证明\);活取景器 Fabric 组件View 脚手架下\. 老社区相机于2023年去世,没有任何接班人支持过Windows\.

### 如何安装 @facilitronworks/react-native-windows-camera？

在项目目录运行 npm install @facilitronworks/react-native-windows-camera，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、react-native（\*）、react-native-windows（\>=0\.79\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @facilitronworks/react-native-windows-camera 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @facilitronworks/react-native-windows-camera 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @facilitronworks/react-native-windows-camera 可以商用吗？

@facilitronworks/react-native-windows-camera 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @facilitronworks/react-native-windows-camera 的下载量有多少？

根据 npm 官方下载统计，@facilitronworks/react-native-windows-camera 在 2026/10/14 – 2026/11/12 这 30 天内被下载 4,248 次，日均约 142 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @facilitronworks/react-native-windows-camera 还在维护吗？

最新版本 0\.1\.0-alpha\.0 发布于 2026/07/18（3 个月前）；至今共发布 1 个版本，其中过去 12 个月发布了 1 个；首次发布于 2026/07/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。