Mac本地搭建视频推流播流环境

发表于 | 分类于
Mac本地搭建视频推流播流环境

Nginx安装

1
brew search nginx

安装

1
brew install nginx

下载后

==> nginx
Docroot is: /usr/local/var/www

The default port has been set in /usr/local/etc/nginx/nginx.conf to 8080 so that
nginx can run without sudo.

nginx will load all files in /usr/local/etc/nginx/servers/.

查看nginx配置文件目录 

1
open /usr/local/etc/nginx/servers/

查看网站目录

1
open /usr/local/var/www

单次启动

1
nginx

启动

1
brew services start nginx

停止

1
brew services stop nginx

Docker安装

下载地:https://download.docker.com/mac/stable/Docker.dmg

查看版本

1
docker --version

下载镜像时报错

docker: Error response from daemon: Get https://registry-1.docker.io/v2/: Service Unavailable.

设置镜像地址

Preferences => Docker Engine

配置改成如下

1
2
3
4
5
{
  "debug": true,
  "experimental": false,
  "registry-mirrors": ["http://hub-mirror.c.163.com"]
}

SRS安装

1
docker run -p 1935:1935 -p 1985:1985 -p 8080:8080 ossrs/srs:3

自定义配置文件转FLV流

假如我们的配置文件放在/Users/zhangjian/srs/srs.conf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
listen              1935;
max_connections     1000;
http_server {
    enabled         on;
    listen          8080;
    dir             ./objs/nginx/html;
}
vhost __defaultVhost__ {
    http_remux {
        enabled     on;
        mount       [vhost]/[app]/[stream].flv;
        hstrs       on;
    }
}

运行

1
docker run -d -p 1935:1935 -p 18080:8080  -v /Users/zhangjian/srs/srs.conf:/usr/local/srs/srs.conf -v /Users/zhangjian/srs/srs.log:/usr/local/srs/objs/srs.log ossrs/srs:3

推流测试

1
ffmpeg -re -stream_loop -1 -i ./Downloads/rtmptest.mp4 -vcodec copy -acodec copy -f flv -y rtmp://127.0.0.1:1935/live/test

对应的播放地址

流播放

推荐阿里WEB播放器

https://player.alicdn.com/aliplayer/index.html

阿里云Web播放器SDK，同时支持Flash和Html5两种播放技术。

  • Flash 模式（已停止更新）：
    • 视频格式：mp4、flv、m3u8、rtmp
    • 视频编码：H.264
    • 音频编码：AAC、MP3
    • 音频格式：MP3
  • HTML5 模式：
    • 视频格式：mp4、m3u8、flv
    • 视频编码：H.264
    • 音频编码：AAC
    • 音频格式：mp3

所以用该播放器播放rtmp流的时候必须安装Flash

转FLV流就可以用HTML5播放了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge" >
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
  <title>Aliplayer Functions</title>
  <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.8/skins/default/aliplayer-min.css" />
  <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.8/aliplayer-min.js"></script>
</head>
<body>
<div id="player-con"></div>
<script>
  var player = new Aliplayer({
    id: "player-con",
    source: "http://127.0.0.1:18080/live/test.flv",
    width: "100%",
    height: "500px",
    autoplay: true,
    preload: false,
    isLive: true
  }, function (player) {
    console.log("The player is created");
  });
</script>
</body>
</html>