livego+OBS+flv.js实现网页简单推流直播_将网页做为推流页面

作者：盐析白兔 | 2024-02-28 03:51:58

踩

将网页做为推流页面

1.运行livego服务

docker免安装软件最简洁方便

docker run -p 1935:1935 -p 7001:7001 -p 7002:7002 -p 8090:8090 -d gwuhaolin/livego

安装完成后访问此链接，获取密钥 data

http://localhost:8090/control/get?room=movie

2.推流

上行推流：通过 RTMP 协议把视频流推送到 rtmp://localhost:1935/{appname}/{channelkey}，例如使用 ffmpeg -re -i demo.flv -c copy -f flv rtmp://localhost:1935/live/movie 推送；
下行播放：支持以下三种播放协议，播放地址如下：
RTMP:rtmp://localhost:1935/{appname}/movie
FLV:http://127.0.0.1:7001/{appname}/movie.flv
HLS:http://127.0.0.1:7002/{appname}/movie.m3u8

推荐使用OBS推流到服务器

下载OBS Studio： https://obsproject.com/

配置正确的情况下，点击开始直播后OBS软件右下角会出现绿色标志。

配置flv

编写flv.html文件


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>直播测试</title>
</head>
<body>
    <!-- 通过CDN直接引入flvjs -->
    <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.1/flv.min.js"></script>
    <div  style="text-align: center;">
        video
        <video id="liveTest" style="height: 100%;width: 100%;"
        muted controls="controls" autoplay="autoplay"></video>
    </div>
    <script>
        if (flvjs.isSupported()) {
    var videoElement = document.getElementById('liveTest');
    var flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: 'http://localhost:7001/live/movie.flv' // 你的视频地址
    });
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    flvPlayer.play();
}
    </script>
</body>
</html>

保存后运行文件

实现效果。略有延迟，还需优化。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/157548