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

提示：局域网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

  
  
  推流


  
  
    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