Надеюсь, в логике нет недостатка.
Шаг 1: вызов вызывает предложение
Шаг 2: абонентские наборы localDescription
Шаг 3: вызывающий абонент отправляет описание вызываемому абоненту
/ / ------------------------------------------------ ------//
Шаг 4: вызывающий получает предложение наборы удаленного описания
Шаг 5: вызывающий вызывает ответ
Шаг 6: определение локального набора
Шаг 7: вызов отправить описание вызывающему абоненту
/ / ------------------------------------------------ ------//
Шаг 8: вызывающий абонент получает ответ и устанавливает удаленное описание
И вот код для вышеуказанного
const socket = io();
const constraints = {
audio: true,
video: true
};
const configuration = {
iceServers: [{
"url": "stun:23.21.150.121"
}, {
"url": "stun:stun.l.google.com:19302"
}]
};
const selfView = $('#selfView')[0];
const remoteView = $('#remoteView')[0];
var pc = new RTCPeerConnection(configuration);
pc.onicecandidate = ({
candidate
}) => {
socket.emit('message', {
to: $('#remote').val(),
candidate: candidate
});
};
pc.onnegotiationneeded = async () => {
try {
await pc.setLocalDescription(await pc.createOffer());
socket.emit('message', {
to: $('#remote').val(),
desc: pc.localDescription
});
} catch (err) {
console.error(err);
}
};
pc.ontrack = (event) => {
// don't set srcObject again if it is already set.
if (remoteView.srcObject) return;
remoteView.srcObject = event.streams[0];
};
socket.on('message', async ({
from,
desc,
candidate
}) => {
$('#remote').val(from);
try {
if (desc) {
// if we get an offer, we need to reply with an answer
if (desc.type === 'offer') {
await pc.setRemoteDescription(desc);
const stream = await navigator.mediaDevices.getUserMedia(constraints);
stream.getTracks().forEach((track) => pc.addTrack(track, stream));
selfView.srcObject = stream;
await pc.setLocalDescription(await pc.createAnswer());
console.log(pc.localDescription);
socket.emit({
to: from,
desc: pc.localDescription
});
} else if (desc.type === 'answer') {
await pc.setRemoteDescription(desc).catch(err => console.log(err));
} else {
console.log('Unsupported SDP type.');
}
} else if (candidate) {
await pc.addIceCandidate(new RTCIceCandidate(candidate)).catch(err => console.log(err));
}
} catch (err) {
console.error(err);
}
});
async function start() {
try {
// get local stream, show it in self-view and add it to be sent
const stream = await requestUserMedia(constraints);
stream.getTracks().forEach((track) => pc.addTrack(track, stream));
attachMediaStream(selfView, stream);
} catch (err) {
console.error(err);
}
}
socket.on('id', (data) => {
$('#myid').text(data.id);
});
// this function is called once the caller hits connect after inserting the unique id of the callee
async function connect() {
try {
await pc.setLocalDescription(await pc.createOffer());
socket.emit('message', {
to: $('#remote').val(),
desc: pc.localDescription
});
} catch (err) {
console.error(err);
}
}
socket.on('error', data => {
console.log(data);
});
Теперь этот код вызывает ошибку при выполнении шага 8
DOMException: Не удалось выполнить 'setRemoteDescription' в 'RTCPeerConnection': Не удалось установить удаленное предложение sdp: Вызывается в неправильном состоянии: kHaveLocalOffer
DOMException: Не удалось выполнить 'addIceCandidate' в 'RTCPeerConnection': ошибка обработки ICE-кандидата
Пытался отлаживать, но не обнаружил недостатков в логике или коде. Заметил одну странную вещь, что у объекта pc
есть localDescription
и currentLocalDescription
и я думаю, что вызывающий, который создает ответ, должен иметь тип описания, который будет answer
но вместо этого показывает, что localDescription
будет offer
а currentLocalDescription
- answer
.
Я понятия не имею, должно ли оно вести себя так или нет, поскольку я начинаю.
Заранее спасибо.
Ваш код верен. Это давняя ошибка в Chrome с поддержкой negotiationneeded
.
Я сфокусировал его на скрипке (щелкните правой кнопкой мыши и откройте в двух соседних окнах, а затем нажмите кнопку вызова в одном).
В Firefox это работает. Продавец предлагает переговоры один раз, потому что вы одновременно добавляете две дорожки (видео/аудио):
negotiating in stable
onmessage answer
и, на стороне ответчика, в ответ добавляются треки, которые вы добавляете за пределами 'stable'
состояния:
onmessage offer
adding audio track
adding video track
Но в Chrome он сломался, уволив negotiationneeded
дважды раздавали предложение, один раз за трек добавил:
negotiating in stable
negotiating in stable
onmessage offer
DOMException: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection':
Failed to set remote offer sdp: Called in wrong state: kHaveLocalOffer
onmessage offer
DOMException: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection':
Failed to set remote offer sdp: Called in wrong state: kHaveLocalOffer
onmessage offer
DOMException: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection':
Failed to set remote offer sdp: Called in wrong state: kHaveLocalOffer
и negotiationneeded
об увольнении дважды на стороне ответчика, что даже не в 'stable'
состоянии:
onmessage offer
adding audio track
adding video track
negotiating in have-remote-offer
negotiating in have-remote-offer
onmessage offer
DOMException: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection':
Failed to set remote offer sdp: Called in wrong state: kHaveLocalOffer
Эти дополнительные события вызывают разрушение ошибок взаимного состояния, видимых на обоих концах здесь.
Чтобы быть конкретным, Chrome нарушает две части спецификации здесь:
"Очередь задача", чтобы запустить это событие. "очередность предотвращает преждевременные переговоры об увольнении, в общей ситуации, когда сразу происходят несколько изменений в соединении".
Если состояние сигнализации соединения не является "stable"
, прервите эти шаги [для запуска события].