海康RTSP转flv并实现h5页面播放
程序员文章站
2024-01-16 20:58:58
...
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:[email protected]: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:[email protected]: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、效果
上一篇: linux下安装java环境