Blazor Server App Capturing Video

[Chris Holland]

I have defined the following in my blazor code

<video id="video" width="320" height="240" style="@VideoStyle" />
<canvas id="canvas" width="320" height="240" style="@PhotoStyle"></canvas>

and then on a button click event I call this function:

await JsRuntime.InvokeAsync<object>("StartWebCam", "video", "canvas");

In my _Host.cshtml file i have the following under a <script type="text/javascript"> section


function StartWebCam(videoId, canvasId)
{
// The width and height of the captured photo. We will set the
// width to the value defined here, but the height will be
// calculated based on the aspect ratio of the input stream.

var width = 320; // We will scale the photo width to this
var height = 0; // This will be computed based on the input stream

// |streaming| indicates whether or not we're currently streaming
// video from the camera. Obviously, we start at false.

var streaming = false;

// The various HTML elements we need to configure or control. These
// will be set by the startup() function.

var video = null;
var canvas = null;

video = document.getElementById(videoId);
canvas = document.getElementById(canvasId);

navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(function (stream)
{
video.srcObject = stream;
video.play();
})
.catch(function (err)
{
console.log("An error occurred: " + err);
});

video.addEventListener('canplay', function (ev)
{
if (!streaming)
{
height = video.videoHeight / (video.videoWidth / width);

// Firefox currently has a bug where the height can't be read from
// the video, so we will make assumptions if this happens.

if (isNaN(height))
{
height = width / (4 / 3);
}

video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
};

This all works fine except that the video that it captures is from the camera on the server not on the client!

How do I capture the client's camera?




Chris Holland

Continue reading...