Client side screenshot in MVC 4 C#

See more:

C#

Javascript

MVC4

We've created a stream using navigator.mediadevices.getdisplaymedia which ask permissions to take a screenshot.

All code written in _layout page and it's working, but there is problem, it asking for the (same) permission every time when opening a new menu.

Is there is any way to avoid the fact that the permissions need to be approved every time, or any other solution to take screenshot in mvc 4 c#

For this issue i was tried to store stream details in session, searched another solution to take screenshot, also searched to avoid _layout page load only once, but proper solution not found.

What I have tried:

var videoStream;
                
function handleStreamEnded(stream) {
                
    stream.getVideoTracks()[0].addEventListener('ended', () => {
        requestScreenCapturePermission();
    });
        
    var strm = stream.getVideoTracks()[0];

};
        
async function requestScreenCapturePermission() {
     
    try {
        
        videoStream = await navigator.mediaDevices.getDisplayMedia({
            video: {
                mediaSource: 'screen',
                displaySurface: "monitor"
            },

            preferCurrentTab: false,

            //selfBrowserSurface: "exclude",

            //surfaceSwitching: "include",

            monitorTypeSurfaces: "include",

        });

        handleStreamEnded(videoStream);
                        
        return true;

    } catch (error) {
        console.error('Error capturing screen:', error);

        return false;
    }
};
        
async function takeScreenShot(sender) {
     
    try {
        if (!videoStream) {
             requestScreenCapturePermission();
        }
          
        var video = document.createElement('video');

        video.srcObject = videoStream;

        await video.play();
            
        var canvas = document.createElement('canvas');

        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
            
        var context = canvas.getContext('2d');

        context.drawImage(video, 0, 0, canvas.width, canvas.height);
            
        var base64image = canvas.toDataURL('image/png');

        $.ajax({
            url: '@Url.Action("SaveScreenCapture", "ScreenCapture")',
            type: "POST",
            dataType: "json",
            data: { base64string: base64image },
            async: false,
            success: function (data) { },
            error: function () { alert('Error') }
        });
                
        IWannaChat.server.send(sender, base64image);

    }
    catch (error) {
        console.error('Error capturing screen:', error);
    }
};

$(document).ready(function () {

    if(!videoStream)
    {
       requestScreenCapturePermission();
    }

    var hub = $.connection.myChatHub;

    hub.client.takeScreenShot = function (sendCnnId, sender) {
                        
        if (!videoStream)
            requestScreenCapturePermission();
         
        takeScreenShot(sender);
    };

});