概述
环境
项目目录清单
项目搭建步骤
- 引入相关npm依赖
- 实例化一个express应用
- 创建WebsocketServer并解析rtsp
- 使用flv播放
浏览器中测试
代码
引用

概述

众所周知，rtsp的流是无法在浏览器中播放的，这就导致海康摄像头、海康ISC等平台的视频流无法直接在浏览器中播放。

当下是web最盛行的时代，恨不得所有功能、系统、平台。。。都装在浏览器中。

本文简单介绍如何间接实现在浏览器中播放rtsp的流，涉及技术点和工具较多，本文仅做功能实现思路的梳理和简单的代码实践，后续整理更深入的实现原理。

大致流程为：

准备一个rtsp流，可以通过直连摄像头、vlc自己推流等
使用node技术栈搭建一个基于express的应用
在express应用中通过 fluent-ffmpeg（可以简单认为是ffmpeg的包装器）和ffmpeg进行交互
使用ffmpeg解码rtsp为flv视频格式，并返回数据流
在express应用中通过 express-ws 创建一个WebsocketServer服务，此服务接收ffmpeg返回的数据流，并发送到连接此服务的WebsocketClient上
使用flvjs（b站开源）播放flv格式的视频，即充当WebsocketClient
，实际是通过接收WebsocketServer发送的数据并渲染到video标签上面

环境

本文示例代码是在如下环境下调试的

IDE：VsCode
node：16.15.0
npm：8.5.5
脚手架：未使用express脚手架工具
ffmpeg：6.1.0

项目目录清单


   package-lock.json
   package.json
   
+---client
       client.html
       flv-1.6.2.js           
+---public
       index.html
       yikepingguo.png
       
+---server
        server.js
        websocket.js

package.json ：npm包管理器配置文件
client：WebsocketClient
- client.html：一个单独的html页面，用来播放视频。独立于express，需要从windows资源管理器中访问，并在浏览器中打开
- flv.js：当前最新版本1.6.2
public：express应用静态资源存放目录，当前有一个helloWorld的html页面和一张示例图片。仅作用验证express应用是否启动。
server：WebsocketServer
- server.js：实例化express应用
- websocker.js：实例化一个WebsockerServer；借助ffmpeg将rtsp转换为flv

项目搭建步骤

新建一个文件夹，假设取名 RtspToFlv，并在VsCode中打开此文件夹，后续所有操作均在此文件夹操作。

在RtspToFlv中创建server文件夹。

在RtspToFlv中创建client文件夹。

引入相关npm依赖

新建一个文件 package.json ，并填入如下内容：



{
  "name": "RtspToWebsocket",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "nodemon ./server/server.js"
  },
  "keywords": [],
  "author": {
    "email": "liangchen_beijing@163.com",
    "name": "一颗苹果",
    "url": ""
  },
  "license": "Apache-2.0服务器托管网",
  "dependencies": {
    "express": "4.18.3",
    "express-ws": "5.0.2",
    "nodemon": "3.1.0",
    "ws": "8.16.0",
    "websocket-stream": "5.5.2",   
    "fluent-ffmpeg": "2.1.2"
  }
}

script.start：配置启动脚本，执行server/server.js
nodemon：nodemon是一种工具，可在检测到目录中的文件更改时通过自动重新启动 node 应用程序来帮助开发基于 node.js 的应用程序
dependencies：依赖包，均使用当前最新版本
fluent-ffmpeg：该库提供了一组函数和实用程序来抽象 ffmpeg 的命令行用法。简单来说就是包装了一层使用ffmpeg的胶水代码。要使用此库，需要已经安装了 ffmpeg。也就是说本机必须安装了ffmpeg并已经添加到了系统环境变量。

使用 npm install 安装所有的依赖。

实例化一个express应用

在server文件夹中新建一个server.js 文件，并填入如下内容：



const express = require('express')

const app = express()

const expressWs = require('express-ws')
const websocket = require('./websocket')


expressWs(app);
app.use(express.static('public'))
app.use('/websocket', websocket)
app.get('*', (req, res) => {})
app.listen(8009, () => {
 console.log('server is listening on port 8009')
})

app.use(‘/websocket’, websocket)：将后面创建的websocker.js模块加载进来

创建WebsocketServer并解析rtsp

在server文件夹中新建一个 websocket.js 文件，并填入如下内容：



const express = require('express');
const expressWs = require('express-ws')
var webSocketStream = require("websocket-stream/stream");
var ffmpeg = require("fluent-ffmpeg");


const router = express.Router()
expressWs(router);
router.ws('/test', (ws, req) => {
 ws.send('连接成功')
 //推视频流
 const stream = webSocketStream(ws, {
  binary: true,
  browserBufferTimeout: 1000000
 }, {
  browserBufferTimeout: 1000000
 });
 var url = "rtsp://xxx:xxx@192.168.1.xxx:xxx/ch1/main/av_stream";
 try {
  ffmpeg(url)
   .addInputOption("-rtsp_transport", "tcp", "-buffer_size", "102400") // 这里可以添加一些 RTSP 优化的参数
   .on("start", function () {
    console.log(url, "Stream started.");
   })
   .on("codecData", function () {
    console.log(url, "Stream codecData.")// 摄像机在线处理
   })
   .on("error", function (err) {
    console.log(url, "An error occured: ", err.message);
   })
   .on("end", function () {
    console.log(url, "Stream end!");// 摄像机断线的处理
   })
   .outputFormat("flv").videoCodec("copy").noAudio().pipe(stream);
 } catch (error) {
  console.log(error);
 }
 //接收到消息
 ws.on('message', msg => {
  console.log("收到消息");
  ws.send(msg)
 })
})
module.exports = router

