⚠️ 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 特定命名在提取时被参数化( 模块名称、 抓取)
文件夹);逻辑是逐字记录.
这个 从工作生产应用程序取出; 独立建筑 有待审定. 我们并不声称这笔押金是按原样汇编的.
安装( 一旦发布)
yarn add @facilitronworks/react-native-windows-camera
自动链接拾取 windows/ReactNativeWindowsCamera.vcxproj 通过
react-native.config.js添加 webcam 设备能力 你的应用程序
Package.appxmanifest数字 :
<Capabilities>
<DeviceCapability Name="webcam" />
</Capabilities>
消费模式
A. 直接进口(所有平台的工作):
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数字 :
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正是制作应用在今天是如何消耗这个代码的
使用量
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) , 它透明地倒回 无头模块抓取.
路线图
- 独立的建筑验证 联 合 国
windows/ReactNativeWindowsCamera.sln(代码汇编在生产应用项目内部; cpp-lib 包装) 这里没有证据). - 现场浏览器 - 剩下的真正难的一块。 WinUI 3 拥有
没有 端口 UWP 软件
CaptureElement,因此没有滴入的 XAML 预览 控制系统。 这项计划的每一种成分都已经在其他地方得到证明 我们的堆:- 驱动 a
MediaFrameReader关闭组件的直播MediaCapture· ; - blit 框为 a
Microsoft.UI.Composition表面; - 将视觉包成一个
Microsoft.UI.Content.ContentIsland并把它交给 RNWs (英语)ContentIslandComponentView.Connect()—— 说 确切的岛屿东道主 制作我们的WebView2组件船 (见 便利工作/反应-本土-网页-窗口 和可重复使用的原始内容 辅助工作/nw-native-core) (中文(简体) ). RNWs (英语)ContentIslandComponentView然后进行大小、定位、滚动 免费跟踪、剪接、DPI和焦点.
- 驱动 a
- 线
scaffold/CameraViewComponentView.*输入 vcxproj + 提供者,翻转NativeCameraView打开src/Camera.windows.tsx。 。 。 . - 硬件支持的闪光/托克;
getAvailablePictureSizesAsync。 。 。 . - 视频录音(MediaCapture支持;需要API设计+测试).
与上游的关系
- 前镜头这个包裹刻意地反映了公众JS API
可以通过地铁的化名作为滴入Windows的实现. 如果博览会永远
视窗支持前模组核心,我们很乐意在上游作为
页:1
expo-cameraWindows平台实施. - 反应-内生-视觉-相机: 不同的API 家族; 如果上游需要的话 a Windows后端,这里的原生地层(MediaCapture init/capture/teardown, 设备选择,同意检测)是转让的部分.
构建验证
倾出. 存在什么和已经证明什么:
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从未被编译过——它是 设计,审查的代码,不是建造的文物。 它被排除在 目的项目.
许可证
麻省理工学院.