locked
Blazor Server App Capturing Video RRS feed

  • Question

  • 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

    • Moved by CoolDadTx Monday, July 20, 2020 2:02 PM ASP.NET related
    Monday, July 20, 2020 9:10 AM

All replies

  • https://forums.asp.net/1257.aspx/1?Blazor

    Blazer has a fourm in ASP.NTE forums.

    Monday, July 20, 2020 10:00 AM
  • Thanks I have posted the question there.

    It is a well hidden forum, I would never have found it with your link <g>


    Chris Holland

    Monday, July 20, 2020 12:11 PM