SRS流媒体服务器搭建

本教程主要演示使用srs搭建一个流媒体服务器然后用OBS进行rtmp推流，转码成flv给前端访问

启动一个srs服务器

我们使用下面的镜像源拉取SRS4.0的镜像

sh
docker pull docker.unsee.tech/ossrs/srs:4

创建配置文件srs.conf

srs.conf
listen              1935;
max_connections     999;
srs_log_tank        file;
srs_log_file        ./objs/srs.log;
http_server {
    enabled         on;
    listen          8080;
    dir             ./objs/nginx/html;
}
vhost __defaultVhost__ {
    hls {
        enabled         on;
    }
    http_remux {
        enabled     on;
        mount       [vhost]/[app]/[stream].flv;
    }
}

直接运行

sh
 docker run --rm -p 1935:1935 -p 8090:8080 -v $(pwd)/srs.conf:/usr/local/srs/conf/srs.conf ossrs/srs:4

然后通过8090端口访问srs web服务

OBS推流

这样就运行成功了

接下来去OBS官网下载OBS

安装好后进去设置

配置一下推流地址

接下来就能通过你的服务地址+推流码访问，推流码随便设置，地址默认是 rtmp://ip/live

访问直播流

然后回到上面的srs主页

将url改成你的推流地址+推流码

前端页面访问

当然我们要实现的是通过前端访问，这样才能实现直播的需求

下面是一个demo页面，使用flv.js，不管是用vue还是react都能用这种方式

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FLV Streaming Test</title>
    <style>
		.back {
			width: 100%;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;

		}
		.content {
			width: 800px;
			height: 600px;
		}

		#video {
			width: 100%;
			height: 100%;
		}


    </style>
</head>
<body>
	<div class="back">
		<div class="content">

			<video id="video" controls></video>

		</div>
	</div>
    

    <script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
    <script>
        if (flvjs.isSupported()) {
            const videoElement = document.getElementById('video');
            const flvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: 'http://117.164.186.124:8090/live/01.flv'
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flvPlayer.play();
        }
    </script>
</body>
</html>

目录

启动一个srs服务器

OBS推流

访问直播流

前端页面访问