Skip to content

added styling for video element and fixed issue with safari image capture #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thedude61636 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

added styling for video element and fixed issue with safari image capture #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
be73b31
added styling for video element and fixed issue with safari image cap…
thedude61636 Feb 14, 2024
53eb4c6
bumped version number to 1.0.5
thedude61636 Feb 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions BlazorBarcodeScanner.ZXing.JS/BarcodeReader.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,10 @@
<div class="zxing-video-container">
@if (FullWidthVideo)
{
<video @ref="_video"></video>
<video style="@VideoElementStyle" @ref="_video"></video>
} else
{
<video @ref="_video" width="@VideoWidth" height="@VideoHeight"></video>
<video style="@VideoElementStyle" @ref="_video" width="@VideoWidth" height="@VideoHeight"></video>
}

</div>
Expand Down
10 changes: 9 additions & 1 deletion BlazorBarcodeScanner.ZXing.JS/BarcodeReader.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
using Microsoft.JSInterop;
using System;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

namespace BlazorBarcodeScanner.ZXing.JS
Expand Down Expand Up @@ -67,6 +68,13 @@ public partial class BarcodeReader : ComponentBase, IDisposable, IAsyncDisposabl

[Parameter]
public int? StreamWidth { get; set; } = null;

[Parameter]

#if NET8_0
[StringSyntax("css")]
#endif
public string VideoElementStyle { get; set; }

[Parameter]
public EventCallback<BarcodeReceivedEventArgs> OnBarcodeReceived { get; set; }
Expand Down Expand Up @@ -230,7 +238,7 @@ private async Task StartDecodingSafe()

public async Task<string> Capture()
{
return await _backend.Capture(_canvas);
return await _backend.Capture(_canvas,_video);
}

public async Task<string> CaptureLastDecodedPicture()
Expand Down
4 changes: 2 additions & 2 deletions BlazorBarcodeScanner.ZXing.JS/BarcodeReaderInterop.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,9 @@ public async Task ToggleTorch()
await jSRuntime.InvokeVoidAsync("BlazorBarcodeScanner.toggleTorch");
}

public async Task<string> Capture(ElementReference canvas)
public async Task<string> Capture(ElementReference canvas, ElementReference video)
Copy link
Owner

@sabitertan sabitertan Feb 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please split this into another PR, too many changes here, this may need a major version change.

{
await jSRuntime.InvokeVoidAsync("BlazorBarcodeScanner.capture", "image/jpeg", canvas);
await jSRuntime.InvokeVoidAsync("BlazorBarcodeScanner.capture", "image/jpeg", canvas,video);
return await PictureGet("capture");
}

