CODEWITHSUNDEEP
javascripthtmlfirefoxwebrtc
Mauricio
Mauricio

Reputation: 58

Getting error creating sdf offer in firefox v60.0.2 (WebRTC, Firefox)

I'm getting next error when it fires RTCPeerConnection.createOffer():

DOMException
code: 11
columnNumber: 0
data: null
filename: ""
lineNumber: 0
message: "Cannot create offer when there are no valid transceivers."
name: "InvalidStateError"
result: 2152923147
stack: ""
__proto__: DOMExceptionPrototype { name: Getter, message: Getter, INDEX_SIZE_ERR: 1, … } index.js:176:3

The full snippet of code is next (the error is fired by the line: pc.createOffer().then(...):

let pc = {};
let localStream = {};
const btnStart = document.querySelector("button[id='btnstart']");
let localVideoDisplay = document.getElementById('vOwn');

btnStart.addEventListener("click",(e)=>{

		pc = new RTCPeerConnection();
		pc.onicecandidate = (event)=>{
			console.log(event);
		}
		/*
			It captures local media
		*/
		navigator.mediaDevices.getUserMedia({ audio: 1, video: 1 }).then((stream)=>{
			localStream = stream;
			localVideoDisplay.srcObject = localStream;
		}).catch((err)=>{
			  console.log(err);
		});
		/* 
			It creates sdpOffer 
		*/
		pc.createOffer().then((rtcSession)=>{
			console.log(rtcSession);
		}).catch((error)=>{
			console.log(error);
		});
	});
<button id="btnstart">Start</button>
<video id="vOwn" autoplay></video>

The code works flawlessly on Chrome (mobile and desktop) and Safari (mobile v11.3.1 and desktop v11.0.2) my question is next: Is this a firefox bug or Am I doing something wrong?

Upvotes: 0

Views: 381

Answers (1)

Philipp Hancke
Philipp Hancke

Reputation: 17330

You are calling pc.createOffer() before adding any streams or creating a datachannel.

This is typically not what you want. Try this:

navigator.mediaDevices.getUserMedia({ audio: 1, video: 1 }).then((stream)=>{
    localStream = stream;
    localVideoDisplay.srcObject = localStream;
    stream.getTracks().forEach((t) => pc.addTrack(t, stream));
    return pc.createOffer()
})
.then((rtcSession)=>{
    console.log(rtcSession);
}).catch((error)=>{
    console.log(error);
});

Upvotes: 3

Related Questions