Blazor Web Assemblyアプリでローカルマシンのカメラフィードを表示する
問題を定型的なBlazor Web Assemblyアプリにまで絞り込みました。
プロジェクトはウィザードから直接であり、以下のコードが追加されています。
- 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要素にバインドしますか?
問題はChromeの使用でした。
MS Edgeでは問題なく動作しました。
Blazor要素を含めずに、プレーンHTMLページで同じコードを試したところ、同じ結果が得られました。私のChromeブラウザ、または私のラップトップシステムの設定での設定が原因です。
質問に答える。いいえ、バインディングはc#コードを経由する必要はありません。 JavaScriptはHTMLに直接接続できます。