当前位置：首页 > 文章列表 > Golang > Go问答 > pion webrtc 和react-native-webrtc 不工作

pion webrtc 和react-native-webrtc 不工作

来源：stackoverflow 2024-04-05 14:03:37 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

欢迎各位小伙伴来到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 (
    <View style={styles.container}>
      <StatusBar style="auto" />
      {streams.map(({stream, id}) => (
          <RTCView key={id} streamURL={stream.toURL()} />
        ))}
    </View>
  );
}

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