海康RTSP轉flv並實現h5頁面播放
1、參考 https://blog.csdn.net/u013769085/article/details/108800323
https://blog.csdn.net/weixin_42396332/article/details/105430015
https://www.jianshu.com/p/d9c66d7d1653
2、ffmpeg轉碼
ffmpeg.exe -rtsp_transport tcp -buffer_size 4096000 -i "rtsp://admin:123456@192.168.1.2:554/Streaming/Channels/201" -vcodec copy -acodec copy -f flv rtmp://192.168.1.100:1935/myapp/0003
3、使用flv.js插入時,結果報錯:Unsupported codec in video frame: 2
意思是不輸出音訊(專案中用的攝像頭沒有音訊,所以此處用 -an,不輸出音訊)
ffmpeg.exe -rtsp_transport tcp -buffer_size 4096000 -i "rtsp://admin:123456@192.168.1.2:554/Streaming/Channels/201" -vcodec copy -an -f flv rtmp://192.168.1.100:1935/myapp/0003
4、播放
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>flv.js demo</title>
<style>
.mainContainer {
display: block;
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.urlInput {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 8px;
}
.centeredVideo {
display: block;
width: 100%;
height: 576px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}
.controls {
display: block;
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="mainContainer">
<video id="videoElement" class="centeredVideo" controls autoplay width="1024" height="576" muted>Your browser is too old which doesn't support HTML5 video.</video>
</div>
<br>
<div class="controls">
<!--<button onclick="flv_load()">載入</button>-->
<button onclick="flv_start()">開始</button>
<button onclick="flv_pause()">暫停</button>
<button onclick="flv_destroy()">停止</button>
<input style="width:100px" type="text" name="seekpoint" />
<button onclick="flv_seekto()">跳轉</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.min.js"></script>
<script>
var player = document.getElementById('videoElement');
if (flvjs.isSupported()) {
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://192.168.1.100:8005/live?port=1935&app=myapp&stream=0003',
"isLive": true,//<====加個這個
hasAudio: false,
hasVideo: true,
//withCredentials: false,
//cors: true
}, {
enableWorker: true, // 開啟多執行緒
enableStashBuffer: false,
lazyLoad: false,
lazyLoadMaxDuration: 0,
lazyLoadRecoverDuration: 0,
deferLoadAfterSourceOpen: false,
fixAudioTimestampGap: true,
autoCleanupSourceBuffer: true,
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); //載入
flv_start();
}
function flv_start() {
player.play();
}
function flv_pause() {
player.pause();
}
function flv_destroy() {
player.pause();
player.unload();
player.detachMediaElement();
player.destroy();
player = null;
}
function flv_seekto() {
player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
}
</script>
</body>
</html>
5、效果
相關文章
- Rtsp轉Flv在瀏覽器中播放瀏覽器
- H5頁面實現滑動控制音訊播放H5音訊
- 使用海康H5視訊播放器開發包實現監控播放H5播放器
- 使用微信API實現H5頁面播放音訊檔案APIH5音訊
- Nginx+FFmpeg實現rtsp流轉hls流,在WEB通過H5 video實現視訊播放NginxWebH5IDE
- WPF中以MVVM方式,實現RTSP影片播放MVVM
- H5頁面滾動阻尼效果實現H5
- Qt+FFmpeg仿VLC接收RTSP流並播放QT
- 使用flv.js實現flv格式的監控視訊流播放JS
- Windows實現桌面錄屏、指定視窗錄製直播,低延時,H5頁面播放WindowsH5
- vue——一個頁面實現音樂播放器Vue播放器
- Nginx+FFmpeg實現RTSP轉RTMPNginx
- 將海康大華等網路攝像機RTSP流進行網頁Flash rtmp和H5 hls直播的技術方案網頁H5
- PHP中實現頁面跳轉PHP
- 如何製作H5頁面?分享簡單實用H5頁面製作教程H5
- FFmpeg 播放 RTSP/Webcam 流Web
- H5實現生成urlscheme並從H5跳轉到小程式H5Scheme
- AngularJS進階(八)實現頁面跳轉並進行引數傳遞AngularJS
- PHP頁面跳轉幾種實現方法PHP
- h5頁面加水印H5
- Django實現圖片上傳並前端頁面顯示Django前端
- H5實現拍照並上傳H5
- PHP頁面跳轉如何實現延時跳轉PHP
- 海康威視攝像頭-chrome谷歌瀏覽器高版本區域網下海康攝像頭web網頁實時播放Chrome谷歌瀏覽器Web網頁
- 【硬體裝置】海康NVR硬碟錄影機接入海康RTSP攝像頭操作步驟VR硬碟
- JS實現將文字轉換為語音並自動播放JS
- uni-APP 新增頁面實現路由跳轉APP路由
- CSS3實現的頁面反轉效果CSSS3
- 實現不同頁面不同頁首
- asyUI分頁中,如何實現頁面跳轉,再返回時,...UI
- H5頁面架設教程H5
- FFmpeg開發筆記(九):ffmpeg解碼rtsp流並使用SDL同步播放筆記
- 在 Laravel 6.0 中使用 pjax 進行頁面加速,並實現頁面頂部進度條Laravel
- H5 網站如何實現返回上一頁並自動重新整理H5網站
- Windows11實現錄屏直播,H5頁面直播 HLS ,不依賴FlashWindowsH5
- 使用VideoView播放rtsp視訊流IDEView
- Flutter頁面跳轉到IOS原生介面 如何實現?FlutteriOS
- 小程式tabBar跳轉頁面並隱藏tabBartabBar