基于WASM的Web端RTSP视频监控播放方案（一）服务器端推流至前端

整体实现方案

   本方案是基于node.js实现的播放方案，其基本实现步骤是服务器端采用ffmpeg进行拉流，并采用websocket将流推送到前端，前端采用wasm解码播放；本博客的重点在于如何进行拉流并推流到前端接收。

注：本博客只讲解基本的实现方案，如需使用还需要自行优化。

服务器端推流

   本节所需node模块：fluent-ffmpeg 、ws
   其它工具：ffmpeg安装和配置    
   默认用户会使用上述东西

var ffmpeg = require("fluent-ffmpeg");
var websocket = require('ws')
const wss =new websocket.Server({
    port: 8090,
})
wss.on('connection', ws => {
    console.log('有一个新用户连接进来');
    let url = 'rtsp://username:password@ip:port/Streaming/Channels/102'
    let s = ffmpeg(url)
        .on("codecData", function (data) {
            console.log("Stream codecData.") // 摄像机在线处理
        })
        .on("error", function (err) {
            console.log("An error occured: ", err.message);
        }).format('hevc').pipe()
    s.on('data', chunk => {
        ws.send(chunk)
    })
})

这里需要着重讲解一下 format('hevc')这个函数，它指的是ffmpeg转流之后输出的流格式。因为本方案是在前端进行解码，服务器只用作转发，因此需要原格式给他转出来（这一部分作者理解的还不是很清楚，‘hevc’是h256编解码的格式，h.264的视频流这儿需要修改一下）。

视频流格式查看方法

命令行中输入
ffprobe rtsp://username:password@ip:port/Streaming/Channels/102 -show_streams -print_format json
注：ffprobe是在配置ffmpeg时配置好的

1666578483478.png

前端接收

    前端接收比较简单。

let ws = new WebSocket("ws://127.0.0.1:8090")
ws.onmessage = event => {
  //判断是否为Blob格式的数据
  if (event.data instanceof Blob) {
    let res = event.data.arrayBuffer()
    console.log(res);
  }
}