Зависание видеозвонка SimpleWebRTC
У меня есть код для видеозвонков SimpleWebRTC (показан ниже), когда я выбираю имя комнаты и нажимаю кнопку вызова (clickCall()), видеочат запускается и работает нормально (у меня есть экземпляр, работающий в двух отдельных окнах браузера, расположенных рядом сторона). Проблема в том, когда я пытаюсь повесить трубку (clickHangUp()) - у меня все еще отображаются удаленные видео, которые не удаляются, даже если их состояние отображается как отключенное??? Не говоря уже о попытках позвонить (снова присоединиться к другой или той же комнате)???
/*!
* webrtcopsJS (http://endhousesoftware.byethost11.com)
*
* Version 1.0.0 Initial version
*/
var webrtc = null;
function showVolume(el, volume) {
if (!el) return;
if (volume < -45) { // vary between -45 and -20
el.style.height = '0px';
} else if (volume > -20) {
el.style.height = '100%';
} else {
el.style.height = '' + Math.floor((volume + 100) * 100 / 25 - 220) + '%';
}
}
function clickCall() {
var roomid = document.getElementById('webrtcroomid').value;
if (roomid = "") {
alert("You must enter a room name to join.");
return;
}
// create our WebRTC connection
if (webrtc == null) {
webrtc = new SimpleWebRTC({
// the id/element dom element that will hold "our" video
localVideoEl: 'localVideo',
// the id/element dom element that will hold remote videos
remoteVideosEl: '',
// immediately ask for camera access
autoRequestMedia: true,
debug: false,
detectSpeakingEvents: true,
autoAdjustMic: false
});
}
// we have to wait until it's ready
webrtc.on('readyToCall', function () {
webrtc.joinRoom(roomid);
});
webrtc.on('channelMessage', function (peer, label, data) {
console.log('channelMessage ', peer);
if (data.type == 'volume') {
showVolume(document.getElementById('volume_' + peer.id), data.volume);
}
});
// we got access to the camera
webrtc.on('localStream', function (stream) {
});
// we did not get access to the camera
webrtc.on('localMediaError', function (err) {
});
// local screen obtained
webrtc.on('localScreenAdded', function (video) {
console.log('localScreenAdded ', video);
video.onclick = function () {
video.style.width = video.videoWidth + 'px';
video.style.height = video.videoHeight + 'px';
};
document.getElementById('localScreenContainer').appendChild(video);
$('#localScreenContainer').show();
});
// local screen removed
webrtc.on('localScreenRemoved', function (video) {
console.log('localScreenRemoved ', video);
document.getElementById('localScreenContainer').removeChild(video);
$('#localScreenContainer').hide();
});
// a peer video has been added
webrtc.on('videoAdded', function (video, peer) {
console.log('video added ', peer);
var remotes = document.getElementById('remotes');
if (remotes) {
var container = document.createElement('div');
container.className = 'videoContainer';
container.id = 'container_' + webrtc.getDomId(peer);
container.appendChild(video);
// suppress contextmenu
video.oncontextmenu = function () { return false; };
// show the remote volume
var vol = document.createElement('div');
vol.id = 'volume_' + peer.id;
vol.className = 'volumeBar';
video.onclick = function () {
video.style.width = video.videoWidth + 'px';
video.style.height = video.videoHeight + 'px';
};
container.appendChild(vol);
// show the ice connection state
if (peer && peer.pc) {
var connstate = document.createElement('div');
connstate.className = 'connectionstate';
container.appendChild(connstate);
peer.pc.on('iceConnectionStateChange', function (event) {
switch (peer.pc.iceConnectionState) {
case 'checking':
$(connstate).text('Connecting to peer...');
break;
case 'connected':
case 'completed': // on caller side
$(connstate).text('Connection established.');
break;
case 'disconnected':
$(connstate).text('Disconnected.');
break;
case 'failed':
$(connstate).text('Connection failed.');
break;
case 'closed':
$(connstate).text('Connection closed.');
break;
}
});
}
remotes.appendChild(container);
}
});
// a peer was removed
webrtc.on('videoRemoved', function (video, peer) {
console.log('video removed ', peer);
var remotes = document.getElementById('remotes');
var el = document.getElementById('container_' + webrtc.getDomId(peer));
if (remotes && el) {
remotes.removeChild(el);
}
});
// local volume has changed
webrtc.on('volumeChange', function (volume, treshold) {
console.log('volumeChange ', volume);
showVolume(document.getElementById('localVolume'), volume);
});
webrtc.on('message', (data) => {
console.log('message ', data);
if (data.type === 'chat') {
const msg = data.payload;
var rtcrecmsgCtrl = document.getElementById('webrtcrecmsg');
rtcrecmsgCtrl.value = msg;
}
});
}
function clickHangUp() {
webrtc.stopLocalVideo();
webrtc.leaveRoom();
webrtc.hangUp();
}
function clickRTCSendMsg() {
var msg = document.getElementById('webrtcsendmsg').value;
if (msg = "") {
alert("You must enter a message to send.");
return;
}
if (webrtc != null) {webrtc.sendToAll('chat',msg);} else {alert("Need to call a roomname first");}
}
Гэвин Бейкер.