livego+OBS+flv.js实现网页简单推流直播

最新推荐文章于 2024-01-19 21:19:29 发布

debug的coding

最新推荐文章于 2024-01-19 21:19:29 发布

阅读量1.1k

点赞数

文章标签：运维

本文链接：https://blog.csdn.net/qq_34112891/article/details/129932024

版权

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>

保存后运行文件