I am using Firefox 70.0.1 (64-bit). The resolution of video is stuck at 720p in firefox in consumer side. The resolution is not changing according to the network speed. Could you please tell me why it is not working in firefox? I have deployed the project. Could you please check the url - https://vofoxtest.tk:8888/ ?
Shall I need to do anything else in backend and frontend code?
The code for video producing(frontend) is given below:-
async sendVideo(track) {
console.warn("room.sendVideo()");
const videoProducer = await this.sendTransport.produce({
track,
encodings :
[
{ rid: 'r0', scalabilityMode: 'S1T3' },
{ rid: 'r1', scalabilityMode: 'S1T3' },
{ rid: 'r2', scalabilityMode: 'S1T3' },
{ rid: 'r3', scalabilityMode: 'S1T3' }
],
codecOptions :
{
videoGoogleStartBitrate : 1000
}
});
console.log(videoProducer)
if(this.videoProducer){
this._closeProducer(this.videoProducer);
}
this.videoProducer = videoProducer;
videoProducer.on("trackended", async () => {
console.warn("producer.close() by trackended");
await this._closeProducer(videoProducer);
});
return videoProducer;
}
This is where I am consuming it(frontend) :-
onPeerRequest(req, resolve, reject) {
console.warn("room.peer:request", req.method);
switch (req.method) {
// if you decline this offer, will not request `newConsumer`
case "newConsumerOffer": {
if (
confirm(`Do you consume ${req.data.kind} from ${req.data.peerId}?`)
) {
resolve({ accept: true });
return;
}
resolve({ accept: false });
break;
}
case "newConsumer": {
// debugger
console.log("frontend request consuming")
// console.log(req.data);
// let scale = parseScalabilityMode(
// consumer.rtpParameters.encodings[0].scalabilityMode);
// console.log(scale);
this.videoConsumer = this.recvTransport
.consume(req.data)
.then(consumer => {
this.emit("@consumer", consumer);
resolve();
})
.catch(reject);
break;
}
case 'consumerLayersChanged':
{
const { consumerId, spatialLayer, temporalLayer } = req.data;
// const consumer = this._consumers.get(consumerId);
if (!consumer)
break;
this.spatialLayer = spatialLayer;
this.temporalLayer = temporalLayer;
break;
}
default:
resolve();
}
}
Consumer layer change event handling in backend:-
consumer.on('layerschange', (layers) =>
{
console.log(`consumer layer - ${JSON.stringify(consumer.currentLayers)}`);
console.log(`consumer score - ${JSON.stringify(consumer.score)}`);
consumerPeer.notify(
'consumerLayersChanged',
{
consumerId : consumer.id,
spatialLayer : layers ? layers.spatialLayer : null,
temporalLayer : layers ? layers.temporalLayer : null
})
.catch(() => {});
});
This is my codec settings for the mediasoup router:-
const router = await worker.createRouter({
mediaCodecs: [
{
kind: "audio",
name: "opus",
mimeType: "audio/opus",
clockRate: 48000,
channels: 2
},
{
kind : 'video',
mimeType : 'video/VP8',
clockRate : 90000,
parameters :
{
'x-google-start-bitrate' : 1000
}
},
{
kind : 'video',
mimeType : 'video/VP9',
clockRate : 90000,
parameters :
{
'profile-id' : 2,
'x-google-start-bitrate' : 1000
}
}
]
});