纯前端使用vlc\ffmpeg 实现浏览器播放rtsp直播视频流

浏览器播放rtsp直播视频流"/>

纯前端使用vlc\ffmpeg 实现浏览器播放rtsp直播视频流

如何只靠前端实现浏览器播放rtsp视频流

这次接到任务实现浏览器播放海康rtsp视频流，尝试过很多办法：

• 通过vlc将rtsp转成rtmp，然后通过客户端通过video标签播放
• 通过ffmpeg + nginx + video，rtsp转rtmp播放
• 通过ffmpeg + video，rtsp转hls播放
  这些方案都试过，但是我这边没有成功过，具体的你们可以参考这个 地址。

后面使用了vlc+ffmpeg+node+react方式实现了纯前端开发：

1. 使用vlc等工具测试，确保rtsp流可连接
   官网下载地址：.zh.html
   
   填的地址就是摄像头RTSP视频流地址，然后点播放：可测试URL（rtsp://wowzaec2demo.streamlock/vod/mp4:BigBuckBunny_115k.mov）
   
2. 首先先建一个文件夹
3. 下载ffmpeg环境
   下载地址：.html#build-mac
   根据自己电脑环境去下载对应的版本。
   
   下载之后将该文件压缩包解压到文件夹下。
4. 后端环境：node、express
   Node分不同的环境，按需下载：/
   
   执行输入node -v ，查看node版本；或者输入 npm -v
   判断是否已经安装完毕；
   express ：npm install express --save
   4.1 安装第三方依赖
   在flv的目录下，安装：npm install express express-ws fluent-ffmpeg websocket-stream -S -D
   4.2 编写代码 index.js

var express = require("express");
var expressWebSocket = require("express-ws");
var ffmpeg = require("fluent-ffmpeg");
ffmpeg.setFfmpegPath("./ffmpeg/bin/ffmpeg");
var webSocketStream = require("websocket-stream/stream");
var WebSocket = require("websocket-stream");
var http = require("http");function localServer() {let app = express();app.use(express.static(__dirname));expressWebSocket(app, null, {perMessageDeflate: true});app.ws("/rtsp/:id/", rtspRequestHandle)app.listen(8988);console.log("express listened")
}function rtspRequestHandle(ws, req) {console.log("rtsp request handle");const stream = webSocketStream