Programmiererforum

Code: Select all

let currentFacingMode = "environment"; // Default to rear camera

function startVideo(src) {
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(
{
video: {
facingMode: currentFacingMode
}
}).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)";
}).catch(function (error) {
console.error("Error accessing camera: ", error);
alert("Camera not accessible.  Please check permissions and ensure the device supports the requested facing mode.");
});;
}
}

function toggleCamera() {
debugger;
if (currentFacingMode === "user") {
debugger;
currentFacingMode = "environment";
} else {
debugger;
currentFacingMode = "user";
}
stopVideo("videoFeed");
startVideo("videoFeed");
}

function getFrame(src, dest, dotNetHelper) {
let video = document.getElementById(src);
let canvas = document.getElementById(dest);
canvas.getContext('2d').drawImage(video, 0, 0, 320, 240);

let dataUrl = canvas.toDataURL("image/jpeg");
dotNetHelper.invokeMethodAsync('ProcessImage', dataUrl);
}

function stopVideo(src) {
let video = document.getElementById(src);
if (video && "srcObject" in video) {
const stream = video.srcObject;
if (stream) {
const tracks = stream.getTracks();
tracks.forEach(track => {
track.stop();
track.enabled = false;
});
stream.getTracks().forEach(function (track) {
if (track.readyState == 'live' && track.kind === 'video') {
track.stop();
}
});
}
video.srcObject = null;
}
}

< /code>
Dies ist meine Komponente und mein Code hinter Blazor < /p>
@using ITMS_Ver_2.Client.Services
@using ITMS_Ver_2.Shared._Entities
@using SixLabors.Fonts
@using SixLabors.ImageSharp
@using SixLabors.ImageSharp.Drawing
@using SixLabors.ImageSharp.Drawing.Processing
@using SixLabors.ImageSharp.Processing;
@using SixLabors.ImageSharp.Formats.Jpeg
@using SixLabors.Fonts
@using System.Net.Http
@using System.IO



















Take Image

Switch


@if (ImageList != null && ImageList.Any())
{
foreach (var item in ImageList)
{

}
}

@code {

[Inject] private IJSRuntime? JsRuntime { get; set; }
[Inject] private HttpClient? Http { get; set; }
[Inject] private ICommonService? CommonService { get; set; }
[Parameter] public string? IncidentId { get; set; }
[Parameter] public List? ImageList { get; set; }

private string captionText;
private string frameUri;

FontCollection collection = new FontCollection();
FontFamily sansFamily;
Font captionFont;

protected override async Task OnInitializedAsync()
{
await StartCamera();
}

private async Task StartCamera()
{
await JsRuntime!.InvokeVoidAsync("startVideo", "videoFeed");

//Font stored in wwwroot. Fetch it as byte array, and use it
var fontBytes = await Http!.GetByteArrayAsync("OpenSans-Regular.ttf");
collection.Install(new MemoryStream(fontBytes));
collection.TryFind("Open Sans", out sansFamily);
captionFont = sansFamily.CreateFont(16, FontStyle.Regular);
}

private async Task ToggleCamera()
{
await JsRuntime!.InvokeVoidAsync("toggleCamera");
}

private async Task CaptureFrame()
{
await JsRuntime!.InvokeAsync("getFrame", "videoFeed", "currentFrame", DotNetObjectReference.Create(this));
}

[JSInvokable]
public void ProcessImage(string imageString)
{
byte[] imageData = Convert.FromBase64String(imageString.Split(',')[1]);

DrawingOptions alignCenter = new DrawingOptions()
{
TextOptions = new TextOptions()
{
VerticalAlignment = VerticalAlignment.Center,
WrapTextWidth = 304, //Image is 320px wide. This centers with 8px margin on left and right
HorizontalAlignment = SixLabors.Fonts.HorizontalAlignment.Center
}
};

using (var image = SixLabors.ImageSharp.Image.Load(imageData))
{
image.Mutate(x => x
.Flip(FlipMode.Horizontal) //To match mirrored webcam image
.Fill(SixLabors.ImageSharp.Color.ParseHex("0008"), new RectangularPolygon(0, 220, 320, 20)) //Setting footer bar for caption
.DrawText(alignCenter, captionText, captionFont, SixLabors.ImageSharp.Color.White, new PointF(8, 230)) //Centering in footer bar)
);
frameUri = image.ToBase64String(JpegFormat.Instance);
var incidentImage = new IncidentImage
{
IncidentId = IncidentId,
Description = captionText,
ImageString = frameUri,
TimeTaken = DateTime.Now,
FileName = DateTime.Now.ToString("yyyyMMddHHmmss")
};
if (ImageList == null)
{
ImageList = new();
ImageList.Add(incidentImage);
}
else
{
ImageList.Add(incidentImage);
}
captionText = String.Empty;
StartCamera();
}
}
}