WebRTC简介及应用

WebRTC(Web Real-Time Communication)是一种支持浏览器和移动设备 进行实时音视频通信的技术,无需安装插件或额外的软件。它是一个开放标准,最初由Google推动,并被W3C(万维网联盟)和IETF(互联网工程任务组)标准化。

WebRTC 的核心功能:

  1. 音视频采集(获取本地摄像头、麦克风)

  2. 音视频编解码(支持VP8/VP9/H.264等视频编码,Opus/G.711等音频编码)

  3. P2P(点对点)传输(通过UDP和NAT穿透技术进行低延迟通信)

  4. 数据通道(DataChannel)(可用于传输文本、文件等数据)

WebRTC 的主要 API:

  • getUserMedia:获取本地音视频流

  • RTCPeerConnection:建立点对点连接

  • RTCDataChannel:进行P2P数据传输

WebRTC 的应用场景:

  • 视频通话(如 Google Meet、Zoom)

  • 直播推流(结合 WebRTC + Media Server)

  • 远程协作(如 Google Docs 的多人编辑)

  • 在线教育、远程医疗

  • 物联网(IoT)设备的远程控制

在 Vue 2 前端项目中使用 WebRTC,可以实现视频通话、音视频流传输、屏幕共享等功能。以下是 WebRTC 在 Vue 2 项目中的基本实现步骤:


1. WebRTC 基本概念

WebRTC 提供了三个核心 API:

  • getUserMedia():获取摄像头、麦克风权限

  • RTCPeerConnection:建立 P2P 连接,传输音视频

  • RTCDataChannel:传输文本、文件等数据

创建 WebRTC.vue 组件

javascript 复制代码
<template>
  <div>
    <h2>WebRTC 视频采集</h2>
    <video ref="localVideo" autoplay playsinline></video>
    <button @click="startCamera">启动摄像头</button>
    <button @click="stopCamera">关闭摄像头</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      localStream: null,
    };
  },
  methods: {
    async startCamera() {
      try {
        this.localStream = await navigator.mediaDevices.getUserMedia({
          video: true,
          audio: true,
        });
        this.$refs.localVideo.srcObject = this.localStream;
      } catch (error) {
        console.error("获取摄像头失败:", error);
      }
    },
    stopCamera() {
      if (this.localStream) {
        this.localStream.getTracks().forEach(track => track.stop());
        this.localStream = null;
      }
    },
  },
};
</script>

效果 :点击按钮可以打开/关闭摄像头,并在 <video> 组件中显示

实现 WebRTC P2P 连接

如果想要实现点对点(P2P)通信 ,需要使用 RTCPeerConnection,并结合 WebSocket / Socket.io 进行信令交换。

创建 PeerConnection.vue 组件

javascript 复制代码
<template>
  <div>
    <h2>WebRTC P2P 视频通话</h2>
    <video ref="localVideo" autoplay playsinline></video>
    <video ref="remoteVideo" autoplay playsinline></video>
    <button @click="startCall">开始通话</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      localStream: null,
      peerConnection: null,
      remoteStream: null,
    };
  },
  methods: {
    async startCall() {
      // 1. 获取本地视频流
      this.localStream = await navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true,
      });
      this.$refs.localVideo.srcObject = this.localStream;

      // 2. 创建 RTCPeerConnection
      this.peerConnection = new RTCPeerConnection();

      // 3. 添加本地流到 PeerConnection
      this.localStream.getTracks().forEach(track => {
        this.peerConnection.addTrack(track, this.localStream);
      });

      // 4. 监听远程流
      this.peerConnection.ontrack = event => {
        if (!this.remoteStream) {
          this.remoteStream = new MediaStream();
          this.$refs.remoteVideo.srcObject = this.remoteStream;
        }
        this.remoteStream.addTrack(event.track);
      };

      // 5. 创建 offer(本地 SDP)
      const offer = await this.peerConnection.createOffer();
      await this.peerConnection.setLocalDescription(offer);

      console.log("本地 SDP:", offer);
      // 这里需要使用 WebSocket / Socket.io 发送 SDP 给远程端
    },
  },
};
</script>

效果

  • 获取本地视频流,并在 <video> 中播放

  • 创建 WebRTC 连接,并监听远程视频流

  • 生成 SDP(用于信令交换)

信令服务器(使用 WebSocket)

WebRTC 需要信令服务器 来交换 SDP 和 ICE 候选信息。可以使用 WebSocket 或 Socket.io 来实现:

后端(Node.js + WebSocket)
javascript 复制代码
const WebSocket = require("ws");
const server = new WebSocket.Server({ port: 3000 });

