web-dev-qa-db-ja.com

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スクリプトが実際に実行されていることを確認するためにアラートに追加しました。

Chromeブラウザが、許可する私のウェブカメラの使用許可を求めます。

私のウェブカメラがアクティブになりました（私のコンピューターには、カムがアクティブであるときに表示するインジケータライトがあります）。

ただし、ページには何も表示されません。私のカメラストリームをタグにバインドすることで、それは簡単なことだと思います。次の反復では、ビデオフィードのスナップショットを撮ります。とりあえず、ページにフィードを表示したいだけです。

ここで行ったように、C＃コードブロックを介してバインディングをルーティングする必要がありますか、それとも可能ですか？ JavaScriptを直接HTML要素にバインドしますか？

javascripthtmlblazorblazor-client-sideasp.net-blazor
2
Newbee

問題はChromeの使用でした。

MS Edgeでは問題なく動作しました。

Blazor要素を含めずに、プレーンHTMLページで同じコードを試したところ、同じ結果が得られました。私のChromeブラウザ、または私のラップトップシステムの設定での設定が原因です。

質問に答える。いいえ、バインディングはc＃コードを経由する必要はありません。 JavaScriptはHTMLに直接接続できます。

1
Newbee