• 注册
  • 任意之门 任意之门 关注:265 内容:1080

    Livego: 部署一个简单直播网站服务,分享视频与朋友一起看

  • 查看作者
  • 打赏作者
  • 6
    签到之王

    用于异地和朋友一起看视频,总不是很方便,虽然也有类似的解决方案,但未免需要安装对应浏览器以及复杂插件,并且支持有限不是很方便,例如 Netflix 等付费流媒体服务,对方可能也得需要有同样付费账号才可以使用,否则无法使用,并且体验没有客户端好。

    在这里我就想通过类似直播的方式,将自己本地的片源推流到服务器,再通过简单网页将视频加载出来播放,你的朋友只需要通过浏览器访问就可以与你同时看视频了,并且推流时你可以选择本地片源或者浏览器、其他流媒体客户端、NAS资源等。

    以下将记录下我的完成过程,你需要准备下内容:

    • 高带宽服务器

    • 推流所用电脑(可选见文末)

    • 域名 及其 https 证书

    服务器配置

    • 服务器端需要安装 Nginx 实现一个网站服务,并搭建一个 livego 实现直播服务。

    • 准备好域名和证书,例如你的域名是:

    live.test.com

    • 将你的域名解析到服务器,是否使用 CDN 取决于你的服务器网络速度,以及推流服务、FLV 加载服务都是非80、443 端口,CDN不能直接dai–li,当然你可以使用 Nginx 反向dai–li解决。

    我这里使用不接入CDN的方式

    安装 Docker

    • 如果你还没有安装 Docker 可以选择一键安装。

    1. curl -fsSL 链接 -o get-docker.sh

    2. sh get-docker.sh

    复制代码
    安装 livego

    • livego 是一个非常简单易配置的直播服务端,采用 Golang 编写,能够轻易部署在各种环境下。

    • 开源地址:

    • 采用一键安装就行了,配置忽略。

    1. docker run -p 1935:1935 -p 7001:7001 -p 7002:7002 -p 8090:8090 -d gwuhaolin/livego

    复制代码

    • 需要注意,docker 内的版本更新不及时,有的功能没有支持如 https,如果需要最新版本,请自行编译 master 分支。

    • 获取推流的 key

    1. curl 链接

    2. <

    3. {“status”:200,”data”:”rfBd56ti2********************************5KLkIZ9PYk”}

    复制代码

    • 获取到的 key 将在你的 OBS 推流时使用。

    安装 Nginx

    • 网站文件和 nginx 配置目录如下:

    1. — nginx目录

    2. mkdir /mnt/data/nginx

    3. mkdir /mnt/data/nginx/conf.d -p

    4. — 网站目录

    5. mkdir /nnt/data/web/live/wwwroot -p

    6. — 证书目录

    7. mkdir /nnt/data/web/live/cert -p

    复制代码

    • 拉取镜像

    1. docker pull nginx

    复制代码

    • 创建一份临时 nginx 容器获取其 nginx.conf

    1. docker run –name tmp-nginx-container -d nginx

    2. docker cp tmp-nginx-container:/etc/nginx/nginx.conf $(pwd)/nginx.conf

    3. docker rm -f tmp-nginx-container

    复制代码

    • /mnt/data/nginx/conf.d/live.conf 配置

    • 172.17.0.1:7001 为 docker 默认网关地址

    1. server {

    2.         listen       80;

    3.         listen       443 ssl http2;

    4.         server_name live.eller.tech;

    5.         index index.html index.htm;

    6.         root  /app/live/wwwroot;

    7.         ssl_certificate      /app/live/cert/server.crt;

    8.         ssl_certificate_key  /app/live/cert/server.key;

    9.         ssl_session_timeout  5m;

    10.         ssl_protocols  TLSv1.1 TLSv1.2;

    11.         ssl_ciphers  HIGH:!aNULL:!MD5;

    12.         ssl_prefer_server_ciphers   on;

    13.         location /proxy {

    14.             proxy_pass 链接

    15.             proxy_http_version 1.1;

    16.             proxy_set_header Upgrade $http_upgrade;

    17.         }

    18. }

    复制代码
    创建 Nginx 容器

    1. docker run –name nginx \

    2. -v /mnt/data/nginx/nginx.conf:/etc/nginx/nginx.conf:ro \

    3. -v /mnt/data/nginx/conf.d:/etc/nginx/conf.d:ro \

    4. -v /mnt/data/web:/app \

    5. -p 80:80 -p 443:443  -d nginx

    复制代码
    网站前端程序

    • 将文件写入到 /mnt/data/web/live/wwwroot/index.html

    1. <!DOCTYPE html>

    2. <html>

    3. <head>

    4.     <meta charset=”UTF-8″>

    5.     <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

    6.     <meta name=”viewport” content=”initial-scale=1, maximum-scale=1″>

    7.     <title>Live broadcast for you</title>

    8.     <link href=”https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap-grid.css” rel=”stylesheet”>

    9.     <script src=”https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js”></script>

    10.     <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>

    11.     <style>

    12.         body { position: fixed; height: 100%;

    13.         background-color: #3e3e3e; }

    14.         #videoElement{

    15.             width:100%;

    16.             height:320px;

    17.         }

    18.         .controls{margin-top: 15px;}

    19.         .controls button{

    20.             padding: 6px 18px;

    21.         }

    22.     </style>

    23. </head>

    24. <body>

    25.     <div>

    26.         <video id=”videoElement” controls autoplay >Your browser is too old which doesn't support HTML5 video.</video>

    27.     </div>

    28.     <div>

    29.         <!–<button onclick=”flv_load()”>加载</button>–>

    30.         <button onclick=”flv_start()”>开始</button>

    31.         <button onclick=”flv_pause()”>暂停</button>

    32.         <button onclick=”flv_destroy()”>停止</button>

    33.         <br>

    34.         <br>

    35.         <input style=”width:100px” type=”text” name=”seekpoint” />

    36.         <button onclick=”flv_seekto()”>跳转</button>

    37.     </div>

    38.     <script>

    39.         var player = document.getElementById('videoElement');

    40.         if (flvjs.isSupported()) {

    41.             var flvPlayer = flvjs.createPlayer({

    42.                 type: 'flv',

    43.                 url: 'https://live.weixin.sb/proxy/live/movie.flv'

    44.             });

    45.             flvPlayer.attachMediaElement(videoElement);

    46.             flvPlayer.load();

    47.         }

    48.         function flv_start() {

    49.             player.play();

    50.         }

    51.         function flv_pause() {

    52.             player.pause();

    53.         }

    54.         function flv_destroy() {

    55.             player.pause();

    56.             player.unload();

    57.             player.detachMediaElement();

    58.             player.destroy();

    59.             player = null;

    60.         }

    61.         function flv_seekto() {

    62.             player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);

    63.         }

    64.     </script>

    65. </body>

    66. </html>

    复制代码
    推流

    • 本地使用 potplayer + OBS 进行播放采集推流

    • OBS 配置如下:

    • 服务器直接填写你的服务器IP和端口,记得开放防火墙规则。

    • 格式:rtmp://ip:1935/live/

    • 密钥在前面创建 livego 服务时获取的。

    • 保存后,就可以进行推流了。

    Livego: 部署一个简单直播网站服务,分享视频与朋友一起看

    浏览器播放

    • 将你的网址分享给朋友就可以一起看视频了。

    • 如果手机浏览器加载不出来换系统默认浏览器,或下载 Chrome。

    • 其他

    • PotPlayer 设置

    • 你可能需要的 PotPlayer 设置

    Livego: 部署一个简单直播网站服务,分享视频与朋友一起看

    Livego: 部署一个简单直播网站服务,分享视频与朋友一起看

    OBS 配置

    • 图中内容为:

    • 静音麦克风

    • 设置桌面音频为”监听并输出”

    Livego: 部署一个简单直播网站服务,分享视频与朋友一起看

    同步延迟问题

    • 建议不要通过推流端去看视频,你和对方都通过其他设备的浏览器播放能得到一个很好的同步。

    • 如果暂停时致使异步,可通过刷新网页解决。

    服务器推流

    • 如果你没有其他电脑,可以通过服务器进行推流,前提是服务器有对应的视频文件。

    1. ffmpeg -re -i demo.flv -c copy -f flv rtmp://localhost:1935/live/{channelkey}

    复制代码

    • ffmpeg 也可以通过 docker 安装的,localhost 可以改成 docker 网关IP 即可。

    楼主辛苦了,谢谢楼主,楼主好人一生平安!

    回复

    请登录之后再进行评论

    登录
    任意之门
  • 今日 0
  • 内容 1080
  • 关注 265
    • 大版主
    • 小版主
  • 眸海温涟
    眸海温涟
    你是故意找茬是不是?
  • 暂没有数据

    限时特惠VIP活动结束还有:

    VIP特惠开通
  • 偏好设置
  • 实时动态
  • 帖子间隔 侧栏位置: