pion webrtc 和react-native-webrtc 不工作

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《pion webrtc 和react-native-webrtc 不工作》，这篇文章主要讲到等等知识，如果你对Golang相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

我有这个 sfu 服务器：https://github.com/pion/example-webrtc-applications/tree/master/sfu-ws

我为音频会议制作了浏览器实现，它正在工作。 我已经使用react-native-webrtc创建了react native实现，它正在部分工作。

如果我连接 1 个浏览器和 1 个手机 - 就可以了。

如果我连接另一个浏览器，当向移动设备发送新对等方的报价时，移动设备会创建一个答案。答案有 2 个具有不同值的 ice-ufrag。 在浏览器中我看到这些值是相同的。

服务器失败并显示消息：使用多个冲突的ice-ufrag值调用setremotedescription

我的测试反应本机代码：

import { StatusBar } from 'expo-status-bar';
import React, {
  useContext,
  useEffect,
  useCallback,
  useState,
  useRef,
} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {RTCPeerConnection, RTCView, mediaDevices} from 'react-native-webrtc';


export default function App() {
     const [streams, setStreams] = useState([])

useEffect(() => {mediaDevices.getUserMedia({ video: false, audio: true })
    .then(stream => {
        var ws = new WebSocket('ws://192.168.0.193:6060/ws');

        var config = {
            iceServers: [{
                urls: ["stun:stun1.l.google.com:19302"]
            },
            ]
        };
        pc = new RTCPeerConnection(config)

        pc.onaddstream = function (event) {
            setStreams((old) => [
                ...old,
                {
                  stream: event.stream,
                  id: event.stream.id,
                },
              ]);
        }

        ws.onopen = function (){
            ws.send(JSON.stringify({"event": "webrtc.connect"}));
        }

        pc.onremovestream = (event) => {
          setStreams((old) => old.filter(({id}) => id !== event.stream.id));
        };

        pc.onicecandidate = e => {
            if (!e.candidate) {
                return
            }

            ws.send(JSON.stringify({event: 'candidate', data: JSON.stringify(e.candidate)}))
        }

        ws.onclose = function(evt) {
        }

        ws.onmessage = function(evt) {
            const dat = evt.data.split(/\r?\n/)
            for (let x = 0; x < dat.length; x++) {
                let msg = JSON.parse(dat[x])
                if (!msg) {
                    return console.log('failed to parse msg')
                }
                switch (msg.event) {
                    case 'offer':
                        let offer = JSON.parse(msg.data)
                        if (!offer) {
                            return console.log('failed to parse answer')
                        }
                        pc.setRemoteDescription(offer).then(a => {
                            pc.createAnswer({}).then(answer => {
                                pc.setLocalDescription(answer)
                                ws.send(JSON.stringify({event: 'answer', data: JSON.stringify(answer)}))
                            })
                        })
                        return

                    case 'candidate':
                        let candidate = JSON.parse(msg.data)
                        if (!candidate) {
                            return console.log('failed to parse candidate')
                        }

                        pc.addIceCandidate(candidate)
                }
            }
        }

        ws.onerror = function(evt) {
            console.log("WS ERROR: " + evt.data)
        }
    }).catch((error) => {
        console.log(error.data);
      });
}, []);

  return (
    
      
      {streams.map(({stream, id}) => (
          
        ))}
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

1. 添加第三个对等点时如何解决服务器问题？使用多个冲突的ice-ufrag值setremotedescription调用。

2. 我还注意到删除 rtcview 组件时出现了奇怪的行为。我预计不会收到任何音频并发送我的音频，但我收到了所有内容，但无法发送任何音频。我的轨迹未添加到其他对等点。

正确答案

我认为问题在于当前版本的react-native-webrtc正在使用PlanB。

billylindeman/react-native-webrtc 已更新为统一计划。我自己没有这样做过，但是在Pion Slack中看到了答案

今天带大家了解了的相关知识，希望对你有所帮助；关于Golang的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~