如果不在 wifi 上,Peerjs WebRTC 视频屏幕会变黑 - Javascript

问题描述

最近在使用 Peerjs WebRTC 技术进行视频通话的时候，发现当手机不在 wifi 网络上时，视频屏幕会变成黑色，无法正常显示对方视频而听到声音。

解决方案

经过查阅资料和测试，发现这个问题是因为 Peerjs WebRTC 技术在通过 P2P 技术进行视频传输时，手机必须连接在同一个 wifi 网络上，否则无法进行视频传输，故出现了上述情况。

解决这个问题有两个方案：

方案一：使用 NAT Traversal 技术

NAT Traversal 技术可以绕过 wifi 上的限制，让 Peerjs WebRTC 技术使用 P2P 技术进行视频传输时，不受 wifi 的限制。具体实现方法可以使用第三方库，如 STUN 和 TURN 等，这里以 STUN 为例：

const peer = new Peer({
  host: 'localhost',
  port: 9000,
  path: '/peerjs',
  config: {
    iceServers: [
      { urls: 'stun:stun.l.google.com:19302' },
      { urls: 'stun:global.stun.twilio.com:3478?transport=udp' },
    ]
  }
});

方案二：使用服务器进行代理转发

使用服务器进行代理转发可以使 Peerjs WebRTC 技术绕过 wifi 上的限制，但需要在服务器上搭建信令服务器和 STUN/TURN 服务器，较为复杂。

// 信令服务器代码
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require('socket.io');
const io = new Server(server);

io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});

const port = 9000;
server.listen(port, () => {
  console.log(`listening on *:${port}`);
});

// STUN/TURN 服务器代码
const PeerServer = require('peer').PeerServer;
const server = PeerServer({ port: 9000, path: '/peerjs' });

客户端代码：

const peer = new Peer({
  host: 'localhost',
  port: 9000,
  path: '/peerjs',
  secure: true
});

peer.on('open', (id) => {
  console.log('My peer ID is: ' + id);
  const conn = peer.connect('another-peers-id');
  conn.on('open', () => {
    conn.send('hi!');
  });
});

peer.on('connection', (conn) => {
  conn.on('data', (data) => {
    console.log(data);
  });
});

const getUserMedia =
  navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia;

getUserMedia({ video: true, audio: true }, (stream) => {
  const call = peer.call('another-peers-id', stream);
  call.on('stream', (remoteStream) => {
    // Show stream in some video/canvas element.
  });
}, (err) => {
  console.log('Failed to get local stream', err);
});

总结

Peerjs WebRTC 技术在使用 P2P 技术进行视频传输时，需要绕过 wifi 上的限制，可以使用 NAT Traversal 技术或者使用服务器进行代理转发来解决这个问题。具体实现可能复杂，需要根据实际情况选择合适的方法来解决。