Почему remoteDescription null?

Question

[historydev]

Здравствуйте. Пытаюсь разобраться с webRTC, по гайду от гугла. У меня получился следующий код, однако я получаю ошибку. Подскажите пожалуйста что я сделал не так?

index.js:29 Uncaught (in promise) DOMException: Failed to execute 'addIceCandidate' on 'RTCPeerConnection': The remote description was null

import { io } from "https://cdn.socket.io/4.3.2/socket.io.esm.min.js";

const socket = io('http://localhost:4000');

const pc = () => {
	const configuration = {'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}]}
	return new RTCPeerConnection(configuration);
}

const peerConnection = pc();

const remoteVideo = document.querySelector('#remoteVideo');
const localVideo = document.querySelector('#localVideo');
await navigator.mediaDevices.getUserMedia({video: true, audio: true}).then(stream => {
	localVideo.srcObject = stream;
	stream.getTracks().forEach(track => {
		peerConnection.addTrack(track, stream);
	});
});

socket.on('answer', async answer => {
	console.log(peerConnection.signalingState, peerConnection.connectionState)
	const remoteDesc = new RTCSessionDescription(answer);
	await peerConnection.setRemoteDescription(remoteDesc);
});

socket.on('iceCandidate', async iceCandidate => {
	await peerConnection.addIceCandidate(iceCandidate);
});

peerConnection.addEventListener('icecandidate', event => {
	console.log(event);
	if (event.candidate) {
		socket.emit('message', {type: 'iceCandidate', message: event.candidate});
	}
});

peerConnection.addEventListener('connectionstatechange', event => {

	console.log('PeerState: ', peerConnection.connectionState)
	if (peerConnection.connectionState === 'connected') {
		console.log('Peer connected')
	}
});

peerConnection.addEventListener('track', async (event) => {
	console.log(event.streams);
	const [remoteStream] = event.streams;
	remoteVideo.srcObject = remoteStream;
});

document.querySelector('#listen').onclick = () => {
	socket.on('offer', async offer => {
		await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
		const answer = await peerConnection.createAnswer();
		await peerConnection.setLocalDescription(answer);
		socket.emit('message', {type: 'answer', message: answer});
	});
}


document.querySelector('#makeCall').onclick = async() => {
	const offer = await peerConnection.createOffer();
	await peerConnection.setLocalDescription(offer);
	socket.emit('message', {type: 'offer', message: offer});
}

P.S: Заменил offer на answer в listen, ошибка ушла, состояние подключён, на окне где нажимаешь listen ничего не происходит, на окне где нажимаешь makeCall начинает грузиться видео но так и не загружается:

document.querySelector('#listen').onclick = () => {
	socket.on('answer', async answer => {
		console.log(peerConnection.signalingState, peerConnection.connectionState)
		const remoteDesc = new RTCSessionDescription(answer);
		await peerConnection.setRemoteDescription(remoteDesc);
	});
}

Спасибо!

Comments

[Сергей Сергей]

Продолжим.
В кнопке listen на answer не надо переделывать, ибо offer-ы перестаёт принимать.
Для ошибки с кандидатом без "далёкого" описания нужно сделать накопитель, чтобы откладывать попытки приёма кандидатов позже, когда описание будет.

spoiler

import { io } from "https://cdn.socket.io/4.3.2/socket.io.esm.min.js";

const socket = io('http://localhost:4000');

const pc = () => {
  const configuration = { iceServers: [
    {
      urls: "stun:openrelay.metered.ca:80",
    },
    {
      urls: "turn:openrelay.metered.ca:80",
      username: "openrelayproject",
      credential: "openrelayproject",
    },
    {
      urls: "turn:openrelay.metered.ca:443",
      username: "openrelayproject",
      credential: "openrelayproject",
    },
    {
      urls: "turn:openrelay.metered.ca:443?transport=tcp",
      username: "openrelayproject",
      credential: "openrelayproject",
    },
  ] }
  return new RTCPeerConnection(configuration);
}

const peerConnection = pc();

const remoteVideo = document.querySelector('#remoteVideo');
const localVideo = document.querySelector('#localVideo');
await navigator.mediaDevices.getUserMedia({video: true, audio: true}).then(stream => {
  localVideo.srcObject = stream;
  stream.getTracks().forEach(track => {
    peerConnection.addTrack(track, stream);
  });
});

socket.on('answer', async answer => {
  console.log(peerConnection.signalingState, peerConnection.connectionState)
  const remoteDesc = new RTCSessionDescription(answer);
  await peerConnection.setRemoteDescription(remoteDesc);
});

const icecs = [];
socket.on('iceCandidate', async function onice(iceCandidate) {
  if(iceCandidate) icecs.push(iceCandidate);
  if(icecs.length === 0)return;
  try{
    await peerConnection.addIceCandidate(icecs[0]);
    icecs.shift();
    console.log('ice accepted');
  }catch(er) {
    console.log('ice collected');
    setTimeout(onice,200);
  }
});

peerConnection.addEventListener('icecandidate', event => {
  console.log(event);
  if (event.candidate) {
    socket.emit('message', {type: 'iceCandidate', message: event.candidate});
  }
});

peerConnection.addEventListener('connectionstatechange', event => {
  console.log('PeerState: ', peerConnection.connectionState)
});

peerConnection.addEventListener('track', async (event) => {
  console.log(event.streams);
  const [remoteStream] = event.streams;
  remoteVideo.srcObject = remoteStream;
});

document.querySelector('#listen').onclick = () => {
  socket.on('offer', async offer => {
    await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
    const answer = await peerConnection.createAnswer();
    await peerConnection.setLocalDescription(answer);
    socket.emit('message', {type: 'answer', message: answer});
  });
}


document.querySelector('#makeCall').onclick = async() => {
  const offer = await peerConnection.createOffer();
  await peerConnection.setLocalDescription(offer);
  socket.emit('message', {type: 'offer', message: offer});
}

[historydev]

Сергей Сергей, Здравствуйте! Спасибо! Я нашёл рабочий исходник который работает на new BroadcastChannel('webrtc'), переписал на сокеты, сейчас разбираюсь сижу глубже:

const socket = io('http://localhost:4000');

const startButton = document.getElementById('startButton');
const hangupButton = document.getElementById('hangupButton');
const joinRoom = document.getElementById('joinRoom');

const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');

joinRoom.onclick = async () => {
	socket.emit('joinRoom', document.getElementById('companionId').value);
}

let pc;
let localStream;

const onMessage = data => {

	if (!localStream) {
		console.log('not ready yet');
		return;
	}

	console.log(data);

	switch (data.type) {
		case 'offer':
			handleOffer(data);
			break;
		case 'answer':
			handleAnswer(data);
			break;
		case 'candidate':
			handleCandidate(data);
			break;
		case 'ready':
			// A second tab joined. This tab will initiate a call unless in a call already.
			if (pc) {
				console.log('already in call, ignoring');
				return;
			}
			makeCall(data);
			break;
		case 'bye':
			if (pc) {
				hangup(data);
			}
			break;
		default:
			console.log('unhandled', data);
			break;
	}
}

socket.on('message', onMessage);

startButton.onclick = async () => {

	localStream = await navigator.mediaDevices.getUserMedia({audio: true, video: true});
	localVideo.srcObject = localStream;

	startButton.disabled = true;
	hangupButton.disabled = false;

	const companionId = document.getElementById('companionId').value;

	socket.emit('message',
		{
			id: companionId,
			message: {
				type: 'ready'
			}
		});
}

hangupButton.onclick = async () => {
	hangup();
	socket.emit('message',
		{
			id: companionId,
			message: {
				type: 'bye'
			}
		});
}

async function hangup() {
	if (pc) {
		pc.close();
		pc = null;
	}
	localStream.getTracks().forEach(track => track.stop());
	localStream = null;
	startButton.disabled = false;
	hangupButton.disabled = true;
}

function createPeerConnection() {
	pc = new RTCPeerConnection();
	pc.onicecandidate = e => {
		const message = {
			type: 'candidate',
			candidate: null
		};
		if (e.candidate) {
			message.candidate = e.candidate.candidate;
			message.sdpMid = e.candidate.sdpMid;
			message.sdpMLineIndex = e.candidate.sdpMLineIndex;
		}

		const companionId = document.getElementById('companionId').value;

		socket.emit('message', {
			id: companionId,
			message
		});

	}
	pc.ontrack = e => remoteVideo.srcObject = e.streams[0];
	localStream.getTracks().forEach(track => pc.addTrack(track, localStream));
}

async function makeCall() {
	await createPeerConnection();
	const companionId = document.getElementById('companionId').value;

	const offer = await pc.createOffer();
	socket.emit('message', {
		id: companionId,
		message: {
			type: 'offer',
			sdp: offer.sdp
		}
	});
	await pc.setLocalDescription(offer);
}

async function handleOffer(offer) {
	if (pc) {
		console.error('existing peerconnection');
		return;
	}
	await createPeerConnection();
	await pc.setRemoteDescription(offer);
	const companionId = document.getElementById('companionId').value;

	const answer = await pc.createAnswer();
	socket.emit('message', {
		id: companionId,
		message: {
			type: 'answer',
			sdp: answer.sdp
		}
	});
	await pc.setLocalDescription(answer);
}

async function handleAnswer(answer) {
	if (!pc) {
		console.error('no peerconnection');
		return;
	}
	await pc.setRemoteDescription(answer);
}

async function handleCandidate(candidate) {

	console.log('Candidate', candidate)

	if (!pc) {
		console.error('no peerconnection');
		return;
	}
	if (!candidate.candidate) {

		console.log('Candidate null');

		await pc.addIceCandidate(null);
	} else {
		await pc.addIceCandidate(candidate);
	}
}

P.S. Я оставлю ссылку на репозиторий в ответе на этот вопрос, для будущих таких как я)