EasyMedia转码rtsp视频流flv格式，hls格式
H5页面播放flv流视频
文章最后有源码地址
解决海康视频播放视频流，先转码后自定义页面播放flv视频流
先看效果，1，EasyMedia自带的页面，这个页面二次开发改动页面比较麻烦
2，使用B站js解码，简单实现html页面播放flv视频流，页面可以自己修改
看下前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flv视频流播放</title>
<style>
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
text-align: center;
}
</style>
</head>
<body>
<video id="video" autoplay controls muted></video>
<script src="./flv.js"></script>
<script>
var video = document.getElementById('video');
var videoSrc = 'ws://localhost:8866/live?url=rtmp://liteavapp.qcloud.com/live/liteavdemoplayerstreamid';
if (flvjs.isSupported()) {
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: videoSrc
});
flvPlayer.attachMediaElement(video);
flvPlayer.load();
flvPlayer.play();
}
</script>
</body>
</html>
页面源码放在这个目录结构doc下面了
亲测两个项目源码都可运行，都能实现H5 播放流视频，都是通过rtsp 转码后实现
源码地址
https://gitee.com/lbx_1397372495/easy-media
源码地址
https://gitee.com/lbx_1397372495/easy-media-flv