前端使用WebRTC———局域网内单向通信

豆包啊啊

已于 2023-07-12 13:26:56 修改

阅读量985

点赞数 1

分类专栏：前端音视频文章标签：前端 webrtc 实时音视频

于 2023-07-12 13:06:53 首次发布

本文链接：https://blog.csdn.net/fjqgx/article/details/131679147

版权

前端音视频专栏收录该内容

13 篇文章 2 订阅

订阅专栏

在上一篇我们跑通了一个简单的WebRTCDemo，相当于WebRTC中的HelloWorld。在同一个页面中进行WebRTC通信，比较难看出效果，这次我们再进一步，进行一个局域网内的单向通信。一个页面推流，一个页面拉流。

效果

在这里插入图片描述

流程图

在这里插入图片描述

代码

以下是源码，也可以通过gitee直接获取代码

服务端

要注意server依赖了nodejs-websocket模块。

var ws = require("nodejs-websocket");


var pub_ws = null;
var sub_ws = null;


function start() {
  var msg = JSON.stringify({ type: "start" });
  pub_ws.send(msg);
}

var server = ws.createServer(function (conn) {
  // 收到websocket连接
  conn.on("text", function (str) {
    if (pub_ws === conn) {
      if (sub_ws) {
        sub_ws.send(str);
      }
    } else if (sub_ws === conn) {
      if (pub_ws) {
        pub_ws.send(str);
      }
    } else {
      let obj = JSON.parse(str);
      if (obj.type === 'publish') {
        pub_ws = conn;
        if (sub_ws) {
          start();
        }
      } else if (obj.type === 'subscribe') {
        sub_ws = conn;
        if (pub_ws) {
          start();
        }
      }
    }
  })

  conn.on("error", function (event) {

  });

  conn.on("close", function (code, reason) {
    if (conn === pub_ws) {
      console.log("remove pub")
      pub_ws = null;
    } else if (conn === sub_ws) {
      console.log("remove sub")
      sub_ws = null;
    }
  })
}).listen(9000);

推流端

推流页面需要用localhost访问，因为获取设备需要https或者localhost(127.0.0.1)才可以。获取设备部分可以参考获取浏览器麦克风、摄像头和屏幕共享
其中websoket server的ip写的是127.0.0.1，可以自行改成websocket server的局域网ip地址。

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>推流页面</title>
</head>

<body>
  <video id="localStream" style="width: 320px; height: 240px;" autoplay muted></video>
  <script>
    // 获取摄像头返回的MediaStream
    let localStream = null;

    // 显示本地画面的VideoElement
    let localVideo = document.getElementById("localStream");

    // 建立连接按钮
    let startBtn = document.getElementById("startBtn");

    // 推流用的MediaStream
    let pc_pub = new RTCPeerConnection();

    let ws = new WebSocket('ws://127.0.0.1:9000');
    ws.addEventListener('open', () => {
      // 通知server pub已经上线
      ws.send(JSON.stringify({
        type: "publish"
      }))
    })

    ws.addEventListener('message', (event) => {
      let msg = JSON.parse(event.data);
      switch (msg.type) {
        case "start":
          start();
          break;

        case "answer":
          pc_pub.setRemoteDescription(msg).then(() => {

          }).catch((err) => {

          })
          break;

        default:
          pc_pub.addIceCandidate(msg);
          break;
      }
    })

    pc_pub.addEventListener('icecandidate', (event) => {
      if (event.candidate) {
        ws.send(JSON.stringify(event.candidate));
      }
    })

    function start() {
      getDevice().then((mediaStream) => {
        pc_pub.addTrack(mediaStream.getVideoTracks()[0], mediaStream);
        pc_pub.createOffer().then((offer) => {
          pc_pub.setLocalDescription(offer).then(() => {
            ws.send(JSON.stringify(offer));
          }).catch((err) => {
            console.error('setLocalDescription error', err);
          })
        }).catch((err) => {
          console.error("create offer error", err);
        })
      }).catch((err) => {
        console.error("getDevice error", err);
      })
    }

    function getDevice() {
      return new Promise((resolve, reject) => {
        navigator.mediaDevices.getUserMedia({ video: true }).then((mediaStream) => {
          localVideo.srcObject = mediaStream;
          resolve(mediaStream);
        }).catch((err) => {
          reject(err);
        })
      })
    }
  </script>
</body>

</html>

推流端

其中websoket server的ip写的是127.0.0.1，可以自行改成websocket server的局域网ip地址。

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>推流页面</title>
</head>

<body>
  <video id="remoteStream" style="width: 320px; height: 240px;" autoplay muted></video>
  <button id="deviceBtn">打开本地摄像头</button>
  <button id="startBtn">建立连接</button>
  <script>
    // 显示本地画面的VideoElement
    let remoteStream = document.getElementById("remoteStream");

    // 订阅流用的Peerconnection
    let pc_sub = new RTCPeerConnection();

    let ws = new WebSocket('ws://127.0.0.1:9000');
    ws.addEventListener('open', () => {
      // 通知server pub已经上线
      ws.send(JSON.stringify({
        type: "subscribe"
      }))
    })

    ws.addEventListener('message', (event) => {
      let msg = JSON.parse(event.data);
      switch (msg.type) {
        case "start":
          break;

        case "offer":
          pc_sub.setRemoteDescription(msg).then(() => {
            pc_sub.createAnswer().then((answer) => {
              pc_sub.setLocalDescription(answer).then(() => {
                ws.send(JSON.stringify(answer));
              }).catch((err) => {

              })
            }).catch((err) => {
              console.error('create answer error', err);
            })
          }).catch((err) => {
            console.error('setRemoteDescription error', err);
          })
          break;

        default:
          pc_sub.addIceCandidate(msg);
          break;
      }
    })

    pc_sub.addEventListener('icecandidate', (event) => {
      if (event.candidate) {
        ws.send(JSON.stringify(event.candidate));
      }
    })

    pc_sub.addEventListener('track', (event) => {
      remoteStream.srcObject = event.streams[0];
    })

  </script>
</body>

</html>

其他

如果你也是专注前端多媒体或者对前端多媒体感兴趣，可以搜索微信公众号"前端多媒体"

豆包啊啊

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
1
评论
前端使用WebRTC———局域网内单向通信

在我们跑通了一个简单的WebRTCDemo，相当于WebRTC中的HelloWorld。在同一个页面中进行WebRTC通信，比较难看出效果，这次我们再进一步，进行一个局域网内的单向通信。一个页面推流，一个页面拉流。
复制链接

扫一扫