Maui Blazor 使用摄像头实现

由于Maui Blazor中界面是由WebView渲染,所以再使用Android的摄像头时无法去获取,因为原生的摄像头需要绑定界面组件

所以我找到了其他的实现方式,通过WebView使用js调用设备摄像头 支持多平台兼容目前测试了Android 和PC 由于没有ioc和mac无法测试 大概率是兼容可能需要动态申请权限

1. 添加js方法

我们再wwwroot中创建一个helper.js的文件并且添加以下俩个js函数

index.html中添加<script src="helper.js"></script>引入js


/**
* 设置元素的src
* @param {any} canvasId canvasId的dom id
* @param {any} videoId video的dom id
* @param {any} srcId img的dom id
* @param {any} widht 设置截图宽度
* @param {any} height 设置截图高度
*/
function setImgSrc(dest,videoId, srcId, widht, height) {
let video = document.getElementById(videoId);
let canvas = document.getElementById(canvasId);
console.log(video.clientHeight, video.clientWidth); canvas.getContext('2d').drawImage(video, 0, 0, widht, height); canvas.toBlob(function (blob) {
var src = document.getElementById(srcId);
src.setAttribute("height", height)
src.setAttribute("width", widht);
src.setAttribute("src", URL.createObjectURL(blob))
}, "image/jpeg", 0.95);
} /**
* 初始化摄像头
* @param {any} src
*/
function startVideo(src) {
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {
let video = document.getElementById(src);
if ("srcObject" in video) {
video.srcObject = stream;
} else {
video.src = window.URL.createObjectURL(stream);
}
video.onloadedmetadata = function (e) {
video.play();
};
//mirror image
video.style.webkitTransform = "scaleX(-1)";
video.style.transform = "scaleX(-1)";
});
}
}

然后各个平台的兼容

android:

Platforms/Android/AndroidManifest.xml文件内容

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application android:allowBackup="true" android:supportsRtl="true"></application>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<!--相机权限-->
<uses-permission android:name="android.permission.CAMERA" android:required="false"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!--相机功能-->
<uses-feature android:name="android.hardware.camera" />
<!--音频录制权限-->
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<!--位置权限-->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <!-- Needed only if your app targets Android 5.0 (API level 21) or higher. -->
<uses-feature android:name="android.hardware.location.gps" /> <queries>
<intent>
<action android:name="android.intent.action.VIEW" />
<data android:scheme="http"/>
</intent>
<intent>
<action android:name="android.intent.action.VIEW" />
<data android:scheme="https"/>
</intent>
</queries>
</manifest>

Platforms/Android/MainActivity.cs文件内容

[Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
public class MainActivity : MauiAppCompatActivity
{
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
Platform.Init(this, savedInstanceState);
// 申请所需权限 也可以再使用的时候去申请
ActivityCompat.RequestPermissions(this, new[] { Manifest.Permission.Camera, Manifest.Permission.RecordAudio, Manifest.Permission.ModifyAudioSettings }, 0);
}
}

MauiWebChromeClient.cs文件内容

#if ANDROID
using Android.Webkit;
using Microsoft.AspNetCore.Components.WebView.Maui; namespace MainSample; public class MauiWebChromeClient : WebChromeClient
{
public override void OnPermissionRequest(PermissionRequest request)
{
request.Grant(request.GetResources());
}
} public class MauiBlazorWebViewHandler : BlazorWebViewHandler
{
protected override void ConnectHandler(Android.Webkit.WebView platformView)
{
platformView.SetWebChromeClient(new MauiWebChromeClient());
base.ConnectHandler(platformView);
}
} #endif

MauiProgram.cs中添加以下代码;如果没有下面代码会出现没有摄像头权限

具体在这个 issue体现


#if ANDROID
builder.ConfigureMauiHandlers(handlers =>
{
handlers.AddHandler<IBlazorWebView, MauiBlazorWebViewHandler>();
});
#endif

以上是android的适配代码 pc不需要设置额外代码 ios和mac不清楚

然后编写界面

@page "/" @*界面路由*@

@inject IJSRuntime JSRuntime @*注入jsRuntime*@

@if(OpenCameraStatus) @*在摄像头没有被打开的情况不显示video*@
{
<video id="@VideoId" width="@widht" height="@height" />
<canvas class="d-none" id="@CanvasId" width="@widht" height="@height" />
}
<button @onclick="" style="margin:8px">打开摄像头</button>
@*因为摄像头必须是用户手动触发如果界面是滑动进入无法直接调用方法打开摄像头所以添加按钮触发*@
<button style="margin:8px">截图</button> @*对视频流截取一张图*@ <img id="@ImgId" /> @code{
private string CanvasId;
private string ImgId;
private string VideoId;
private bool OpenCameraStatus;
private int widht = 320;
private int height = 500; private async Task OpenCamera()
{
if (!OpenCameraStatus)
{
// 由于打开摄像头的条件必须是用户手动触发如果滑动切换到界面是无法触发的
await JSRuntime.InvokeVoidAsync("startVideo", "videoFeed");
OpenCameraStatus = true;
StateHasChanged();
}
} protected override async Task OnInitializedAsync()
{
// 初始化id
ImgId = Guid.NewGuid().ToString("N");
CanvasId = Guid.NewGuid().ToString("N");
VideoId = Guid.NewGuid().ToString("N");
await base.OnInitializedAsync();
} private async Task Screenshot()
{
await JSRuntime.InvokeAsync<String>("setImgSrc", CanvasId,VideoId, ImgId, widht, height);
}
}

然后可以运行程序就可以看到我们的效果了

示例代码:gitee github

来着token的分享

