1.下載FFmpeg:http://ffmpeg.org/download.html
2.下載完直接解壓好,並將bin目錄加入到path環境變量下
解壓放置
將下載的壓縮包解壓獲得 ffmpeg-4.0.2-win64-static 文件夾,
將 ffmpeg 文件夾放置到程序文件夾,假設放置路徑爲:D:\joyce_workspace
打開環境變量設置頁:資源管理器 > 此電腦 > 右鍵-屬性 > 高級系統設置 > 環境變量
雙擊 Path 項進入編輯頁
選擇新建,將 路徑D:\joyce_workspace\ffmpeg-20200525-6268034-win64-static\bin粘貼至輸入框後確定保存。
亦可選擇瀏覽,選中 ffmpeg 目錄下的 bin 目錄 後確定保存
測試使用
打開命令行的窗口(CMD),輸入 ffmpeg 回車執行,有回顯如下信息,即設置成功。
如未有,請檢查你在第二步中的操作。
3.如果需要將rtsp轉換格式(如:rtmp)則執行
ffmpeg -i "rtsp://admin:[email protected]:554/cam/realmonitor?channel=1&subtype=0" -f flv -r 25 -s 640x480 -an "rtmp://localhost/oflaDemo/hello"
成功後:
4.搭建WEB服務器,利用jwplayer或者ckplayer之類的,將rtmp地址換成第三步轉的rtmp協議地址
例如用ckplayer:
<script type="text/javascript" src="ckplayer/x/ckplayer.js"></script>
<div class="video" style="width: 1000px;height: 600px;"></div>
<script type="text/javascript">
var videoObject = {
container: '.video',//“#”代表容器的ID,“.”或“”代表容器的class
variable: 'player',//該屬性必需設置,值等於下面的new chplayer()的對象
autoplay:true,//自動播放
live:true,//直播視頻形式
video:'rtmp://localhost/oflaDemo/hello'//視頻地址
};
var player=new ckplayer(videoObject);
</script>
另外:第三步如果不想轉成其他視頻流輸出,可以直接通過websocket發送給前臺接收:
前提需要安裝node.js
1.建立server.js
var Stream = require('node-rtsp-stream')
var stream = new Stream({
name: 'socket',
streamUrl: 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov',
wsPort: 9990,
ffmpegOptions:{
'-stats': '',
'-r': 20,
'-s': '1920 1080'
}
})
2.html中直接使用ws地址訪問(ws://localhost:9990)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="position: absolute;">
<canvas id="canvas_9990" style="width: 240px;height: 160px;" onclick="pauseBtnShow()"></canvas>
<div id="pauseBtn" onclick="startOrPause()" style="z-index: 2; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; max-width: 75px; max-height: 75px; margin: auto; opacity: 0.7; cursor: pointer; display: none;"><svg style="max-width: 75px; max-height: 75px;" viewBox="0 0 200 200" alt="Play video"><circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="#fff"></circle><polygon points="70, 55 70, 145 145, 100" fill="#fff"></polygon></svg></div>
</div>
<script src="jsmpeg.min.js"></script>
<script>
var player = new JSMpeg.Player('ws://localhost:9990', {
canvas: document.getElementById('canvas_9990'),
autoplay:false,//是否自動播放
loop:true,
});
function startOrPause(){
if (player.isPlaying) {
player.pause();
}
else {
player.play();
document.getElementById('pauseBtn').style.display = 'none'
}
}
function pauseBtnShow(){
if (player.isPlaying) {
player.pause();
document.getElementById('pauseBtn').style.display = 'block'
}
}
</script>
</body>
</html>
3.進入項目目錄啓動node server.js
4.將html頁面在瀏覽器中打開即可,效果如下:
附上可用的rtsp測試地址:rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov(目前親測可用)
具體代碼地址見:https://gitee.com/wxzone/node-ffmpeg-rtsp-websocket
參考網址和項目:
https://blog.csdn.net/u011489205/article/details/79327275
https://cloud.tencent.com/developer/article/1549047