EasyMedia转码rtsp视频流flv格式,hls格式,H5页面播放flv流视频

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

相关推荐
逼子格11 小时前
五种音频器件综合对比——《器件手册--音频器件》
嵌入式硬件·音视频·硬件工程师·硬件测试·电子器件·硬件笔试真题·音频器件
EasyGBS12 小时前
视频设备轨迹回放平台EasyCVR打造视频智能融合新平台,驱动智慧机场迈向数字新时代
网络·人工智能·安全·音视频
EasyGBS12 小时前
视频设备轨迹回放平台EasyCVR综合智能化,搭建运动场体育赛事直播方案
网络·安全·音视频
SKYDROID云卓小助手16 小时前
三轴云台之相机技术篇
运维·服务器·网络·数码相机·音视频
yunteng52117 小时前
音视频(一)ZLMediaKit搭建部署
音视频·zlmediakit·安装搭建
Merokes21 小时前
关于Gstreamer+MPP硬件加速推流问题:视频输入video0被占用
c++·音视频·rk3588
EasyGBS1 天前
NVR接入录像回放平台EasyCVR视频系统守护舌尖上的安全,打造“明厨亮灶”云监管平台
安全·音视频
cuijiecheng20181 天前
音视频入门基础:MPEG2-TS专题(26)——通过FFmpeg命令使用RTP发送TS流
ffmpeg·音视频
18538162800余。1 天前
矩阵碰一碰发视频源码搭建技术解析
音视频
Yeauty1 天前
Rust 中的高效视频处理:利用硬件加速应对高分辨率视频
开发语言·rust·ffmpeg·音视频·音频·视频