技术交流群:737776595

Maui Blazor 使用摄像头实现的更多相关文章

  1. MAUI Blazor 权限经验分享 (定位,使用相机)

    入门文章 Blazor Hybrid / MAUI 简介和实战 https://www.cnblogs.com/densen2014/p/16240966.html 在 Mac 上开发 .NET MA ...

  2. 发布 .NET MAUI / MAUI Blazor 应用 (1) - Windows

    发布用于Windows的 .NET MAUI 应用 打开 PowerShell 终端 , 命令行进入工程目录,以我的例子工程为例, cd BlazorMaui BlazorMaui 替换为你自己工程名 ...

  3. 发布 .NET 7 MAUI / MAUI Blazor 应用到 Windows 应用商店

    .NET MAUI 目前仅允许发布 MSIX 包. 创建签名证书发布到本地传送门 [https://www.cnblogs.com/densen2014/p/16567384.html] 使用 Vis ...

  4. 在MAUI中使用Masa Blazor

    Masa Blazor是什么 在此之前我们已经介绍过什么是Masa Blazor,以及如何使用Masa Balzor,如果还有不了解Masa Blazor的同学可以看我上篇文章[初识Masa Blaz ...

  5. Blazor Hybrid / MAUI 简介和实战

    1. Blazor Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建信息丰富的交互式 UI. 共享使用 .NET 编写的服务 ...

  6. MAUI与Blazor共享一套UI,媲美Flutter,实现Windows、macOS、Android、iOS、Web通用UI

    1. 前言 距离上次发<MAUI初体验:爽>一文已经过去2个月了,本计划是下半年或者明年再研究MAUI的,现在计划提前啦,因为我觉得MAUI Blazor挺有意思的:在Android.iO ...

  7. [MAUI] 在.NET MAUI中结合Vue实现混合开发

    ​ 在MAUI微软的官方方案是使用Blazor开发,但是当前市场大多数的Web项目使用Vue,React等技术构建,如果我们没法绕过已经积累的技术,用Blazor重写整个项目并不现实. Vue是当前流 ...

  8. Blazor组件自做七 : 使用JS隔离制作定位/持续定位组件

    1. 运行截图 演示地址 2. 在文件夹wwwroot/lib,添加geolocation子文件夹,添加geolocation.js文件 本组件主要是调用浏览器两个API实现基于浏览器的定位功能,现代 ...

  9. .NET MAUI 正式版GA发布

    .NET MAUI – 一个代码库,多个平台 欢迎使用 .NET 多平台应用 UI.此版本标志着我们统一 .NET 平台的多年旅程中的新里程碑.现在,您和超过 500 万其他 .NET 开发人员拥有了 ...

  10. 跨平台客户端Blazor方案尝试

    一.方案选择 Electron/MAUI + Blazor(AntDesgin blazor) BlazorApp:Blazor Razor页面层,抽象独立层,被BlazorAppElectron/B ...

随机推荐

  1. 搭建MyBatis

    一.引入依赖 <dependencies> <!-- Mybatis核心 --> <dependency> <groupId>org.mybatis&l ...

  2. mybatis-plugin插件执行原理

    mybatis-plugin插件执行原理 今天主要是在看mybatis的主流程源码,其中比较感兴趣的是mybatis的plugin功能,这里主要记录下mybatis-plugin的插件功能原理. pl ...

  3. uoj348【WC2018】州区划分

    题目链接 直接讲吨吨吨给的标准做法吧.记\(f(i,j)\)表示各个州(可以重叠)的城市数量之和为i,这些州的并集为j的方案数,反正若有两个州之间有交集最后的\(|j|\)会不等于\(i\).有 \( ...

  4. ZJOI2007报表统计

    题目链接 比较简单的一道平衡树题. 第三个操作可以直接用map完成(加进去一个数只会让答案变小,于是与它的前面后面一个数做差更新答案即可),只考虑前两个操作. ·维护区间内的最大最小值,以及区间相邻两 ...

  5. 【Serverless】云函数微信小程序

    简介 什么是AppGallery Connect云函数 云函数是一项Serverless计算服务,提供FaaS(Function as a Service)能力,可以帮助开发者大幅简化应用开发与运维相 ...

  6. 聊聊kafka

    两个月因为忙于工作毫无输出了,最近想给团队小伙伴分享下kafka的相关知识,于是就想着利用博客来做个提前的准备工作了:接下来会对kafka做一个简单的介绍,包括利用akf原则来解析单机下kafk的各个 ...

  7. Ubuntu 20.04 开启root权限登陆、网卡配置

    个人名片: 对人间的热爱与歌颂,可抵岁月冗长 Github‍:念舒_C.ying CSDN主页️:念舒_C.ying 个人博客 :念舒_C.ying Ubuntu 20.04 开启root权限登陆.网 ...

  8. i春秋Backdoor

    点开是道没有任何窗口的题,右键查看源码也没上面东西,抓包试试,也没找到什么提示性的信息,根据提示去看看敏感文件泄露是什么吧 这里找到了篇敏感文件泄露的介绍及利用方法:https://www.cnblo ...

  9. 1、ArrayList源码解析

    目录 1 概述 2 底层数据结构 3 构造函数 4 自动扩容 5 set() get() remove() 6 Fail-Fast机制 1 概述 ArrayList实现了List接口,是 顺序容器,允 ...

  10. 安装BurpSuite (专业版)

    BurpSuite简介: Burp Suite 是用于攻击web 应用程序的集成平台.它包含了许多工具,并为这些工具设计了许多接口,以促进加快攻击应用程序的过程.所有的工具都共享一个能处理并显示HTT ...