前言:
前端是不能直接播放 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, }); } }