Most heavy traffic will be video. One of the solutions will be limiting video quality or disabling it completely. You can limit video quality using this code:
const displayMediaStream = await getDisplayMediaStream();
let supports = navigator.mediaDevices.getSupportedConstraints();
if (!supports["width"] || !supports["height"] || !supports["frameRate"] || !supports["facingMode"]) {
// We're missing needed properties, so handle that error.
} else {
let constraints = {
width: { min: 640, ideal: 1920, max: 1920 },
height: { min: 400, ideal: 1080 },
aspectRatio: 1.777777778,
frameRate: { max: 30 }
};
displayMediaStream.getVideoTracks()[0].applyConstraints(constraints)
}
return displayMediaStream.getVideoTracks()[0];
You can play with the values.
Also, the problem could be in the browser codec. For example, FF in case of screen sharing uses codec which produces high-quality video stream which is good in case of static pictures, like sharing documents, the problem appears when users broadcast dynamic videos, like youtube videos, with screen sharing. In such a case, FF overloads the network by sending streams ~7 Gb. Meanwhile, Google Chrome is more intelligent and can adapt the traffic by using better codecs. I would do tests with different browsers and if the problem lays in FF, you can try to force FF to use better codecs, like same which used by Google Chrome, for that you have to modify SDP when detecting FF browser, you can do it like described here: How can I change the default Codec used in WebRTC?