Maui Blazor使用摄像头实现介绍_F11 - 专业站长和开发者的学习网站

分享到

Maui Blazor使用摄像头实现介绍

相关技巧 来源：互联网作者：佚名发布时间：2024-02-14 13:03:19 人浏览

摘要

由于Maui Blazor中界面是由WebView渲染，所以再使用Android的摄像头时无法去获取，因为原生的摄像头需要绑定界面组件所以我找到了其他的实现方式，通过WebView使用js调用设备摄像头支持多平台

由于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"?>

<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" />

<uses-feature android:name="android.hardware.location.gps" />

</intent>

</intent>

</queries>

</manifest>

Platforms/Android/MainActivity.cs文件内容

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*@

{

}

<button @onclick="" style="margin:8px">打开摄像头</button>

@*因为摄像头必须是用户手动触发如果界面是滑动进入无法直接调用方法打开摄像头所以添加按钮触发*@

<button style="margin:8px">截图</button> @*对视频流截取一张图*@

@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);

}

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

您可能感兴趣的文章 :

原文链接 :

Tag : 摄像头(14)

不同系统打开JSON文件的6种方法介绍

JSON（JavaScript Object Notation）是从JavaScript派生的一个独立于语言的文件。JSON文件是纯文本文件，而不是二进制代码。这种文件格式是可读的，
Maui Blazor使用摄像头实现介绍

由于Maui Blazor中界面是由WebView渲染，所以再使用Android的摄像头时无法去获取，因为原生的摄像头需要绑定界面组件所以我找到了其他的实现
Archlinux Timeshift系统备份与还原的操作方法

以后都不怕archlinux滚挂或误删系统文件，timeshift系统备份与还原安装 timeshif 1 yay -s timeshif 备份设置选择快照类型此处选择【RSYNC】选择储
百度静态JS资源公共库（CDN）全收集

前端的很多静态资源，比如JS，CSS怎么办呢？这时，我们需要一个公共且高速的静态资源托管平台。这里就推荐百度静态资源公共库，百度
session、cookie、token的区别介绍

今天就来理一理session、cookie、token这三者之间的关系！ 1.为什么会有它们？我们都知道 HTTP 协议是无状态的，所谓的无状态就是客户端每次
开发中避免延时操作技巧介绍

开发中我们或多或少会涉及到一些场景需要使用延时操作，而延时操作其实并不是一个很好的选择，并不是一个很好的方案，因为它不可控
git-github 子模块仓库更新(git submodule)及git中submo

一、git submodule背景项目中经常使用别人维护的模块，在git中使用子模块的功能能够大大提高开发效率。使用子模块后，不必负责子模块的
Typora配置PicGo时提示Failed to fetch的问题解决(typo

两者配置的端口不一致造成的打开Typora，选择文件-偏好设置-图像-验证图片上传选项，点击验证图片上传选项会提示错误：Failed to fetch，此
火车头采集正文多图片如何采集下载（只下载一

文章采集是站长常常会遇到的事，很多人使用火车头采集器软件，采集正文中有多个图片的时候如果设置错误，会遇到只下载一张图片、采
前端静态资源总结：百度静态JS资源公共库

前端的很多静态资源，比如JS，CSS怎么办呢？这时，我们需要一个公共且高速的静态资源托管平台。这里就推荐百度静态资源公共库，百度