标签: simple-peer

在寻找使用客户端到服务器模型（如 Discord）实现 WebRTC 之后，我得出的结论是，实现这一点的方法是拥有 2 个客户端——服务器和客户端。音频流可以叠加并以 1 个单流发送回用户。

后端/server.js

const clientPeer = new Peer({ initiator: true, wrtc });
    
clientPeer.on('connect', () => console.log('hi client, this is server'));
clientPeer.on('data', (data) => console.log('got a message from client peer: ', data));

前端/index.js

serverPeer.on('connect', () => console.log('Connected to server'));
serverPeer.on('stream', async (stream) => {
  const video = document.createElement('audio');

  ('srcObject' in video)
    ? video.srcObject = stream
    : video.src = window.URL.createObjectURL(stream);

  await video.play();
});

我将如何实现在客户端和服务器之间发送媒体流？

我希望你们一切都好

我是 webRTC 的初学者，很抱歉，如果我的问题感觉像菜鸟一样，但我想知道是否有任何正确的方法来关闭对等点之间的连接，特别是使用 simple-peer.js，期待您的精彩回复

这是我的示例反应代码，

 if (navigator.getUserMedia) {
            navigator.getUserMedia({ audio: { echoCancellation: true }, video: true }, stream => {

                let peer = new Peer({
                    initiator: this.props.isInitiator,
                    stream
                });

                this.localStream.current.srcObject = stream;
                this.localStream.current.play();

                peer.on('signal', (data) => {
                    socket.emit('offer', { data: JSON.stringify(data), conversation_id: this.props.conversation_id })
                });

                socket.on('offer', (data) => {
                    peer.signal(JSON.parse(data))
                })

                socket.on('DESTROY-VIDEO-CALL-SESSION', () => {
                    stream.getTracks().forEach(track => track.stop());
                    peer.removeAllListeners();
                    peer.destroy();
                });

                peer.on('stream', (streamData) => {
                    this.remoteStream.current.srcObject = streamData;
                    this.remoteStream.current.play();
                });

                this.setState({
                    endCall: () => {
                        socket.emit('VIDEO-CALL-ENDED', this.props.conversation_id);
                    }
                }) …

我正在创建一个系统，使用户能够在连接到同一 wifi 网络的设备之间共享文件。我想要一个所有已连接设备的列表，以便我可以选择要发送到的设备（使用 simplepeer JS）。

我已经创建了一个可以使用 simplepeer JS 共享文件的小程序

<p>Your id</p>
<div>
  <textarea id="yourId"></textarea>
</div>
<div><button id="connect_bt">Connect</button></div>

<div style="margin-bottom:20px;">
  <p>Other id</p>
  <div>
    <textarea id="otherId"></textarea>
  </div>
  <div></div>
</div>

<div>
  <textarea id="message_input"></textarea>
  <button id="send_message">Send message</button>
</div>

<pre id="messages"></pre>
<script src="simplepeer/simplepeer.min.js"></script>

var peer = new SimplePeer({
    initiator: location.hash === '#init',
    trickle: false
});

peer.on('signal', function(data) {
    document.getElementById('yourId').value = JSON.stringify(data);
});

document.getElementById('connect_bt')
        .addEventListener('click', function() {
            var other_id = JSON.parse(document.getElementById('otherId').value);
            peer.signal(other_id);
        });

document.getElementById('send_message')
        .addEventListener('click', function() {
            var message = document.getElementById('message_input').value;
            peer.send(message);
        });

peer.on('data', function(data) { …

我目前正在学习 WebRTC 并使用 simple-peer 和 React 和 Socket.io 的 npm 包。当我尝试致电用户时，就会显示此错误

_stream_readable.js:529 Uncaught ReferenceError: process is not defined
    at emitReadable (_stream_readable.js:529:1)
    at onEofChunk (_stream_readable.js:506:1)
    at readableAddChunk (_stream_readable.js:255:1)
    at Readable.push (_stream_readable.js:241:1)
    at index.js:448:1

我的 React 组件代码

    const myVideoElement = useRef();
    const peerVideoElement = useRef();
    const chatInfo=useRef();
    const peerStream=useRef();

function startCall(){
    const peer=new SimplePeer({
      initiator:true,
      trickle:false,
      stream:stream,
    })

    peer.on('signal',(data)=>{
      socket.emit('calluser',{userToCall:chatInfo.current.userToCall,url:chatInfo.current.url,signalData:data,from:userId});
    });
    peer.on('stream',(stream)=>{
      if(peerVideoElement.current){
        peerVideoElement.current.srcObject=stream;
      }

      socket.on('callaccepted',(data)=>{
        peer.signal(data);
      })
    })
  }

function acceptCall(){
  setIsCallAccepted(true);
    const peer = new SimplePeer({
      initiator: false,
      trickle: false, …

我正在尝试使用简单对等库来建立浏览器到浏览器的 WebRTC 连接（数据通道）。我的理解是（也许我有一些误解），为了让两个浏览器通过 WebRTC 连接，它们必须交换 SDP 数据并执行 NAT 遍历。为了做到这一点，可以实现一个 STUN 服务器。

在 simple-peer 库中，他们声明 simple-peer 没有实现信令协议，但它确实提供了一种提供 STUN/ICE 服务器的方法。考虑来自其网格示例的以下三个 HTML 文件：

peer1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Peer1</title>
</head>
<body>
<script src="../../js/simplepeer.min.js"></script>
<script>
    // These are peer1's connections to peer2 and peer3
    var peer2 = new SimplePeer({ initiator: true, config: {
            iceServers: [
                {urls: 'stun:stun.a-mm.tv:3478'}
            ]
        } })
    var peer3 = new SimplePeer({ initiator: true, config: {
            iceServers: [
                {urls: 'stun:stun.a-mm.tv:3478'}
            ]
        } })

    peer2.on('signal', data => {
        console.log(data) …

let file = fileUpload.files[0];
let offset = 0;
let chunkSize = 1024*1024*16;


file.arrayBuffer().then((buffer) => {
            
 while(buffer.byteLength){
                
       const chunk = buffer.slice(0, chunkSize);
       buffer = buffer.slice(chunkSize, buffer.byteLength);
      dataChannel.send(chunk);
  }
})

它适用于小文件，但适用于大文件。