SimpleWebRT C видеовызов - PullRequest
       136

SimpleWebRT C видеовызов

0 голосов
/ 24 февраля 2020

У меня есть некоторый код для видеозвонков SimpleWebRT C (показано ниже), когда я выбираю имя комнаты и нажимаю кнопку вызова (clickCall ()), видеочат запускается и работает нормально (у меня экземпляр работает в двух отдельный браузер windows расположен рядом). Проблема в том, когда я пытаюсь повесить трубку (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");}
}

Гэвин Бейкер.

...