SRS(Simple Realtime Server)

SRS是一个简单高效的实时视频服务器,支持RTMP/WebRTC/HLS/HTTP-FLV/SRT
项目地址
地址

1. docker启动

docker run -d -p 1935:1935 -p 1985:1985 -p 8080:8080 ossrs/srs

IP:8080进入控制台

2. 使用OBS推流

image-1649871607027
RTMP (by VLC): rtmp://localhost/live/livestream
H5(HTTP-FLV): http://localhost:8080/live/livestream.flv
H5(HLS): http://localhost:8080/live/livestream.m3u8

3. 使用浏览器播放

3.1 宝塔配置

3.1.1 宝塔新建站点(略)

3.1.2 配置SSL

image-1649873914665

3.1.3 关闭防跨站

image-1649874072316
保存

3.2

3.2.1 进入站点目录

如:image-1649874358226

3.2.2 编辑index.html文件

首先下载发行版flv.js
项目地址

上传flv.min.js至站点根目录

image-1649874751424

双击编辑index.html 例子:

<!DOCTYPE html>
<html>

<head>
    <!--网页 logo-->
    <!--<link rel="icon" href="./logo.ico" type="image/x-icon">  -->
    <!--网页 logo END-->
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Flv video</title>
    <style>
        .mainContainer {
            display: block;
            width: 100%;
            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: auto;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: auto;
        }

        .controls {
            display: block;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
    </style>
</head>

<body>

    <div class="mainContainer">
        <video id="videoElement" class="centeredVideo" controls autoplay width="100%" height="auto" muted
            autoplay="autoplay" loop="loop">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>
    <!--flv.min.js路径-->
    <script src="./flv.min.js"></script> 
    <!--flv.min.js路径 END-->
    <script>
        var player = document.getElementById('videoElement');
        if (flvjs.isSupported()) {
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                "isLive": true,
                url: 'http://wwww.xxx.com/live/livestream.flv',  //修改为你的流地址
            });
            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>

4. (全文完)

p

5. 使用Cloudflare加速流地址(可选)

5.1 Cloudflare配置

添加域名A记录到服务器IP并点亮橙色云
image-1649877554269
配置完域名开启image-1649877698581

5.1.1 Cloudflare防火墙放行

image-1649879603667

5.2.1 宝塔新建站点(名称和cf刚刚配置的域名一样)

5.2.2 配置SSL

创建Cloudflare源服务器证书,并部署到刚刚新建的站点
image-1649877727373
image-1649876994279

5.2.3 配置反向代理

image-1649877287783

  location / {
  proxy_pass http://127.0.0.1:8080/;  #把8080为你的SRS服务器面板端口
  rewrite ^/(.*)$ /$1 break;
  proxy_redirect off;
  proxy_set_header Host $host;
  proxy_set_header X-Forwarded-Proto $scheme;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header Upgrade-Insecure-Requests 1;
  proxy_set_header X-Forwarded-Proto https;
}

访问域名出现SRS面板界面则正常,如图:
image-1649877828613
此时你的流地址已经变成:
https://wwww.xxx.com/live/livestream.flv