直播系统实现: nginx + OBS + H5

最新推荐文章于 2024-05-24 22:00:58 发布

寰宇的行者

最新推荐文章于 2024-05-24 22:00:58 发布

阅读量3.1k

点赞数 2

分类专栏：个人建站

本文链接：https://blog.csdn.net/qq_32846595/article/details/104074351

版权

个人建站专栏收录该内容

9 篇文章 0 订阅

订阅专栏

通过本文将学会在腾讯云服务器上实现简单的直播系统：

1.ngnix 流媒体服务器搭建

2.obs客户端推流

3.浏览器观看直播

一、动手搭建流媒体服务器

安装wget

yum -y install wget

安装 gcc gcc-c++

yum -y install gcc gcc-c++

安装PCRE库

cd /usr/local/
wget http://jaist.dl.sourceforge.net/project/pcre/pcre/8.33/pcre-8.33.tar.gz
tar -zxvf pcre-8.33.tar.gz
cd pcre-8.33
./configure
make && make install

安装openssl

cd /usr/local/ 
wget https://www.openssl.org/source/openssl-1.1.0j.tar.gz
tar xf openssl-1.1.0j.tar.gz
cd openssl-1.1.0j
./config
make && make install

如果提示You need Perl 5，则输入下面这个命令。

yum -y install Perl 5

安装zlib

cd /usr/local/ 
wget http://www.zlib.net/zlib-1.2.11.tar.gz
tar xf zlib-1.2.11.tar.gz
cd zlib-1.2.11
./configure
make && make install

下载nginx-rtmp-module 模块

cd /usr/local/
yum -y install git
git clone https://github.com/arut/nginx-rtmp-module.git

安装nginx

wget http://nginx.org/download/nginx-1.16.1.tar.gz
tar xf nginx-1.16.1.tar.gz
cd nginx-1.16.1
./configure --prefix=/usr/local/nginx --add-module=../nginx-rtmp-module --with-http_ssl_module  --with-pcre=../pcre-8.33 --with-openssl=../openssl-1.1.0j --with-zlib=../zlib-1.2.11
make && make install

如果提示

./configure: error: SSL modules require the OpenSSL library.

执行

yum -y install openssl openssl-devel

如果提示

 ./configure: error: the HTTP rewrite module requires the PCRE library.

执行

yum -y install pcre-devel

我下载并安装了pcre-8.33.tar.gz 和 openssl-1.0.1j.tar.gz ，并没有出现上面的错误

nginx相关命令

启动

/usr/local/src/nginx/sbin/nginx

重启

/usr/local/src/nginx/sbin/nginx –s reload

二、obs实现客户端推流

nginx.conf 配置

nginx.conf 的位置一般是在/usr/local/nginx/conf中，打开文件

添加下方代码

rtmp {  
    out_queue     4096;
    out_cork         8;
    max_streams    128;
    timeout        15s;
    server {    
        listen 1935;  #监听的端口 
        chunk_size 4000;     
        application live {
			live on; #开启实时
			hls on; #开启hls
			hls_path /usr/local/nginx/html/live; #rtmp推流请求路径，文件存放路径
			hls_fragment 5s; #每个TS文件包含5秒的视频内容
        }
    }   
}

添加位置是在http上方

配置写好之后，重启 Nginx 服务器：

sudo nginx -s reload

如果报错，则说明代码添加的有问题，注意检查。

输入云服务器ip得到以下界面，则说明已经配置好服务器。

下面测试rtmp端口是否打开

输入上述命令，发现端口未开。需要做两件事情。

1.将腾讯安全组的相对应的端口打开。

2.设置推流端口

systemctl stop firewalld 关闭防火墙

安装或更新服务
yum install iptables-services 

再使用 systemctl enable iptables 设置开机启动

iptables -I INPUT -p tcp -m state --state NEW --dport 1935 -j ACCEPT #放行1935端口的 NEW状态请求

service iptables save #保存规则

service iptables restart #重启防火墙保证新的规则加载进来

这样再使用telnet 命令就可以看到

说明成功！

obs客户端

下载地址：https://cdn-fastly.obsproject.com/downloads/OBS-Studio-24.0.3-Full-Installer-x64.exe

打开文件--> 设置按照下面进行设置

在来源处，点击＋

点击显示此捕获

如果出现黑屏，可以通过该链接https://jingyan.baidu.com/article/c910274bac0d51cd361d2d18.html 找到解决办法

最终出现上面的内容，说明配置成功。

obs推流

按照下面进行配置，对了，需要在

/usr/local/nginx/html 下建立文件 live文件夹，用于存放相关视频

在obs中进行如下配置：

点击开始推流，就完成了。变成绿色就对了

三、浏览器观看设置

新建文件index.html,如下

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<title>前端播放m3u8格式视频</title>

<link rel="stylesheet" href="http://vjs.zencdn.net/5.5.3/video-js.css">

<script src="http://vjs.zencdn.net/5.5.3/video.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.12.2/videojs-contrib-hls.js"></script>

</head>

<body>

<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="728" height="410" data-setup='{}'>

<source id="source" src="http://<你的ip>/live/myvideo.m3u8" type="application/x-mpegURL">

</video>

</body>

<script>

// videojs 简单使用

var myVideo = videojs('myVideo',{

bigPlayButton : true,

textTrackDisplay : false,

posterImage: false,

errorDisplay : false,

})

myVideo.play() // 视频播放

myVideo.pause() // 视频暂停

</script>

</html>

将文件放入 /usr/local/nginx/html 目录下，注意里面sorce 是需要修改的。

最后打开云服务器，就可以看到直播内容了

参考博客：

[1]https://hywlovexyc.info/blog/archives/572/

[2]https://blog.fuwenwei.com/2019/01/02/H5-live-02.html#32-%E4%BD%BF%E7%94%A8-hls-%E6%92%AD%E6%94%BE

寰宇的行者

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
2
评论
直播系统实现: nginx + OBS + H5

通过本文将学会在腾讯云服务器上实现简单的直播系统：1.ngnix 流媒体服务器搭建2.obs客户端推流3.浏览器观看直播一、动手搭建流媒体服务器安装wgetyum -y install wget安装 gcc gcc-c++yum -y install gcc gcc-c++安装PCRE库cd /usr/local/wget http://jais...
复制链接

扫一扫