编程技术分享平台

网站首页 > 技术教程 正文

小型直播系统-java实现(二)（直播系统开发教程）

xnh888 2024-10-05 03:07:03 技术教程 25 ℃ 0 评论

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

  1. 软件编译从下面的网址分别下载nginx和nginx-rtmp-module：http://nginx.org/en/download.htmlhttps://github.com/arut/nginx-rtmp-module然后解压 -zxvf

  2. 进入nginx的源码目录下面./configure --add-module=/path/to/nginx-rtmp-module --with-http_ssl_module --with-debug来增加这个模块，然后makemake install

  3. 在原有的nginx.conf中加入如下配置

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的使用http://soft.qazwaxs.com/OBS到这里现在下载obs，然后进行设置，步骤如下图：

步骤一：

步骤二：

步骤三：

现在你已经成功的推流成功，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="http://192.168.90.26:8080/hls/mystream.m3u8" 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地址是https://github.com/videojs/videojs-contrib-hls，video.js是一个开源的视频播放器，开始我使用的是一个cdplayer，同样支持m3u8的播放，这里可能有人有疑问，为什么不用h5直接播放呢？因为苹果手机天生支持m3u8格式的播放，但是pc很遗憾并不支持，所以需要我们自己编写播放规则可以百度一下 vue-video-player + videojs-contrib-hls的使用很重要的一点，需要解决视频跨域问题。也就是视频播放路径和我们的项目在同一域名端口下。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.