server.on("connection", ws => {
  ws.on("message", message => {
    console.log("收到消息:", message);
    server.clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

前端(Vue 使用 WebSocket 发送 SDP)

javascript 复制代码
const socket = new WebSocket("ws://localhost:3000");

this.peerConnection.onicecandidate = event => {
  if (event.candidate) {
    socket.send(JSON.stringify({ candidate: event.candidate }));
  }
};

socket.onmessage = async message => {
  const data = JSON.parse(message.data);
  if (data.sdp) {
    await this.peerConnection.setRemoteDescription(data.sdp);
    if (data.sdp.type === "offer") {
      const answer = await this.peerConnection.createAnswer();
      await this.peerConnection.setLocalDescription(answer);
      socket.send(JSON.stringify({ sdp: answer }));
    }
  } else if (data.candidate) {
    await this.peerConnection.addIceCandidate(data.candidate);
  }
};

效果

  • 通过 WebSocket 服务器交换 SDP(Offer & Answer)

  • 传递 ICE 候选信息,实现 P2P 连接

3. WebRTC 进阶功能

屏幕共享

javascript 复制代码
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
this.$refs.localVideo.srcObject = stream;

数据通道(P2P 传输文本/文件)

javascript 复制代码
const dataChannel = peerConnection.createDataChannel("chat");
dataChannel.onmessage = event => console.log("收到消息:", event.data);
dataChannel.send("Hello WebRTC!");

4. WebRTC 在项目中的应用,例如风电项目中的应用

你可以用 WebRTC 实现:

  • 风场监控:远程视频直播,实时监测风机状态

  • 远程协作:风机运维人员可以通过 WebRTC 进行视频通话,远程指导维修

  • 数据传输 :通过 WebRTC RTCDataChannel 低延迟传输风机运行数据

总结

需求 方案
采集摄像头 getUserMedia()
P2P 音视频 RTCPeerConnection
远程信令 WebSocket / Socket.io
屏幕共享 getDisplayMedia()
数据传输 RTCDataChannel

P2P是什么?

P2P(Peer-to-Peer,点对点)是一种去中心化的通信模式,指的是两个或多个设备可以直接通信,而无需依赖中间服务器。在 WebRTC 中,P2P 主要用于实现点对点音视频通话、文件传输等功能。

P2P vs 传统客户端-服务器模式

模式 特点 示例
客户端-服务器(Client-Server) 需要一个中心服务器来转发数据 HTTP 请求、WebSocket 聊天、直播服务器
P2P(Peer-to-Peer) 设备之间直接通信,无需服务器转发 WebRTC 视频通话、种子下载(BitTorrent)

P2P 的优点

  • 低延迟:数据直接传输,无需绕服务器

  • 节省带宽:不占用服务器流量

  • 去中心化:无须依赖单点服务器

P2P 的挑战

  • NAT 穿透:有些网络环境(如 4G、WiFi)可能会阻止 P2P 连接

  • 信令交换:需要 WebSocket / Socket.io 来建立连接


📌 P2P 在 WebRTC 中的作用

WebRTC 通过 RTCPeerConnection 实现 P2P 连接:

  1. 本地设备 获取摄像头/麦克风数据

  2. 信令服务器 交换 SDP 和 ICE 候选信息

  3. 建立 P2P 连接,直接传输音视频流

示例:P2P 连接代码

javascript 复制代码
const peer = new RTCPeerConnection();

// 监听 ICE 候选信息
peer.onicecandidate = event => {
  if (event.candidate) {
    sendToServer({ candidate: event.candidate });
  }
};

// 监听远程视频流
peer.ontrack = event => {
  document.querySelector("#remoteVideo").srcObject = event.streams[0];
};

// 发送音视频流
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    document.querySelector("#localVideo").srcObject = stream;
    stream.getTracks().forEach(track => peer.addTrack(track, stream));
  });

实现效果

  • 设备 A 和 B 通过 WebRTC 直接交换音视频数据,无需服务器转发

  • 服务器只负责信令交换 ,实际音视频数据是P2P 直连

相关推荐
HtwHUAT23 分钟前
实验四 Java图形界面与事件处理
开发语言·前端·python
利刃之灵24 分钟前
01-初识前端
前端
codingandsleeping29 分钟前
一个简易版无缝轮播图的实现思路
前端·javascript·css
天天扭码32 分钟前
一分钟解决 | 高频面试算法题——最大子数组之和
前端·算法·面试
全宝1 小时前
🌏【cesium系列】01.vue3+vite集成Cesium
前端·gis·cesium
拉不动的猪2 小时前
简单回顾下插槽透传
前端·javascript·面试
烛阴2 小时前
Fragment Shader--一行代码让屏幕瞬间变黄
前端·webgl
爱吃鱼的锅包肉2 小时前
Flutter路由模块化管理方案
前端·javascript·flutter
风清扬雨2 小时前
Vue3具名插槽用法全解——从零到一的详细指南
前端·javascript·vue.js
海盗强3 小时前
Vue 3 常见的通信方式
javascript·vue.js·ecmascript