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工作流程

Python

// 推流拉流过程
/**
  * 推流端获取视频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

Python




  
  
  推流


  
  
    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 = (event)=>{<!-- -->
        if(event.candidate)ws.send(JSON.stringify({<!-- -->type:'candidate',candidate:event.candidate,id:pullId}))
      }
      // 创建offer
      pushRtcCon.createOffer().then(offer=>{<!-- -->
        console.log(offer)
        // 设置推流LocalDescription
        pushRtcCon.setLocalDescription(offer).then(()=>{<!-- --> console.log('推流设置LocalDescription成功');});
        // offer信息发送给拉流
        ws.send(JSON.stringify({<!-- -->type:'offer',id:pullId,offer}))
      });
    }
    // 开启websocket服务
    ws.addEventListener('open',()=>{<!-- -->
      // 初始化推流通道
      ws.send(JSON.stringify({<!-- -->type:'push_init'}))
      console.log('websocket连接成功')
    });
    // 接收wenbscoket信息
    ws.addEventListener('message', (event) => {<!-- -->
      let data = JSON.parse(event.data);
      console.log(data)
      // 接收到拉流传来的answer 设置推流RemoteDescription
      if(data.type == 'answer')pushRtcCon.setRemoteDescription(data.answer).then(()=>{<!-- --> console.log('推流设置RemoteDescription成功');});
      // 接收拉流candidate 推流rtc connection 添加IceCandidate
      if(data.type == 'candidate'&&data.candidate)pushRtcCon.addIceCandidate(data.candidate).then(()=>{<!-- --> console.log('推流添加candidate成功');});
      // 接收拉流开启消息 开始推流
      if(data.type == 'pull_start')startPush(data.id);
    })

四、拉流

pull.html



  
  
  Document


  
  拉流

五、socket服务

安装依赖

npm init
npm install nodejs-websocket -S

index.js

const ws = require('nodejs-websocket');
const port = '1990';
// 推流通道  拉流通道
let wsPush,wsPull,pullPool={};
const server = ws.createServer((connection)=>{
  // websocket 连接接收数据
  connection.on('text',(msg)=>{
    let data = JSON.parse(msg);
    // 初始化推流websocket
    if(data.type == 'push_init')wsPush = connection;
    // 初始化拉流websocket
    if(data.type == 'pull_init')if(!pullPool[data.id]) pullPool[data.id] = connection;
    // 接收推流消息 发送给拉流
    if(connection == wsPush&&pullPool[data.id])pullPool[data.id].send(msg);
    // 接收拉流消息 发送给推流
    for(let key in pullPool){
      if(connection == pullPool[key]&&wsPush)wsPush.send(msg);
    }
  })
  // websocket 关闭
  connection.on('close',()=>{
    wsPush = null;wsPull = null;
    console.log('通道关闭')
  })
  // websocket 报错
  connection.on('err',(err)=>{
    wsPush = null;wsPull = null;
    console.log('通道报错：'+err)
  })
})
server.listen(port,console.log('ws启动成功，127.0.0.1:'+port));