Question

此代码不起作用，因为视频音频在 user1 屏幕上静音，但在下一个 user2 屏幕上无法停止。麦克风也有同样的问题。请帮帮我。我只在本地主机上试过。请说明此问题是仅发生在本地主机上还是也会发生在已部署的 Web 应用程序中。

const socket = io("/");
const chatInputBox = document.getElementById("chat_message");
const all_messages = document.getElementById("all_messages");
const main__chat__window = document.getElementById("main__chat__window");
const videotable = document.getElementById("video-table");
const myVideo = document.createElement("video");
myVideo.muted = true;//for not recieving own voice

var peer = new Peer(undefined, {
  path: "/peerjs",
  host: "/",
  port: "3000",
});

let myVideoStream;
const peers = {};
var getUserMedia =
  navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia;

//setting initial controls of video and passing them as constraints
const constraints = {
      'video': true,
      'audio': true
}
navigator.mediaDevices
  .getUserMedia(constraints)
  .then((stream) => {
    myVideoStream = stream;
    addVideoStream(myVideo,myVideoStream);//call to function addVideoStream
    //answering to calls
    peer.on("call", (call) => {
      call.answer(myVideoStream);
      const video = document.createElement("video");

      call.on("stream", (userVideoStream) => {
        addVideoStream(video, userVideoStream);// Show stream in some video/canvas element.
      });
    });

    socket.on("user_connected", (userId) => {//recieving info
      connectToNewUser(userId, stream);//call function with id and stream
    });
    //adding event for messages of chat
    document.addEventListener("keydown", (e) => {
      if (e.which === 13 && chatInputBox.value != "") {
        socket.emit("message", chatInputBox.value);
        chatInputBox.value = "";
      }
    });
    //adding text to chat window
    socket.on("createMessage", (msg) => {
      //console.log(msg);
      let li = document.createElement("li");
      li.innerHTML = msg;
      all_messages.append(li);
      main__chat__window.scrollTop = main__chat__window.scrollHeight;//scrolled to latest message
    });
  });
//For disconnecting user
socket.on('user_disconnected', userId => {
  if (peers[userId]) peers[userId].close()
});

peer.on("call", function (call) {
  getUserMedia(constraints,
    function (stream) {
      call.answer(stream); // Answer the call with an A/V stream.
      const video = document.createElement("video");
      call.on("stream", function (remoteStream) {
        addVideoStream(video, remoteStream); // Show stream in some video/canvas element.
      });
    },
    function (err) {
      console.log("Failed to get local stream", err);
    }
  );
});

peer.on("open", (id) => {//send with an id for user
  // on open will be launch when you successfully connect to PeerServ
  socket.emit("join_room", ROOM_ID, id);//emiting event
});

// Fetch an array of devices of a certain type
async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

// Open camera with echoCancellation for better audio
async function openCamera(cameraId) {
    const constraints = {
        'audio': {'echoCancellation': true}
        }
    return await navigator.mediaDevices.getUserMedia(constraints);
}

const cameras = getConnectedDevices('videoinput');
if (cameras && cameras.length > 0) {
    const stream = openCamera(cameras[0].deviceId);
}

function connectToNewUser (userId, streams) {
  const call = peer.call(userId, streams);
  //console.log(call);
  const video = document.createElement("video");
  call.on("stream", (userVideoStream) => {
    //console.log(userVideoStream);
    addVideoStream(video, userVideoStream);
  });
  call.on('close', () => {
   video.remove()//for removing video elemnt on closing call
 });
 peers[userId] = call;
};

const addVideoStream = (videoEl, stream) => {
  videoEl.srcObject = stream;
  videoEl.addEventListener("loadedmetadata", () => {
    videoEl.play();
  });

  videotable.append(videoEl);//adding video to front-end
  let totalUsers = document.getElementsByTagName("video").length;
  if (totalUsers > 1) {
    for (let index = 0; index < totalUsers; index++) {
      document.getElementsByTagName("video")[index].style.width =
        100 / totalUsers + "%";
    }
  }
};

//js for pause and play of video
const playStop = () => {
  let enabled = myVideoStream.getVideoTracks()[0].enabled;
  if (enabled) {
    myVideoStream.getVideoTracks()[0].enabled = false;
    setPlayVideo();
  } else {
    myVideoStream.getVideoTracks()[0].enabled = true;
    setStopVideo();
  }
};

//js of pause and play of audio
const muteUnmute = () => {
  let enabled = myVideoStream.getAudioTracks()[0].enabled;
  if (enabled) {
    myVideoStream.getAudioTracks()[0].enabled = false;
    setUnmuteButton();
  } else {
    myVideoStream.getAudioTracks()[0].enabled = true;
    setMuteButton();
  }
};

//setting icon for representing current state of video
const setPlayVideo = () => {
  const html = `<i class="unmute fa fa-pause-circle"></i>
  <span class="unmute">Resume Video</span>`;
  document.getElementById("playPauseVideo").innerHTML = html;
};

//setting icon for representing current state of video
const setStopVideo = () => {
  const html = `<i class=" fa fa-video-camera"></i>
  <span class="">Pause Video</span>`;
  document.getElementById("playPauseVideo").innerHTML = html;
};

//setting icon for representing current state of audio
const setUnmuteButton = () => {
  const html = `<i class="unmute fa fa-microphone-slash"></i>
  <span class="unmute">Unmute</span>`;
  document.getElementById("muteButton").innerHTML = html;
};
//setting icon for representing current state of audio
const setMuteButton = () => {
  const html = `<i class="fa fa-microphone"></i>
  <span>Mute</span>`;
  document.getElementById("muteButton").innerHTML = html;
};

此代码不起作用，因为视频音频在 user1 屏幕上静音，但在下一个 user2 屏幕上无法停止。麦克风也有同样的问题。请帮帮我。我只在本地主机上试过。请说明此问题是仅在本地主机上发生还是在已部署的 Web 应用程序中也会发生。

在视频通话中取消静音和停止视频

0 个答案: