Problem when addTrack audio/video to peer connection in React.js WebRTC client using pion SFU server

266 Views Asked by At

I implemented a client in react.js for pion sfu server & When adding only one track to peerConnection with the addtrack() function I don't have a problem with webRTC communication, but when I add audio and video with addtrack to peerConection & after going through the WebRTC steps, I get an sdp error from the server. I would also say that I have no problem receiving audio and video from other client, when I only added one track to the peer connection and the webRTC connection with our other client (developed mobile application with Flutter) is established;that's mean ontTrack() function and the stream received in that events can be show/played correctly in my react.js web app ,but when I send audio and video it doesn't work properly.

  • in my research, maybe the problem is with SDP format but pion resolved that : https://github.com/pion/webrtc/issues/2193

  • also form article this lines not worked

    new RTCPeerConnection({sdpSemantics:'unified-plan'})

    new RTCPeerConnection({sdpSemantics:'plan-b'});

  1. initial RTCPeerConnection

const peerConnection = new RTCPeerConnection({/* sdpSemantics:"plan-b", */
    iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
  });
  peerConnectionRef.current = peerConnection;

    peerConnectionRef.current.onicecandidate = (event) => {
      if (!event.candidate) {
                return;
      }
     
      sendJsonMessage({
        event: "candidate",
        data: JSON.stringify({
          sdpMLineIndex: event.candidate.sdpMLineIndex,
          sdpMid: event.candidate.sdpMid,
          candidate: event.candidate.candidate
        })
      });
    };
  1. initial medias and addTrack to peerconection :
  const stream = await navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true,
      });
      stream.getTracks().forEach((track) => {     
        peerConnectionRef.current.addTrack(track, stream);
      });

  1. this is part of on socket switch/cases of pion sfu singnaling :
 case "offer":

            let offer = JSON.parse(msg.data);
            if (!offer) {
              return
            } else {
              peerConnectionRef.current.setRemoteDescription(offer,
                function() {
                  console.log("Local description set successfully.");
                  // Perform some action after setting local description successfully
                },
                function(error) {
                  console.log("Failed to set local description: " + error.toString());
                  // Handle the error case if setting local description fails
                }
              ).then(()=>{
             /*   const AnswerConstraints = {
                offerToReceiveAudio: true,
                offerToReceiveVideo: true,
              }; */
              peerConnectionRef.current.createAnswer().then((answer)=>{
                peerConnectionRef.current.setLocalDescription(answer).then(()=>{
                  sendJsonMessage({
                    event: "answer",
                    data: JSON.stringify(answer),
                  });
                  
                })
               }).catch((error)=> {
                console.log("Failed to create answer: " + error.toString());
                // Handle the error case if creating answer fails
              });
             })
            }
            break;

            case "candidate":
              let candidate = JSON.parse(msg.data);
              if (!candidate) {
                return 
                );
              } else {
               // candidate.sdpMid = 0;
                peerConnectionRef.current.addIceCandidate(candidate)
                .then(() => {
                  console.log("Ice candidate added successfully.");
                })
                .catch((error) => {
                  console.error("Failed to add ice candidate:", error);
                });
                
              }
              break;
  1. SDP error from pion sfu server :
"v=0
o=- 3569239744585505191 1683204600 IN IP4 0.0.0.0
s=-
t=0 0
a=fingerprint:sha-256 FA:8D:71:9C:66:B7:8E:F7:DD:93:14:91:A9:AC:55:9F:B6:89:96:4C:8F:F3:1E:E2:EE:50:0E:5A:09:67:27:05
a=extmap-allow-mixed
a=group:BUNDLE 0 1
m=video 9 UDP/TLS/RTP/SAVPF 96 97 98 99 100 101 102 121 127 120 125 107 108 109 123 118 116
c=IN IP4 0.0.0.0
a=setup:actpass
a=mid:0
a=ice-ufrag:cZQGCfSYBcmVenYu
a=ice-pwd:WgkUwSIvDbfJdzkQfcLjiWtBdpZrcPjw
a=rtcp-mux
a=rtcp-rsize
a=rtpmap:96 VP8/90000
a=rtcp-fb:96 goog-remb 
a=rtcp-fb:96 ccm fir
a=rtcp-fb:96 nack 
a=rtcp-fb:96 nack pli
a=rtpmap:97 rtx/90000
a=fmtp:97 apt=96
a=rtpmap:98 VP9/90000
a=fmtp:98 profile-id=0
a=rtcp-fb:98 goog-remb 
a=rtcp-fb:98 ccm fir
a=rtcp-fb:98 nack 
a=rtcp-fb:98 nack pli
a=rtpmap:99 rtx/90000
a=fmtp:99 apt=98
a=rtpmap:100 VP9/90000
a=fmtp:100 profile-id=1
a=rtcp-fb:100 goog-remb 
a=rtcp-fb:100 ccm fir
a=rtcp-fb:100 nack 
a=rtcp-fb:100 nack pli
a=rtpmap:101 rtx/90000
a=fmtp:101 apt=100
a=rtpmap:102 H264/90000
a=fmtp:102 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42001f
a=rtcp-fb:102 goog-remb 
a=rtcp-fb:102 ccm fir
a=rtcp-fb:102 nack 
a=rtcp-fb:102 nack pli
a=rtpmap:121 rtx/90000
a=fmtp:121 apt=102
a=rtpmap:127 H264/90000
a=fmtp:127 level-asymmetry-allowed=1;packetization-mode=0;profile-level-id=42001f
a=rtcp-fb:127 goog-remb 
a=rtcp-fb:127 ccm fir
a=rtcp-fb:127 nack 
a=rtcp-fb:127 nack pli
a=rtpmap:120 rtx/90000
a=fmtp:120 apt=127
a=rtpmap:125 H264/90000
a=fmtp:125 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f
a=rtcp-fb:125 goog-remb 
a=rtcp-fb:125 ccm fir
a=rtcp-fb:125 nack 
a=rtcp-fb:125 nack pli
a=rtpmap:107 rtx/90000
a=fmtp:107 apt=125
a=rtpmap:108 H264/90000
a=fmtp:108 level-asymmetry-allowed=1;packetization-mode=0;profile-level-id=42e01f
a=rtcp-fb:108 goog-remb 
a=rtcp-fb:108 ccm fir
a=rtcp-fb:108 nack 
a=rtcp-fb:108 nack pli
a=rtpmap:109 rtx/90000
a=fmtp:109 apt=108
a=rtpmap:123 H264/90000
a=fmtp:123 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=640032
a=rtcp-fb:123 goog-remb 
a=rtcp-fb:123 ccm fir
a=rtcp-fb:123 nack 
a=rtcp-fb:123 nack pli
a=rtpmap:118 rtx/90000
a=fmtp:118 apt=123
a=rtpmap:116 ulpfec/90000
a=recvonly
m=audio 9 UDP/TLS/RTP/SAVPF 111 9 0 8
c=IN IP4 0.0.0.0
a=setup:actpass
a=mid:1
a=ice-ufrag:cZQGCfSYBcmVenYu
a=ice-pwd:WgkUwSIvDbfJdzkQfcLjiWtBdpZrcPjw
a=rtcp-mux
a=rtcp-rsize
a=rtpmap:111 opus/48000/2
a=fmtp:111 minptime=10;useinbandfec=1
a=rtpmap:9 G722/8000
a=rtpmap:0 PCMU/8000
a=rtpmap:8 PCMA/8000
a=recvonly
"

Thanks in advance!

0

There are 0 best solutions below