1：安裝ffmpeg，並且配置環境變量。
下載地址：http://ffmpeg.zeranoe.com/builds/ 或者：
百度雲鏈接：https://pan.baidu.com/s/1PBt18BHFGpdr0lpoUp5cKw
提取碼：hx08
配置：
復制文件地址，返回桌面，右鍵我的電腦/此電腦，點擊高級系統設置，高級，點擊環境變量
點擊path
設置路徑
win + r 輸入cmd
輸入ffmpeg 回車
成功
2：npm install node-rtsp-stream ws
const Stream=require('node-rtsp-stream');
// 設置rtsp視頻流
const rtsp_url='rtsp://admin:admin@192.168.1.229:554/live/main'
const streams = new Stream({
name: 'sockets',
streamUrl: rtsp_urls,
wsPort: 9998,
ffmpegOptions: { // 選項ffmpeg標志
'-stats': '', // 沒有必要值的選項使用空字符串
'-r': 30, // 具有必需值的選項指定鍵后面的值
'-s':'1920*1080'
}
})
node xx.js 啟動服務
3: html頁面播放視頻
https://github.com/phoboslab/jsmpeg/blob/master/jsmpeg.min.js
<!DOCTYPE html> <html> <head> <title>JSMpeg Stream Client</title> <style type="text/css"> *{ padding: 0; margin: 0; } .container{ margin: 0 auto; } canvas{ background-color: aqua; display: block; margin: 10px 0; } </style> </head> <body> <div class="container"> <canvas id="video-canvas" width="1366" height="750" style="width:980px;height:544px"></canvas> </div> <script type="text/javascript" src="./scripts/jsmpeg.js"></script> <script type="text/javascript"> const width = document.body.clientWidth; const height = document.body.clientHeight; console.log(width,height) const canvas = document.getElementById('video-canvas'); console.log(document.location.hostname) var urls = 'ws://localhost:9998'; var players = new JSMpeg.Player(urls, {canvas: canvas}); </script> </body> </html>