使用 Blazor 访问设备摄像头

Posted 2023-03-27

【中文标题】使用 Blazor 访问设备摄像头

【英文标题】：Access Device Camera with Blazor

【发布时间】：2020-11-26 05:10:13

【问题描述】：

我有一个 Blazor Web Assembly PWA，如何打开设备本机摄像头？

我正在尝试编写一个 PWA 来捕获和保存图片。

编辑

希望将捕获的图像以 jpeg 格式保存到 Azure Blob 存储。

【参考方案1】：

您可以通过 html 输入来实现这一点。只需添加属性capture即可立即打开设备摄像头。

<input type="file" accept="image/*" capture>

您可以在这里查看完整的源代码：

https://github.com/mehmettahameral/Blazor-wasm-pwa-camera

并在此处进行现场演示： https://infallible-bohr-56743b.netlify.app/

--

关于保存图像：这取决于您要真正将其保存在哪里。如果您能告诉我更多信息，我可能会更新解决方案。

希望对你有帮助?

【讨论】：

我需要设置什么吗？它不适用于我的 chrome。

@sddk 你需要使用你的移动设备。

@AnthonyRyan 感谢您的编辑。您无法单独实现此 Blazor WASM，因此您需要创建 API 以从 Blazor WASM 调用。例如，您可以创建 Azure Functions，并将其保存到 Blob 存储中。

@MehmetTahaMeral 我正在使用 并且使用相机时不会触发 OnChange 事件。任何想法？编辑：其实我不知道它是否被触发，但图像没有像我从图库中选择时那样上传。

@Mike 是的，有。如果你删除capture属性，它会提示用户拍照或从图库中选择！这两个例子都在我的 GitHub 上！ :)

【参考方案2】：

您可以按照本教程：https://wellsb.com/csharp/aspnet/blazor-webcam-capture 来捕获相机设备、流式传输内容、处理图像。

然后，您可以使用Azure Blob Storage client library v12 for .NET 将您的图片上传到您的存储帐户。

您可以在此处找到快速入门：https://docs.microsoft.com/en-us/azure/storage/blobs/storage-quickstart-blobs-dotnet