Отображение канала камеры локального компьютера в приложении Blazor Web Assembly

Я свел свою проблему к стандартному приложению Blazor Web Assembly.

Проект прямо из мастера, с добавленным ниже кодом.

  1. Я изменил страницу Index.razor на это:
@page "/"
@inject IJSRuntime JSRuntime;
@using System.Drawing;
@using System.IO;

<div>
    <h1>Video Test</h1>
</div>

<video id="video" width="640" height="480" autoplay></video>

<div>
    <button type="button" class="btn btn-primary" @onclick="StartVideo">Click Me</button>
</div>


@code {

    async Task StartVideo()
    {
        await JSRuntime.InvokeVoidAsync("startVideo");
    }

}

У меня есть прикрепленная страница JavaScript:

function startVideo() {
    alert("Test Alert!");

    var video = document.getElementById('video');

    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {
            video.src = window.URL.createObjectURL(stream);
            video.srcObject = stream;
            video.play();
        });
    }
}

Приложение компилируется без проблем. Когда я запускаю его и нажимаю кнопку, я получаю предупреждение. Я добавил предупреждение, чтобы подтвердить, что Java Script действительно запущен.

Браузер Chrome запрашивает разрешение на использование моей веб-камеры, что я даю.

Моя веб-камера активируется (на моем компьютере есть индикатор, который показывает, когда камера активна).

Однако на странице ничего не отображается. Я предполагаю, что это что-то простое с привязкой моего потока камеры к тегу. В следующей итерации я буду делать снимки видеопотока. На данный момент я хочу, чтобы на странице отображался только канал.

Должен ли я маршрутизировать привязку через блок кода C # или могу, как я сделал здесь? Привязать Javascript напрямую к элементу HTML?


javascript html blazor blazor-client-side asp.net-blazor
person Newbee    schedule 24.05.2020    source источник
comment
Вы можете забыть об использовании System.Drawing, я удивлен, что он даже компилируется. Это действительно Blazor WebAssembly?   -  person Henk Holterman    schedule 24.05.2020
comment
Да, это веб-сборка Blazor.   -  person Newbee    schedule 24.05.2020
comment
Просто предположение, но, возможно, вы можете передать элемент видео с @ref вместо того, чтобы получить его снова с помощью getElementById (). Хотя оба должны работать.   -  person Henk Holterman    schedule 24.05.2020
comment
Не повезло. Если я просматриваю страницу в инструментах chrome dev, она показывает, что src видео пуст. Я не должен иметь возможность назначать источник видео прямо из javascript в Blazor.   -  person Newbee    schedule 24.05.2020
comment
Все еще странно. Все соответствующие части находятся в JS, Blazor обрабатывает только нажатие кнопки. Конечно, создайте чистый JS-макет и протестируйте его в ›1 браузерах.   -  person Henk Holterman    schedule 24.05.2020
comment
Хорошо, дайте мне пощечину мокрой рыбой. Это хром! Работает в Edge. Думаю, последняя проблема в том, какие настройки мне нужно изменить в Chrome. Javascript включен. Спросите, прежде чем будет установлен доступ в камере.   -  person Newbee    schedule 25.05.2020
comment
Большое спасибо за вашу помощь, Хенк Холтерман !!!!!   -  person Newbee    schedule 25.05.2020

Ответы (2)


arrow_upward
4
arrow_downward

Я считаю, что у вас проблемы с браузерами на основе хрома, потому что createObjectURL устарел. Все, что вам нужно для Chrome и нового браузера MS Edge (использующего хром), - это строки, содержащие srcObject и play. Я протестировал приведенный ниже код в Chrome, Firefox и новом Edge.

function startVideo() {
    alert("Test Alert!");

    var video = document.getElementById('video');

    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {
            try {
                video.srcObject = stream;
            } catch (error) {
                video.src = window.URL.createObjectURL(stream);
            }
            video.play();
        });
    }
}
person TheBinaryCPA    schedule 10.08.2020

arrow_upward
1
arrow_downward

Проблема заключалась в использовании Chrome.

Он работал без проблем в MS Edge.

Я попробовал тот же код на простой HTML-странице без элементов Blazor и получил тот же результат. Это вызвано настройкой в ​​моем браузере Chrome или настройками системы ноутбука.

Чтобы ответить на вопрос. Нет, привязка не должна проходить через код C #. JavaScript может напрямую подключаться к HTML.

person Newbee    schedule 24.05.2020
comment
Какую версию MS Edge вы использовали? Новая версия Chrome или более старая версия Edge? - person TheBinaryCPA; 10.08.2020