前言：

前端是不能直接播放 rtsp 流的，必须通过后端转成前端支持的形式，这里是转成Websocket

1、使用 Node.js 开启一个新进程 把 rtsp 转成 MPEG1 形式 再通过Websocket传输

使用node-rtsp-stream                                                                链接：node-rtsp-stream - npm

const Stream = require("node-rtsp-stream")

new Stream({

name: "测试",

streamUrl: "rtsp://rtsp流地址",

wsPort: 8080,//端口号

// ffmpeg 的一些配置参数，比如转换分辨率等，大家可以去 ffmpeg 官网自行查询

ffmpegOptions: {

"-stats": "",

"-r": 20,

"-s": "1280 720", // 分辨率

},

})

注意：必须在服务器机器上（开启node.js的电脑）安装ffmpeg 

2、客户端使用 @cycjimmy/jsmpeg-player 来实现获取流，也可以自己连Websocket

这里我简单的封装了一下使用的方法                              链接：@cycjimmy/jsmpeg-player - npm

import JSMpeg from '@cycjimmy/jsmpeg-player';

import { PlayerWebsocket } from "./下面的Class"

// 第一个参数是 Div 的ID或者类名 第二个参数是 Ws 的地址

new PlayerWebsocket('#WebpackDom', 'ws的地址');

PlayerWebsocket 类

class PlayerWebsocket {

/**********************************

* 变量s

***********************************/

private m_VideoParentDom: Element | null;

private m_VideoDom!: HTMLCanvasElement;

private m_VideoSrc: string;

private m_JSMpeg: any;

/**********************************

* 方法s

***********************************/

constructor(videoParentDom: Element | string, src: string) {

super();

if (videoParentDom instanceof Element) {

this.m_VideoParentDom = videoParentDom;

} else if (typeof videoParentDom === 'string') {

let dom = document.querySelector(videoParentDom);

dom ? (this.m_VideoParentDom = dom) : (this.m_VideoParentDom = null);

} else {

this.m_VideoParentDom = null;

}

this.m_VideoSrc = src;

this.init();

}

play() {

this.m_JSMpeg.play();

}

pause() {

this.m_JSMpeg.pause();

}

stop() {

this.m_JSMpeg.stop();

}

destroy() {

this.m_JSMpeg.destroy();

this.m_VideoDom?.remove();

}

upDataSrc(src: string) {

this.destroy();

this.m_VideoSrc = src;

this.init();

}

protected init() {

if (!this.m_VideoParentDom) return;

this.m_VideoDom = document.createElement('canvas');

this.m_VideoParentDom.appendChild(this.m_VideoDom);

this.m_VideoDom.style.width = '100%';

this.m_VideoDom.style.height = '100%';

this.m_JSMpeg = new JSMpeg.Player(this.m_VideoSrc, {

canvas: this.m_VideoDom,

});

}

}

3、好吧其实已经好了 兄弟们直接CV就行