Expand Down
2 changes: 1 addition & 1 deletion BlazorBarcodeScanner.ZXing.JS/BlazorBarcodeScanner.ZXing.JS.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<PropertyGroup>
<TargetFrameworks>net8.0;net7.0;net6.0</TargetFrameworks>
<Version>1.0.4</Version>
<Version>1.0.5</Version>
<Authors>Sabit Igde, Ueli Niederer</Authors>
<Company />
<Description>Barcode Scanner component for Blazor using zxing-js Interop</Description>
Expand Down
19 changes: 5 additions & 14 deletions BlazorBarcodeScanner.ZXing.JS/wwwroot/BlazorBarcodeScanner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,26 +182,17 @@ window.BlazorBarcodeScanner = {
mediaStreamSetTorch(track, torchStatus);
}
},
capture: async function (type, canvas) {
capture: async function (type, canvas,video) {
this.lastPicture = "";

if (!this.codeReader.stream) {
return "";
}

let capture = new ImageCapture(this.codeReader.stream.getVideoTracks()[0]);

await capture.grabFrame()
.then(bitmap => {
let context = canvas.getContext('2d');

canvas.width = bitmap.width;
canvas.height = bitmap.height;

context.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height);

this.lastPicture = canvas.toDataURL(type);
});
canvas.width = video.videoWidth;
Copy link
Owner

@sabitertan sabitertan Feb 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Style changes are good, but this is another concern we need to address in another PR, also keep ImageCapture and if video parameter passed use it otherwise rely on ImageCapture path.

canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0);
this.lastPicture = canvas.toDataURL('image/png');
},
pictureGetBase64Unmarshalled: function (source) {
let source_str = BINDING.conv_string(source);
Expand Down
4 changes: 2 additions & 2 deletions BlazorBarcodeScanner.Zxing.Cpp/BarcodeReader.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,10 @@
<canvas id="video-canvas" width="@VideoWidth" height="@VideoHeight">
@if (FullWidthVideo)
{
<video @ref="_video"></video>
<video style="@VideoElementStyle" @ref="_video"></video>
} else
{
<video @ref="_video" width="@VideoWidth" height="@VideoHeight"></video>
<video style="@VideoElementStyle" @ref="_video" width="@VideoWidth" height="@VideoHeight"></video>
}
</canvas>

Expand Down
9 changes: 8 additions & 1 deletion BlazorBarcodeScanner.Zxing.Cpp/BarcodeReader.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
using Microsoft.AspNetCore.Components;
using System.Diagnostics.CodeAnalysis;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace BlazorBarcodeScanner.ZXing.Cpp
Expand Down Expand Up @@ -65,6 +66,12 @@ public partial class BarcodeReader : ComponentBase, IDisposable, IAsyncDisposabl
[Parameter]
public int? StreamWidth { get; set; } = null;

[Parameter]
#if NET8_0
[StringSyntax("css")]
#endif
public string VideoElementStyle { get; set; } ="";

[Parameter]
public EventCallback<BarcodeReceivedEventArgs> OnBarcodeReceived { get; set; }

Expand Down
19 changes: 5 additions & 14 deletions BlazorBarcodeScanner.Zxing.Cpp/wwwroot/BlazorBarcodeScanner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,26 +327,17 @@ window.BlazorBarcodeScanner = {
mediaStreamSetTorch(track, torchStatus);
}
},
capture: async function (type, canvas) {
capture: async function (type, canvas,video) {
this.lastPicture = "";

if (!this.codeReader.stream) {
return "";
}

let capture = new ImageCapture(this.codeReader.stream.getVideoTracks()[0]);

await capture.grabFrame()
.then(bitmap => {
let context = canvas.getContext('2d');

canvas.width = bitmap.width;
canvas.height = bitmap.height;

context.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height);

this.lastPicture = canvas.toDataURL(type);
});
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0);
this.lastPicture = canvas.toDataURL('image/png');
},
pictureGetBase64Unmarshalled: function (source) {
let source_str = BINDING.conv_string(source);
Expand Down
10 changes: 10 additions & 0 deletions BlazorZXingJSApp/Client/Pages/Index.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
VideoHeight="540"
StreamWidth="@StreamWidth"
StreamHeight="@StreamHeight"
VideoElementStyle="@VideoElementStyle"
OnBarcodeReceived="LocalReceivedBarcodeText"
OnErrorReceived="LocalReceivedError"/>
</div>
Expand All @@ -33,6 +34,15 @@
</div>
<button @onclick="() => _reader.UpdateResolution()" class="btn btn-outline-primary">Update stream</button>
</div>
<div>
<b>Video element styling</b>
<div>(updates on enter or on focus loss)</div>
<div>
<label>Style:
<input style="width: 7em" @bind="VideoElementStyle" />
</label>
</div>
</div>
<div class="mt-1">
<div><b>Custom Result</b></div>
<div class="alert alert-success" style="word-break: break-all;" role="alert">@(!string.IsNullOrWhiteSpace(LocalBarcodeText) ? @LocalBarcodeText : "Results will be here")</div>
Expand Down
1 change: 1 addition & 0 deletions BlazorZXingJSApp/Client/Pages/Index.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ public partial class Index

private string _imgSrc = string.Empty;
private string _lastError = string.Empty;
public string VideoElementStyle { get; set; } = "";

protected override void OnAfterRender(bool firstRender)
{
Expand Down