创建了一个Websocket端点（/websocket/test），提供给客户端连接
webSocketStream：创建了一个stream对象，将ffmpeg解析出来的数据流存入stream中，并实时发送到了WebsocketClient
ffmpeg有丰富的配置参数，可以通过参照官方文档进行调优

至此，WebsocketServer已经搭建好了，使用 npm start 命令尝试启动express应用。

使用flv播放

从flvjs官网下载flv.js文件，并放到client文件夹下面。

在client文件夹中新建一个文件 client.html ，并填入如下内容：






  
  websocket客户端，使用flvjs播放视频
  
    .websocket {
      width: 500px;
      height: 500px;
      border: 1px solid #ccc;
      margin: 10px auto 0 auto;
      text-ali服务器托管网gn: center;
    }
    #receive-box {
      width: 300px;
      height: 200px;
      overflow: auto;
      margin: 0 auto 10px auto;
      border: 1px solid #25d1ff;
    }
    #msg-need-send {
      width: 300px;
      height: 100px;
      resize: none;
      border-radius: 5px;
    }
    #send-btn {
      border: none;
      border-radius: 5px;
      background: #25d1ff;
      padding: 5px 10px;
      color: #fff;
      cursor: pointer;
    }
    #exit {
      border: 1px solid #ccc;
      border-radius: 5px;
      background: none;
      padding: 5px 10px;
      cursor: pointer;
    }
  


  socket-client
  
    
      服务端返回的消息：
      
    
    
      给服务端发送消息：
      
      
        
      
    
    
  
  播放器
  
    
  
 
  
  
    window.onload = function () {
      // test();
      play();
     
    };
    //测试websocket收发消息
    function test() {
      const ws = new WebSocket('ws://127.0.0.1:8009/websocket/test')
      ws.onopen = e => {
        console.log(`WebSocket 连接状态： ${ws.readyState}`)
      }
      ws.onmessage = data => {
        console.log("接收到消息");
        const receiveBox = document.getElementById('receive-box')
        receiveBox.innerHTML += `${data.data}`
        receiveBox.scrollTo({
          top: receiveBox.scrollHeight,
          behavior: "smooth"
        })
      }
      ws.onclose = data => {
        console.log('WebSocket连接已关闭')
        console.log(data);
      }
      //发送msg
      var sendBtn = document.getElementById("send-btn");
      sendBtn.onclick = () => {
        ws.send(document.getElementById('msg-need-send').value)
      }
      //关闭websocket连接
      var exitBtn = document.getElementById("exit");
      exitBtn.onclick = () => {
        ws.close()
      }
    }
    //播放视频
    function play() {
      videoElement = document.getElementById('my-player');
      if (flvjs.isSupported()) {
        flvPlayer = flvjs.createPlayer({
          type: 'flv',          //媒体类型
          //flv格式媒体URL，即ws-server地址
          url: 'ws://127.0.0.1:8009/websocket/test',
          isLive: true,          //数据源是否为直播流
          hasAudio: false,        //数据源是否包含有音频
          hasVideo: true,         //数据源是否包含有视频
          enableStashBuffer: false    //是否启用缓存区
        }, {
          enableWorker: false,      //不启用分离线程
          enableStashBuffer: false,    //关闭IO隐藏缓冲区
          autoCleanupSourceBuffer: true  //自动清除缓存
        });
        flvPlayer.attachMediaElement(videoElement); //将播放实例注册到节点
        flvPlayer.load();          //加载数据流
        flvPlayer.play();          //播放数据流
      } else {
        alert("not support flvjs");
      }
    }

html文件中分两部分，第一部分是一个简单的Websocket功能测试，第二部分放了一个video的标签，flvjs将把视频流渲染到video中
js代码中有两个方法，test用于测试Websocket连接和通信，play方法用于播放flv视频流
url：注意url中path为/websocket/test，在服务的使用了
express.Router，实际WebsocketServer对外提供服务的端点就是/websocket/test
flvjs参数：flvjs有丰富的各种参数和回调，可以参照官方文档做调优

浏览器中测试

进入windows的文件资源管理器并使用edge打开client.html，将可以看到rtsp视频流的画面已经渲染到了浏览器中，并且网络连接的地方不停的接收这WebSocketServer发送的flv视频流数据。

ws请求地址为：ws://127.0.0.1:8009/websocket/test

代码

引用

ffmpeg：https://github.com/FFmpeg/FFmpeg
flvjs：https://github.com/bilibili/flv.js
express：https://github.com/expressjs/express

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: 准确！！！在 CentOS 8 上配置 PostgreSQL 14 的主从复制

在 CentOS 8 上配置 PostgreSQL 14 的主从复制，并设置 WAL 归档到特定路径 /home/postgres/archive 的步骤如下：主服务器配置（主机）配置 PostgreSQL：编辑 postgresql.conf 文件： …

Rtsp转Flv在浏览器中播放

概述

环境