那些年，我们在Processing 摄像头上栽过的坑

2023-12-06 02:53| 来源: 网络整理| 查看: 265

不得不说，Processing 的摄像头用起来真的体验不太好，经常出现这样那样的问题，导致摄像头画面不能正常显示。

这原因呢，真不好说，从目前读者朋友们遇到的一些问题来看，大概有以下常见的情形：

摄像头没有连接或未启用

摄像头权限问题

摄像头驱动程序问题

分辨率和帧率：某些摄像头可能无法以所需的分辨率或帧率运行，这可能会导致应用程序无法正常使用摄像头

应用程序代码问题：多是 Processing 代码问题

Processing摄像头权限问题

权限的问题之前也遇到过，如果读者使用的是 Mac 电脑，可以尝试下面两种方案：

太极与流体Taichi & PixelFlow 文章末尾提到的方法

Mac电脑上打开 Processing，摄像头或者麦克风有可能会出现授权问题，输入没有任何的效果。

打开终端，输入

/Applications/Processing.app/Contents/MacOS/Processing

启动 Processing，打开程序代码，此时注意，会弹出麦克风许可的弹窗，选择允许，就可以使用麦克风的声音输入了。

在 Terminal 中输入命令：

xattr -r -d com.apple.quarantine /Applications/Processing.app

这个命令一般是用来解除苹果系统的文件隔离限制的。在 Mac 系统中，为了安全考虑，从外部获取的文件会被标记为“被隔离”，限制其执行一些操作。sudo xattr -r -d com.apple.quarantine 这个命令的作用是移除文件中的 com.apple.quarantine 这个扩展属性，从而解除其隔离限制。

Processing寻找目标摄像头问题关键字寻找目标摄像头

我们可以先打印下摄像头列表

String[] cameras = Capture.list(); for (int i = 0; i { devices.forEach((device) => { console.log(device); // 判断设备名称是否包含"FaceTime" if (device.kind == 'videoinput' && device.label.indexOf(kTargetCameraKeyName) > -1) { facetimeCameraId = device.deviceId; console.log(`找到摄像头: ${device.label}!`) } }); startCamera(facetimeCameraId); }) .catch((err) => { console.error(`${err.name}: ${err.message}`); startCamera(facetimeCameraId); }); } } // 启动摄像头 function startCamera(deviceId) { if (deviceId == null) { capture = createCapture(VIDEO, function () { console.log("摄像头启动成功"); }); } else { let constraints = { video: { deviceId: deviceId, width: { ideal: width }, height: { ideal: height } }, audio: false // 是否需要支持音频输入，我这里不需要，设置为了 false }; capture = createCapture(constraints, function () { console.log("摄像头启动成功"); }); } // 隐藏视频流使用image()方法显示 capture.hide(); } function draw() { clear(); flipCamera(); } // 水平镜像摄像头 function flipCamera() { if (capture) { push(); imageMode(CENTER); scale(-1, 1); // 显示摄像头画面 image(capture, 0, 0); pop(); } }

这里需要注意的是，P5JS 官方文档 reference | createCapture() (p5js.org)[3] 中的参数介绍中提到第一个参数可以传入一个 Constraints Object，也就是摄像头的一些参数配置。

这些参数配置有哪些呢？见 Media Capture and Streams (w3c.github.io)[4]，我估计很多朋友都没点进去看过😂。

我们把匹配到摄像头关键字的 deviceId 配置到 constraints 的 video 中去

经过上面的处理，在 P5JS 下，就可以正常使用指定的摄像头了，解决了一些虚拟摄像头带来的导致默认摄像头不正常显示的问题。

QQ 频道

想来的进来玩玩，还没啥人，主要看中了分主题讨论频道的优势。

参考资料[1]

processing 调用摄像头显示 - Processing中文社区: https://www.processing.love/d/45-processing/6

[2]

近期processing 摄像头交互遇到的问题 - Processing中文社区: https://www.processing.love/d/97-processing/4

[3]

reference | createCapture() (p5js.org): https://p5js.org/reference/#/p5/createCapture

[4]

Media Capture and Streams (w3c.github.io): https://w3c.github.io/mediacapture-main/getusermedia.html#media-track-constraints

[5]

Capture / Libraries / Processing.org: https://processing.org/reference/libraries/video/Capture.html

[6]

reference | createCapture() (p5js.org): https://p5js.org/reference/#/p5/createCapture

[7]

MediaDevices.enumerateDevices() - Web API 接口参考 | MDN (mozilla.org): https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/enumerateDevices

本文使用文章同步助手同步

【本文地址】

公司简介

联系我们