screen shared image is blurry

DaiYuanchuan commented 1 month ago

What happened?

When the screen is being shared, there is a degradation in picture quality. This phenomenon is particularly noticeable when the content of the shared page changes, as it initially appears fuzzy and gradually becomes clear.

Platform

[X] Chrome (or Chromium based)
[ ] Firefox
[ ] Safari
[ ] Other desktop browser
[ ] Android browser
[ ] iOS browser
[ ] Electron app
[ ] Android mobile app
[ ] iOS mobile app
[ ] Custom app using a mobile SDK

Browser / app / sdk version

stable-9646 Chrome 94.0.4606.71

Relevant log output

No response

Reproducibility

[ ] The problem is reproducible on meet.jit.si

More details?

install wget $(curl -s https://api.github.com/repos/jitsi/docker-jitsi-meet/releases/latest | grep 'zip' | cut -d\" -f4) docker compose up -d

.env CONFIG=/data/jitsi-meet/jitsi-meet-cfg HTTP_PORT=1085 HTTPS_PORT=1084 JVB_PORT=1086 TZ=Asia/Shanghai PUBLIC_URL=https://192.168.31.78:1084 JVB_ADVERTISE_IPS=192.168.31.78,jitsi-docker-jitsi-meet-1797ac8-jvb-1 RESOLUTION=1440

// Jitsi Meet configuration.
var config = {};

config.hosts = {};

config.hosts.domain = 'meet.jitsi';
config.focusUserJid = 'focus@auth.meet.jitsi';

var subdir = '<!--# echo var="subdir" default="" -->';
var subdomain = '<!--# echo var="subdomain" default="" -->';
if (subdir.startsWith('<!--')) {
    subdir = '';
}
if (subdomain) {
    subdomain = subdomain.substring(0,subdomain.length-1).split('.').join('_').toLowerCase() + '.';
}
config.hosts.muc = 'muc.' + subdomain + 'meet.jitsi';
config.bosh = 'https://192.168.31.78:1084/' + subdir + 'http-bind';
config.websocket = 'wss://192.168.31.78:1084/' + subdir + 'xmpp-websocket';
config.bridgeChannel = {
    preferSctp: true
};

// Video configuration.
//

config.resolution = 1440;
config.constraints = {
    video: {
        height: { ideal: 1440, max: 1440, min: 180 },
        width: { ideal: 1280, max: 1280, min: 320},
    }
};

config.disableSimulcast = true;
config.startVideoMuted = 10;
config.startWithVideoMuted = false;

config.flags = {
    sourceNameSignaling: true,
    sendMultipleVideoStreams: true,
    receiveMultipleVideoStreams: true
};

// ScreenShare Configuration.
//

// Audio configuration.
//

config.enableNoAudioDetection = true;
config.enableTalkWhileMuted = false;
config.disableAP = false;

config.audioQuality = {
    stereo: false
};

config.startAudioOnly = false;
config.startAudioMuted = 10;
config.startWithAudioMuted = false;
config.startSilent = false;
config.enableOpusRed = false;
config.disableAudioLevels = false;
config.enableNoisyMicDetection = true;

// Peer-to-Peer options.
//

config.p2p = {
    enabled: true
};

// Breakout Rooms
//

config.hideAddRoomButton = false;

// Etherpad
//

// Recording.
//

// Local recording configuration.
config.localRecording = {
    disable: false,
    notifyAllParticipants: false,
    disableSelfRecording: false
};

// Analytics.
//

config.analytics = {};

// Dial in/out services.
//

// Calendar service integration.
//

config.enableCalendarIntegration = false;

// Invitation service.
//

// Miscellaneous.
//

// Prejoin page.
config.prejoinConfig = {
    enabled: true,

    // Hides the participant name editing field in the prejoin screen.
    hideDisplayName: false
};

// List of buttons to hide from the extra join options dropdown on prejoin screen.
// Welcome page.
config.welcomePage = {
    disabled: false
};

// Close page.
config.enableClosePage = false;

// Default language.
// Require users to always specify a display name.
config.requireDisplayName = false;

// Chrome extension banner.
// Disables profile and the edit of all fields from the profile settings (display name and email)
config.disableProfile = false;

// Room password (false for anything, number for max digits)
config.roomPasswordNumberOfDigits = false;
// Advanced.
//

// Transcriptions (subtitles and buttons can be configured in interface_config)
config.transcription = {
    enabled: false,
    translationLanguages: [],
    translationLanguagesHead: ['en'],
    useAppLanguage: true,
    preferredLanguage: 'en-US',
    disableStartForAll: false,
    autoCaptionOnRecord: false,
};

// Dynamic branding
// Deployment information.
//

config.deploymentInfo = {};

// Deep Linking
config.disableDeepLinking = false;

// P2P preferred codec
// Video quality settings.
//

config.videoQuality = {};
config.videoQuality.av1 = {};

config.videoQuality.h264 = {};

config.videoQuality.vp8 = {};

config.videoQuality.vp9 = {};

// Reactions
config.disableReactions = false;

// Polls
config.disablePolls = false;

// Configure toolbar buttons
// Hides the buttons at pre-join screen
// Configure remote participant video menu
config.remoteVideoMenu = {
    disabled: false,
    disableKick: false,
    disableGrantModerator: false,
    disablePrivateChat: false
};

// Configure e2eping
config.e2eping = {
    enabled: false
};

// Settings for the Excalidraw whiteboard integration.
config.whiteboard = {
    enabled: false,
};

// Testing
config.testing = {
    enableAv1Support: false
};

damencho commented 1 month ago

Have you tried running with default configuration (config.js)? Do you reproduce it with it?

DaiYuanchuan commented 1 month ago

Have you tried running with default configuration (config.js)? Do you reproduce it with it?

Yes, I'm using the default configuration，It doesn't get any better

damencho commented 1 month ago

config.disableSimulcast = true;

This is in the default configuration?

config.videoQuality = {}; config.videoQuality.av1 = {};

config.videoQuality.h264 = {};

config.videoQuality.vp8 = {};

config.videoQuality.vp9 = {};

And this?

DaiYuanchuan commented 1 month ago

I used the following configuration

// Jitsi Meet configuration.
var config = {};

config.hosts = {};

config.hosts.domain = 'meet.jitsi';
config.focusUserJid = 'focus@auth.meet.jitsi';

var subdir = '<!--# echo var="subdir" default="" -->';
var subdomain = '<!--# echo var="subdomain" default="" -->';
if (subdir.startsWith('<!--')) {
    subdir = '';
}
if (subdomain) {
    subdomain = subdomain.substring(0,subdomain.length-1).split('.').join('_').toLowerCase() + '.';
}
config.hosts.muc = 'muc.' + subdomain + 'meet.jitsi';
config.bosh = 'https://192.168.31.78:1084/' + subdir + 'http-bind';
config.websocket = 'wss://192.168.31.78:1084/' + subdir + 'xmpp-websocket';
config.bridgeChannel = {
    preferSctp: true
};

// Video configuration.
//

config.resolution = 720;
config.constraints = {
    video: {
        height: { ideal: 720, max: 720, min: 180 },
        width: { ideal: 1280, max: 1280, min: 320},
    }
};

config.disableSimulcast = true;
config.startVideoMuted = 10;
config.startWithVideoMuted = false;

config.flags = {
    sourceNameSignaling: true,
    sendMultipleVideoStreams: true,
    receiveMultipleVideoStreams: true
};

// ScreenShare Configuration.
//

// Audio configuration.
//

config.enableNoAudioDetection = true;
config.enableTalkWhileMuted = false;
config.disableAP = false;

config.audioQuality = {
    stereo: false
};

config.startAudioOnly = false;
config.startAudioMuted = 10;
config.startWithAudioMuted = false;
config.startSilent = false;
config.enableOpusRed = false;
config.disableAudioLevels = false;
config.enableNoisyMicDetection = true;

// Peer-to-Peer options.
//

config.p2p = {
    enabled: true
};

// Breakout Rooms
//

config.hideAddRoomButton = false;

// Etherpad
//

// Recording.
//

// Local recording configuration.
config.localRecording = {
    disable: false,
    notifyAllParticipants: false,
    disableSelfRecording: false
};

// Analytics.
//

config.analytics = {};

// Dial in/out services.
//

// Calendar service integration.
//

config.enableCalendarIntegration = false;

// Invitation service.
//

// Miscellaneous.
//

// Prejoin page.
config.prejoinConfig = {
    enabled: true,

    // Hides the participant name editing field in the prejoin screen.
    hideDisplayName: false
};

// List of buttons to hide from the extra join options dropdown on prejoin screen.
// Welcome page.
config.welcomePage = {
    disabled: false
};

// Close page.
config.enableClosePage = false;

// Default language.
// Require users to always specify a display name.
config.requireDisplayName = false;

// Chrome extension banner.
// Disables profile and the edit of all fields from the profile settings (display name and email)
config.disableProfile = false;

// Room password (false for anything, number for max digits)
config.roomPasswordNumberOfDigits = false;
// Advanced.
//

// Transcriptions (subtitles and buttons can be configured in interface_config)
config.transcription = {
    enabled: false,
    translationLanguages: [],
    translationLanguagesHead: ['en'],
    useAppLanguage: true,
    preferredLanguage: 'en-US',
    disableStartForAll: false,
    autoCaptionOnRecord: false,
};

// Dynamic branding
// Deployment information.
//

config.deploymentInfo = {};

// Deep Linking
config.disableDeepLinking = false;

// P2P preferred codec
// Video quality settings.
//

config.videoQuality = {};
config.videoQuality.av1 = {};

config.videoQuality.av1.low = 100000;

config.videoQuality.av1.standard = 300000;

config.videoQuality.av1.high = 1000000;

config.videoQuality.av1.fullHd = 2000000;

config.videoQuality.av1.ultraHd = 4000000;

config.videoQuality.av1.ssHigh = 2500000;
config.videoQuality.h264 = {};

config.videoQuality.h264.low = 200000;

config.videoQuality.h264.standard = 500000;

config.videoQuality.h264.high = 1500000;

config.videoQuality.h264.fullHd = 3000000;

config.videoQuality.h264.ultraHd = 6000000;

config.videoQuality.h264.ssHigh = 2500000;
config.videoQuality.vp8 = {};

config.videoQuality.vp8.low = 200000;

config.videoQuality.vp8.standard = 500000;

config.videoQuality.vp8.high = 1500000;

config.videoQuality.vp8.fullHd = 3000000;

config.videoQuality.vp8.ultraHd = 6000000;

config.videoQuality.vp8.ssHigh = 2500000;
config.videoQuality.vp9 = {};

config.videoQuality.vp9.low = 100000;

config.videoQuality.vp9.standard = 300000;

config.videoQuality.vp9.high = 1200000;

config.videoQuality.vp9.fullHd = 2500000;

config.videoQuality.vp9.ultraHd = 5000000;

config.videoQuality.vp9.ssHigh = 2500000;
// Reactions
config.disableReactions = false;

// Polls
config.disablePolls = false;

// Configure toolbar buttons
// Hides the buttons at pre-join screen
// Configure remote participant video menu
config.remoteVideoMenu = {
    disabled: false,
    disableKick: false,
    disableGrantModerator: false,
    disablePrivateChat: false
};

// Configure e2eping
config.e2eping = {
    enabled: false
};

// Settings for the Excalidraw whiteboard integration.
config.whiteboard = {
    enabled: false,
};

// Testing
config.testing = {
    enableAv1Support: false
};

damencho commented 1 month ago

Try removing any mention of videoQuality to use default values, does it change anything?

DaiYuanchuan commented 1 month ago

I tried a few configurations and it didn't change anything the phenomenon is that when the content of the page changes, it initially looks blurred and then gradually becomes clear.

damencho commented 1 month ago

Are you testing with 2 or 3 participants?

DaiYuanchuan commented 1 month ago

3 participants

damencho commented 1 month ago

Do you reproduce this on meet.jit.si? What browser versions are you using?

DaiYuanchuan commented 1 month ago

yes meet.jit.si has the same problem browser versions: Chrome 94.0.4606.71

DaiYuanchuan commented 1 month ago

The first picture is more blurry after a while, it will look like the second picture

damencho commented 1 month ago

Have you tried a more recent chrome version, this one is 3 years old?

damencho commented 1 month ago

Normally ramp up takes 10-15 seconds.

DaiYuanchuan commented 1 month ago

I tried different browser versions, Doesn't seem to change anything Chrome 127.0.0.0、Chrome 118.0.0.0 Do you have any recommended configurations that can optimize this problem？

jitsi / jitsi-meet