您的位置 首页 java

小型直播系统-java实现(二)

上一节我们讲到系统概括,这一节我们详细讲解一下 nginx 的使用, nginx-rtmp-module的使用


rtmp {

server {

listen 1935;

chunk_size 4000;

#HLS # For HLS to work please create a directory in tmpfs (/tmp/app here) # for the fragments. The directory contents is served via HTTP (see # http{} section in config) # # Incoming stream must be in H264/AAC. For iPhones use baseline H264 # profile (see ffmpeg example). # This example creates RTMP stream from movie ready for HLS: # # ffmpeg -loglevel verbose -re -i movie.avi -vcodec libx264 # -vprofile baseline -acodec libmp3lame -ar 44100 -ac 1

# -f flv rtmp://localhost:1935/hls/movie # # If you need to transcode live stream use ‘exec’ feature. # application hls { live on;

hls on;

hls_path /usr/local/nginx/html/hls; hls_fragment 5s; } } } http { server { listen 8080; location /hls { # Serve HLS fragments types { application/vnd.apple.mpegurl m3u8; video/mp2t ts; } root html; expires -1; }

} }

其中rtmp部分与原有的http部分在同一个级别,但是下面的http部分要放到已有的http部分中,也就是增加一个server部分。然后运行如下命令检查nginx.conf是否有语法错误service nginx configtest重新加载配置文件service nginx reload运行下面的命令查看nginx状态service nginx status然后查看端口netstat -nlp。

前端播放m3u8视频

当我们成功安装好了rtmp模块之后,就可以用作为直播服务器,那么直播的来源哪里来呢?这里用到一个推流播放器 obs 。###obs的使用到这里现在下载obs,然后进行设置,步骤如下图:

步骤一:

小型直播系统-java实现(二)

步骤二:

步骤三:

现在你已经成功的推流成功,cd到你设置的目录下面,就可以看到后缀是.m3u8的视频了,下面开始拉流,介绍的是前端拉流用到的框架结构 vue-video-player + videojs-contrib-hls。如果你迫不及待,现在就可以用页面进行观看一波

********************************************************* ************************************************************************

“`<!DOCTYPE html>

<html>

<head>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>

<title>HLS Player</title>

</head>

<body>

<video poster=”poster.png” height=”720″ width=”1280″ controls>

<source src=”” type=”application/vnd.apple.mpegurl” /> <p class=”warning”>Your browser does not support HTML5 video.</p>

</video>

</body>

</html>`

“但是很遗憾,只有苹果手机的Safari浏览器支持,安卓手机的没测试。

前端拉流采用的是 vue-video-player + videojs-contrib-hls,github地址是,video.js是一个开源的视频播放器,开始我使用的是一个cdplayer,同样支持m3u8的播放,这里可能有人有疑问,为什么不用h5直接播放呢?因为苹果手机天生支持m3u8格式的播放,但是pc很遗憾并不支持,所以需要我们自己编写播放规则可以百度一下 vue-video-player + videojs-contrib-hls的使用很重要的一点,需要解决视频跨域问题。也就是视频播放路径和我们的项目在同一域名端口下。

文章来源:智云一二三科技

文章标题:小型直播系统-java实现(二)

文章地址:https://www.zhihuclub.com/182668.shtml

关于作者: 智云科技

热门文章

网站地图