webrtc学习----前端推流拉流，局域网socket版，一对多

最新推荐文章于 2025-04-11 10:50:17 发布

longlongago~~

最新推荐文章于 2025-04-11 10:50:17 发布

阅读量2.7k

点赞数 21

分类专栏： webrtc推流拉流文章标签： webrtc 前端音视频 websocket node.js

本文链接：https://blog.youkuaiyun.com/weixin_44434938/article/details/144404558

版权

提示：局域网socket版，一对多

文章目录

@[TOC](文章目录)

前言

一、教程

二、webrtc工作流程

三、推流端

四、拉流

五、socket服务

六、效果

七、备注

总结

前言

‌‌‌‌‌WebRTC（Web Real-Time Communication）‌是一种实时通讯技术，允许网络应用或站点在不借助中间媒介的情况下，建立浏览器之间的点对点（Peer-to-Peer）连接，实现视频流、音频流或其他任意数据的传输。WebRTC的核心功能包括音视频的采集、编解码、网络传输和显示等‌

WebRTC的技术特点
‌1、实时通信‌：WebRTC专注于实时通信，包括音频、视频和其他数据传输‌。
‌2、点对点通信‌：WebRTC支持点对点通信，即两个浏览器之间直接建立连接，无需通过中间服务器‌。
‌3、多媒体引擎‌：WebRTC包含一个多媒体引擎，处理音频和视频流，并提供丰富的API和协议‌。
4‌、NAT穿越‌：WebRTC提供机制，使得在NAT（Network Address Translation）和防火墙等网络设备背后进行通信更为容易‌。
‌5、TURN服务器‌：当P2P连接无法建立时，WebRTC会利用TURN服务器进行数据中转，确保通信的稳定性‌

一、教程

webrtc文档

二、webrtc工作流程

// 推流拉流过程
/**
  * 推流端获取视频stream
  * 推流端生成offer  
  * 推流端通过offer设置推流LocalDescription
  * 推流端发送offer给(拉)流端
  * (拉)流端接收offer
  * (拉)流端通过offer设置(拉)流端RemoteDescription
  * (拉)流端生成answer
  * (拉)流端通过answer设置(拉)流端LocalDescription
  * (拉)流端发送answer给推流端
  * 推流端接收answer设置推流端RemoteDescription
  * 推流端发送candidate(video,audio各一次)
  * (拉)流端接收candidate
  * (拉)流端发送candidate(video,audio各一次)
  * 推流端接收candidate
  * **/

三、推流端

一个拉流RTCPeerConnection，对应一个推流RTCPeerConnection
X 个拉流RTCPeerConnection，对应X 个推流RTCPeerConnection

push.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>推流</title>
</head>
<body>
  <video id="webrtcVideo" autoplay></video>
  <script>
    const video = document.getElementById('webrtcVideo');
    // webscoket
    const ws = new WebSocket('ws://127.0.0.1:1990'); // 可换成局域网ip地址
    let videoStream;
    // 一个拉流RTCPeerConnection对应一个推流RTCPeerConnection，xx个拉流RTCPeerConnection，对应xx个推流RTCPeerConnection
    const pushPool = {
   };
    // rtc connection
    let pushRtcCon;
    // 打开摄像头，video标签播放视频流
    const getStream = async () => {
   
      if(!navigator.mediaDevices||!navigator.mediaDevices.getUserMedia)console.log('不支持：getUserMedia');
      const stream = await navigator.mediaDevices.getUserMedia({
   video:true});
      video.srcObject = stream;
      videoStream = stream;
    }
    getStream();
    // 开始推流
    const startPush = (pullId) => {
   
      if(!pushPool[pullId])pushPool[pullId] = pushRtcCon = new RTCPeerConnection();
      // rtc connection 添加track
      videoStream.getVideoTracks().forEach(track => {
   
        pushRtcCon.addTrack(track,videoStream);
      });
      // 监听icecandidate
      pushRtcCon.onicecandidate