使用 Blazor 访问设备摄像头答案

【问题标题】：Access Device Camera with Blazor使用 Blazor 访问设备摄像头
【发布时间】：2020-11-26 05:10:13
【问题描述】：

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

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

编辑

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

【问题讨论】：

【解决方案1】：

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

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

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

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

希望对你有帮助?

【讨论】：

我需要设置什么吗？它不适用于我的 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

【讨论】：