使用 WebRTC 和 Node.js 构建 P2P 视频聊天应用程序

本文将介绍如何使用 WebRTC 和 Node.js 构建点对点视频聊天应用程序。

更多关于Node.js的文章

面向 Node.js 开发人员的 Apache Kafka

在 Node.js 中实现 Redis 发布/订阅

完整的源代码可以在这里找到。

什么是点对点网络？

点对点网络是一种客户端充当服务器的网络。点对点网络中不存在中心化服务器。

要了解更多关于点对点应用程序的信息

构建点对点应用程序

既然点对点应用不需要服务器，你可能会想Node.js在这里扮演什么角色呢？我们用Node.js构建一个点对点应用，并在浏览器中运行它。

首先，有一些 npm 包可以帮助在 Node.js 中构建点对点应用程序。

• 信号中心
• webRTC-swarm
• 简单对等

主要目的是将一个节点与其他节点连接起来。我们需要告诉其他节点如何与我们的节点连接。为了解决这个问题，我们使用SignalHub。

SignalHub 将消息发送给另一个节点以建立连接。webRTC -swarm通过 SignalHub 连接。Simple-peer 将浏览器设置为对等节点。

让我们使用 webRTc Swarm 和 simple-peer 构建一个视频聊天应用程序。

创建一个名为 videoplayer.js 的文件，并添加以下代码

module.exports = Player

function Player (data) {
  data = data || {}
  this.color = data.color || randomColor()
  this.x = data.x;
  this.y = data.y;
  this.top = data.top;
  this.left = data.left;
  this.name = data.name;
  this.element = document.createElement('video')
  Object.assign(this.element.style, {
    width: '40%',
    height: '50%',
    position: 'absolute',
    top: data.top+'px',
    left: data.left+'px',
    backgroundColor: this.color
  })
  document.body.appendChild(this.element)
}

Player.prototype.addStream = function (stream) {
  this.element.srcObject = stream
  this.element.play()
}

Player.prototype.update = function (data) {
  data = data || {}
  this.x = data.x || this.x
  this.y = data.y || this.y
  Object.assign(this.element.style, {
    top: this.y + 'px',
    left: this.x + 'px'
  })
}

function randomColor () {
  return '#' + Math.random().toString(16).substr(-6)
}

视频播放器在浏览器中创建一个视频元素。我们使用 WebRTC 通信来传输和操作 DOM 元素。

创建一个名为 index.js 的文件，并添加以下代码

navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(function (stream) {
    //This is used for Signaling the Peer    
    const signalhub = require('signalhub')
    const createSwarm = require('webrtc-swarm')
    //Creates the Signal rub running in the mentioned port
    const hub = signalhub('my-game', [
      'http://localhost:8080'
    ])
    const swarm = createSwarm(hub, {
      stream: stream
    })
    //Creates a video player
    const Player = require('./videoplayer.js')
    const you = new Player({ x: 0, y : 0 ,color : 'black',left : 0,top : 0})
    you.addStream(stream)
  
    const players = {}
    swarm.on('connect', function (peer, id) {
      if (!players[id]) {
        players[id] = new Player({
            x : 300,
            y : 0,
            left : 200,
            top : 0,
            color : 'red'
        })
        peer.on('data', function (data) {
          data = JSON.parse(data.toString())
          players[id].update(data)
        })
        players[id].addStream(peer.stream)
      }
    })
    //On webRTC Disconnets
    swarm.on('disconnect', function (peer, id) {
      if (players[id]) {
        players[id].element.parentNode.removeChild(players[id].element)
        delete players[id]
      }
    })

  
    setInterval(function () {
        console.log("Interval Call");
      you.update()
      
      const youString = JSON.stringify(you)
      swarm.peers.forEach(function (peer) {
        peer.send(youString)
      })
    }, 100)
  })

首先，我们创建一个 webRTC 集群并将其映射到 SignalHub。

swarm.on('connect',function(peer,id){
     peer.on('data',function(data){
         //On receiving the data from peers, do some actions
    });
});

之后，集群监听器会监听连接。当其他对等节点连接时，我们开始监听该对等节点发送的数据。

 swarm.peers.forEach(function (peer) {
        peer.send("Data to Send")
})

在 WebRTC 集群中，我们找到对等节点并将数据发送到所有其他节点。

点对点视频流

主要目的是播放视频。我们需要从 Web API 获取媒体资源。您可以使用以下代码启用此功能。

navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(function (stream) {
    //Gets Media Access
});

之后，您需要将流添加到 webRTC 集群中，以便访问对等网络中的数据。

 const swarm = createSwarm(hub, {
      stream: stream
    })

最后，你需要将流添加到视频元素中。

Player.prototype.addStream = function (stream) {
  this.element.srcObject = stream
  this.element.play()
}

运行应用程序

要运行该应用程序，您需要先运行 SignalHub 并运行服务器。

$ npm run signalhub
$ npm run start

演示

使用 WebRTC 和 Node.js 构建 P2P 视频聊天应用程序

本文引用自此视频