Maui Blazor 使用摄像头实现代码

 更新时间:2023年01月12日 10:20:53   作者:dotnet-simple  
由于Maui Blazor中界面是由WebView渲染,所以再使用Android的摄像头时无法去获取,因为原生的摄像头需要绑定界面组件,这篇文章主要介绍了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

到此这篇关于Maui Blazor 使用摄像头实现的文章就介绍到这了,更多相关Maui Blazor 摄像头内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

相关文章

  • Visual Studio中文注释乱码两种解决方案

    Visual Studio中文注释乱码两种解决方案

    这篇文章主要给大家介绍了关于Visual Studio中文注释乱码两种解决方案,如果在Visual Studio Code中注释出现乱码,可能是因为文件编码格式不正确,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • Typora 0.11.18免费版本安装使用教程(亲测可用)

    Typora 0.11.18免费版本安装使用教程(亲测可用)

    Typora是一款非常使用的笔记工具,对于程序员非常友好,在2021年11月23日,Typora 正式发布 1.0 版本,进入了付费时代,Typora免费版本0.11.18(最后的免费版),本文给大家分享Typora免费获取方法及安装使用教程,感兴趣的朋友参考下吧
    2022-07-07
  • ceph集群RadosGW对象存储使用详解

    ceph集群RadosGW对象存储使用详解

    这篇文章主要为大家介绍了ceph集群RadosGW对象存储使用详解,有需要的,朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-04-04
  • 看完工资立马翻3倍!(非程序员勿看)

    看完工资立马翻3倍!(非程序员勿看)

    负责粘贴你也可以做到!
    2019-02-02
  • nGrinder性能工具源码安装部署过程

    nGrinder性能工具源码安装部署过程

    nGrinder是NHN公司用Java语言开发的一款的基于Grinder开发的开源B/S Web性能测试平台,具有友好简洁的用户界面和分布式测试功能,本文给大家分享nGrinder性能工具源码安装部署过程,一起看看吧
    2021-05-05
  • 如何使用postman(新手入门)

    如何使用postman(新手入门)

    Postman是google开发的一款功能强大的网页调试与发送网页HTTP请求,本文主要介绍了如何使用postman,具有一定的参考价值,感兴趣的可以了解一下
    2022-01-01
  • 科学知识:同步、异步、阻塞和非阻塞区别

    科学知识:同步、异步、阻塞和非阻塞区别

    这篇文章主要介绍了科学知识:同步、异步、阻塞和非阻塞区别,本文分别讲解了这些概念,需要的朋友可以参考下
    2015-05-05
  • gradle+shell实现自动系统签名

    gradle+shell实现自动系统签名

    这篇文章主要介绍了gradle+shell实现自动系统签名的相关资料,需要的朋友可以参考下
    2019-08-08
  • 十六进制、十进制、八进制、二进制常用进制转换

    十六进制、十进制、八进制、二进制常用进制转换

    进制就是进制位,常用的进制包括:二进制、八进制、十进制与十六进制,区别在于数运算时是逢几进一位。比如二进制是逢2进一位,十进制也就是我们常用的0-9是逢10进一位。这篇文章主要介绍了十六进制、十进制、八进制、二进制常用进制转换,需要的朋友可以参考下
    2022-12-12
  • Elasticsearch索引的分片分配Recovery使用讲解

    Elasticsearch索引的分片分配Recovery使用讲解

    这篇文章主要为大家介绍了Elasticsearch索引的分片分配Recovery使用讲解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-04-04

最新评论