• 使用js搭建简易的WebRTC实现视频直播

    1. 首先需要一个信令服务器，我们使用nodejs来搭建。两个端：发送端和接收端。
    2. 我的目录结构如下图：
    3. 流程
      1. 创建一个文件夹 WebRTC-Test。
      2. 进入文件夹中，新建一个node的文件夹。
      3. 使用终端并进入node的目录下，使用 
        npm init

        创建package.json。

      4. 新建server.js，复制一下代码 
        1. const app = require('express')();
        2. const wsInstance = require('express-ws')(app);
        3.  
        4. const cors = require('cors');
        5. app.use(cors({ origin: 'http://localhost:3000' }));
        6.  
        7. app.ws('/', ws => {
        8. 	ws.on('message', data => {
        9. 		// 未做业务处理，收到消息后直接广播
        10. 		wsInstance.getWss().clients.forEach(server => {
        11. 			if (server !== ws) {
        12. 				server.send(data);
        13. 				console.log(data,)
        14. 			}
        15. 		});
        16. 	});
        17. });
        18.  
        19. console.log("服务启动： http://localhost:8080");
        20. app.listen(8080, '0.0.0.0');
      5. 下载信令服务器的依赖。 
        1. npm install express;
        2. npm install express-ws;
        3. npm install cors;
      6. 使用node server.js启动node的服务。
      7. 准备接收方的代码（receive.html）。 
        1. html>
        2. <html lang="zh-CN">
        3.  
        4. <head>
        5.     <meta charset="UTF-8">
        6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
        7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
        8.     <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
        9.     <title>Receivertitle>
        10. head>
        11.  
        12. <body>
        13.     <video autoplay id="remote">video>
        14. body>
        15. <script>
        16.     const remoteVideo = document.querySelector('#remote')
        17.  
        18.     const socket = new WebSocket('ws://localhost:8080');
        19.     socket.onopen = function () {
        20.         console.log("Socket Success")
        21.     }
        22.     let buddy = new RTCPeerConnection()
        23.  
        24.  
        25.     // 如果接收到对方的视频
        26.     socket.onmessage = function (e) {
        27.         const { type, sdp, iceCandidate } = JSON.parse(e.data)
        28.         console.log(type)
        29.         switch (type) {
        30.             case "offer":
        31.                 buddy.setRemoteDescription(
        32.                     new RTCSessionDescription({ type, sdp })
        33.                 )
        34.                 buddy.createAnswer().then(answer => {
        35.                     buddy.setLocalDescription(answer)
        36.                     socket.send(JSON.stringify(answer))
        37.                 })
        38.                 break;
        39.  
        40.             case "offer_ice":
        41.                 buddy.addIceCandidate(iceCandidate)
        42.                 break;
        43.  
        44.             default:
        45.                 break;
        46.         }
        47.     }
        48.  
        49.     buddy.ontrack = function (e) {
        50.         remote.srcObject = e.streams[0]
        51.     }
        52.  
        53.     buddy.onicecandidate = function (e) {
        54.         if (e.candidate) {
        55.             socket.send(JSON.stringify({
        56.                 type: "answer_ice",
        57.                 iceCandidate: e.candidate
        58.             }))
        59.         }
        60.     }
        61.  
        62. script>
        63.  
        64. html>
      8. 准备发送方的代码（send.html）。 
        1. html>
        2. <html lang="zh-CN">
        3.  
        4. <head>
        5.     <meta charset="UTF-8">
        6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
        7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
        8.     <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
        9.     <title>Sendtitle>
        10. head>
        11.  
        12. <body>
        13.     <script>
        14.         const socket = new WebSocket('ws://localhost:8080');
        15.         socket.onopen = function () {
        16.             console.log("Socket Success")
        17.         }
        18.         let peer = new RTCPeerConnection()
        19.  
        20.         navigator.mediaDevices.getUserMedia({
        21.             video: true,
        22.             audio: true
        23.         }).then(stream => {
        24.             stream.getTracks().forEach(track => {
        25.                 peer.addTrack(track, stream);
        26.             })
        27.  
        28.             peer.createOffer().then(offer => {
        29.                 peer.setLocalDescription(offer);
        30.                 socket.send(JSON.stringify(offer));
        31.             })
        32.         })
        33.  
        34.         peer.onicecandidate = function (e) {
        35.             if (e.candidate) {
        36.                 socket.send(JSON.stringify({
        37.                     type: "offer_ice",
        38.                     iceCandidate: e.candidate
        39.                 }))
        40.             }
        41.         }
        42.  
        43.         // 如果接收到对方的视频
        44.         socket.onmessage = function (e) {
        45.             const { type, sdp, iceCandidate } = JSON.parse(e.data)
        46.             console.log(type)
        47.             switch (type) {
        48.                 case "answer":
        49.                     peer.setRemoteDescription(
        50.                         new RTCSessionDescription({ type, sdp })
        51.                     )
        52.                     break;
        53.  
        54.                 case "answer_ice":
        55.                     peer.addIceCandidate(iceCandidate)
        56.                     break;
        57.  
        58.                 default:
        59.                     break;
        60.             }
        61.         }
        62.     script>
        63. body>
        64.  
        65. html>
      9. 使用vscode的插件live server启动两个html文件。
        下载live server插件。

        启动live server。

        启动后两个端口号。


      10. 等全部启动后，查看接收端的页面，要等一段时间，可以看到摄像头拍到的画面。
        接受端播放不了，在浏览器控制台中输入 remoteVideo.play() 就行
         

  • 相关阅读:
    C++学习笔记（十六）
    C语言变量的作用域
    Linux常用命令(二)——文件查找命令 find、软链接创建命令 ln、查看磁盘剩余/使用空间命令 df / du
    LeetCode题解—260.只出现一次的数字Ⅲ
    探究Socks5代理和代理IP在技术领域的多重应用
    kubernetes部署和运行维护中的错误汇总（不定时更新）
    LeetCode 0503. 下一个更大元素 II
    ChatGPT Plus暂停注册，用户激增压力太大！
    torch.nn用法
    第2章 Linux的文件管理（四）
  • 原文地址：https://blog.csdn.net/weixin_38441229/article/details/132693113