Blazor WebAssembly получает "ошибку доступа к памяти вне пределов" при возврате изображения из вызова JSInterop
У меня есть приложение Blazor WebAssembly, снимающее видео с веб-камеры компьютера. Элемент видео, связанный с веб-камерой, скрыт. Канал видео отображается в элементе холста HTML.
Я использую JSInterop для вызова GetImageData() на холсте. Функция возвращает изображение части холста в виде изображения.
Когда я возвращаю изображение из функции JavaScript, я получаю:
"dotnet.wasm:1 Uncaught (в обещании) RuntimeError: ошибка доступа к памяти за пределами границ"
Вот HTML:
<div id="container">
<video id="videoElement" @ref="VideoElement" autoplay="true" width="1280" height="720"></video>
<canvas id="videoCanvas" @ref="VideoCanvas" width="1280" height="720"></canvas>
</div>
Вот код, вызывающий проблему. Я сузил его до строки в OnTimedEvent:
@code {
ElementReference VideoElement;
ElementReference VideoCanvas;
protected async override Task OnAfterRenderAsync(bool firstRender)
{
await JSRuntime.InvokeVoidAsync("StartVideo", VideoElement);
await JSRuntime.InvokeVoidAsync("PaintVideoToCanvas", VideoElement, VideoCanvas);
Timer _timer = new Timer(5000);
_timer.Elapsed += new ElapsedEventHandler(OnTimedEvent);
_timer.Start();
}
private async void OnTimedEvent(object source, ElapsedEventArgs e)
{
Image temp = await JSRuntime.InvokeAsync<Image>("ImageScanner", VideoCanvas);
}
}
Вот код JavaScript:
function StartVideo(VideoElement) {
let video = VideoElement;
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: { width: { min: 1280 }, height: { min: 720 } } })
.then(function (stream) {
video.srcObject = stream;
})
.catch(function (err0r) {
console.log("Something went wrong!");
});
}
}
function PaintVideoToCanvas(VideoElement, VideoCanvas) {
let video = VideoElement;
let canvas = VideoCanvas;
let ctxLayer1 = canvas.getContext("2d");
StartVideo();
function StartVideo() {
ctxLayer1.drawImage(video, 0, 0);
setTimeout(StartVideo, 1000 / 30); // drawing at 30fps
}
}
function ImageScanner(VideoCanvas) {
let video = VideoCanvas;
let ctxQRCapture = video.getContext("2d");
let image = ctxQRCapture.getImageData(950, 260, 200, 200);
return image;
}