WebRTC屏幕共享在正在进行的音频流中不起作用

时间:2020-04-21 07:21:33

标签: javascript angular webrtc audio-streaming

在我的项目中,我具有音频和视频1-1(群呼)功能。通过通话,用户也可以共享屏幕。在视频通话中,我实现了屏幕共享,并且可以完美地工作,但是在音频通话中,屏幕共享无法正常工作。我不确定为什么会这样。

屏幕共享流能够生成,但另一方面,它给了我这个错误。 DOMException:无法在“ RTCPeerConnection”上执行“ addIceCandidate”:处理ICE候选者时出错 有时它显示此错误,有时它不显示任何错误,流也不会添加到另一侧。我不明白为什么会这样。

下面是我添加新候选人的代码。错误在这里发生。

this.chatService.onVideoCandidate().subscribe((data: any) => {
      console.log("in candidate socket event", data);
      this.peerConnections[data.socketId]
        .addIceCandidate(new RTCIceCandidate(data.message))
        .catch(e => {
          console.log("in error", e);
          console.error(e);
        });
    });

下面是我当前用于处理音频事件的代码。

/ *出现新连接时* /

 this.chatService.onVideoReady().subscribe((data: any) => {
      const id = data.id;
      const type = data.data.type;
      console.log(" id in videoready", id);
      if (id) {
        if (!this.localStream) {
          console.log("in return video ready");
          return;
        }
        let peerConnection = null;
        peerConnection = new RTCPeerConnection(this.config);
        this.peerConnections[id] = peerConnection;
        if (this.localStream) {
          peerConnection.addStream(this.localStream);
        }
        peerConnection
          .createOffer()
          .then(sdp => {
            peerConnection.setLocalDescription(sdp);
          })
          .then(() => {
            console.log("peer id", id);
            if (this.isScreenShare === true) {
              const data = {
                type: "screen",
                userName:
                  this.userData.firstName + " " + this.userData.lastName,
                userProfilePicture: this.userData.profilePictureURL
              };
              this.chatService.VideoOffer(
                id,
                peerConnection["localDescription"],
                data
              );
            } else {
              const data = {
                type: "face",
                userName:
                  this.userData.firstName + " " + this.userData.lastName,
                userProfilePicture: this.userData.profilePictureURL
              };
              this.chatService.VideoOffer(
                id,
                peerConnection["localDescription"],
                data
              );
            }
          })
          .catch(err => {
            console.log("error in onVideoready", err);
          });
        peerConnection.onaddstream = event =>
          this.handleRemoteStreamAdded(event.stream, id, data.data);
        peerConnection.onicecandidate = event => {
          if (event.candidate) {
            this.chatService.VideoCandidate(id, event.candidate);
          }
        };
      }
    });

/ *关于视频优惠* /

this.chatService.onVideoOffer().subscribe((data: any) => {
      console.log("in offer socket event", data);
      let peerConnection: any = null;
      peerConnection = new RTCPeerConnection(this.config);
      this.peerConnections[data.socketId] = peerConnection;
      peerConnection.addStream(this.localStream);
      peerConnection
        .setRemoteDescription(data.message)
        .then(() => peerConnection.createAnswer())
        .then(sdp => peerConnection.setLocalDescription(sdp))
        .then(() => {
          console.log(
            "login person id",
            this.utilService.getCurrentLoginUserProfileId()
          );
          let answerData = {};
          answerData = {
            roomId: this.roomId,
            answeringUser: this.utilService.getCurrentLoginUserProfileId()
          };
          this.chatService.VideoAnswer(
            data.socketId,
            peerConnection.localDescription,
            answerData
          );
        });
      peerConnection.onaddstream = event =>
        this.handleRemoteStreamAdded(event.stream, data.socketId, data.data);
      peerConnection.onicecandidate = event => {
        if (event.candidate) {
          this.chatService.VideoCandidate(data.socketId, event.candidate);
        }
      };
    });

/ *关于视频答案* /

  this.chatService.onVideoAnswer().subscribe((data: any) => {
      this.peerConnections[data.socketId].setRemoteDescription(data.message);
    });

/ *启动屏幕共享的功能* /

  startScreenShare() {
    navigator.mediaDevices["getDisplayMedia"](this.screenContraints)
      .then(stream => {
        this.isScreenShare = true;
        console.log("in start screen share stream", stream);
        this.screenShareStream = stream;
        if (stream) {
          this.getUserMediaSuccess(stream);
          stream.oninactive = () => {
            this.isScreenShare = false;

            if (!this.hangedUpWhileSSActive) {
              // checks if the user wants to hang up or wants to continue with the video streaming
              console.log('screen share failed');
              navigator.mediaDevices
                .getUserMedia(this.constraints)
                .then(stream => {
                  this.getUserMediaSuccess(stream);
                })
                .catch(err => {
                  /* handle the error */
                  console.log("in media err");
                  this.getUserMediaError(err);
                });
            }
          };
        }
      })
      .catch(err => {
        this.getUserMediaError(err);
      });
  }

/ *音频流和屏幕共享流的约束* /

this.config = {
      iceServers: [
        {
          urls: ["stun:stun.l.google.com:19302"]
        }
      ]
    };

    this.constraints = {
      audio: { echoCancellation: true },
      video: false
    };

    this.screenContraints = {
      audio: false,
      video: true
    };

请让我知道我在哪里做错了。我希望并非没有可能在音频流中进行屏幕共享。

0 个答案:

没有答案