How to fix image blur when screen sharing

mediasoup libraries
1

When broadcasting the screen, if various movements occur on it (for example, scrolling the feed in the browser or smth like that), the image begins to blur. I tried to increase the bitrate and try different codecs, but I could not solve the problem. Perhaps you can suggest configurations or some life hacks on both the server and client sides

2

Look for information about track.contentHint and the options given to getDisplayMedia(), specially resolution and frame rate and somehow about preferring resolution over frame rate whose name i dont remember.

2 Likes
3

Here the snippet:

const mediaConstraints = { video: true, audio: true };

try {
    // Requesting display media
    const stream = await navigator.mediaDevices.getDisplayMedia(mediaConstraints);

    // Extracting the video track
    const videoTrack = stream.getVideoTracks()[0];

    /*
     * videoTrack.contentHint helps optimize media tracks for specific use cases like `motion` or `detail`.
     * - `motion`: For high frame rate, suitable for dynamic content like video playback or game streaming.
     * - `detail`: For content requiring high fidelity, such as screen sharing with text, graphics, or fine details, prioritizing resolution over frame rate.
     */
    if ('contentHint' in videoTrack) {
        videoTrack.contentHint = 'detail';
        console.info('Optimized video track for screen sharing!');
    } else {
        console.warn('contentHint is not supported in this browser');
    }
} catch (error) {
    console.error('Error accessing display media:', error);
}

PS: The ideal keyword in MediaTrackConstraints specifies a preferred value for properties like resolution or frame rate. Unlike exact or min/max, it offers flexibility, guiding the browser toward the desired value while allowing fallback to other options if unavailable.

Example:

const mediaConstraints = {
    video: {
        width: { ideal: 1920 }, // Preferred width
        height: { ideal: 1080 }, // Preferred height
    },
    audio: true,
};
4

Yes) I Find this way and it works for me!
very thx for responsiveness