从零搭建的前后端完整的直播网页方案

前言:由于前段时间刚租了台服务器打算自己玩玩,随想首页或者哪哪个页面挂个我个人的直播间应该还挺有趣的。遂探索如何在我的网站上弄一个直播。三下五除二,清清爽爽,看完此文5分钟即可直播。

整体思路

最简单直观的图解。 由上图,按步骤来说,我们只需要把流媒体服务器搭出来,直播就成一半了,流媒体服务器作为中间的载体至关重要。至于在前端播放rtmp流,有太多的轮子,这里就采用知名的video.js 。就不细说了。

安装nginx

选择 nginx 1.7.11.3 Gryphon.zip http://nginx-win.ecsds.eu/download/ 解压该包作为nginx的目录

安装rtmp模块

https://github.com/arut/nginx-rtmp-module/archive/master.zip 解压至nginx根目录下 解压后更将文件名从 nginx-rtmp-module-master 更改为 nginx-rtmp-module

编辑配置文件

默认的配置文件的最底部添加 rtmp 流媒体服务器的相关配置

#user nobody;

# multiple workers works !

worker_processes 2;

#error_log logs/error.log;

#error_log logs/error.log notice;

#error_log logs/error.log info;

#pid logs/nginx.pid;

events {

worker_connections 8192;

# max value 32768, nginx recycling connections+registry optimization =

# this.value * 20 = max concurrent connections currently tested with one worker

# C1000K should be possible depending there is enough ram/cpu power

# multi_accept on;

}

http {

#include /nginx/conf/naxsi_core.rules;

include mime.types;

default_type application/octet-stream;

#log_format main '$remote_addr:$remote_port - $remote_user [$time_local] "$request" '

# '$status $body_bytes_sent "$http_referer" '

# '"$http_user_agent" "$http_x_forwarded_for"';

#access_log logs/access.log main;

# # loadbalancing PHP

# upstream myLoadBalancer {

# server 127.0.0.1:9001 weight=1 fail_timeout=5;

# server 127.0.0.1:9002 weight=1 fail_timeout=5;

# server 127.0.0.1:9003 weight=1 fail_timeout=5;

# server 127.0.0.1:9004 weight=1 fail_timeout=5;

# server 127.0.0.1:9005 weight=1 fail_timeout=5;

# server 127.0.0.1:9006 weight=1 fail_timeout=5;

# server 127.0.0.1:9007 weight=1 fail_timeout=5;

# server 127.0.0.1:9008 weight=1 fail_timeout=5;

# server 127.0.0.1:9009 weight=1 fail_timeout=5;

# server 127.0.0.1:9010 weight=1 fail_timeout=5;

# least_conn;

# }

sendfile off;

#tcp_nopush on;

server_names_hash_bucket_size 128;

## Start: Timeouts ##

client_body_timeout 10;

client_header_timeout 10;

keepalive_timeout 30;

send_timeout 10;

keepalive_requests 10;

## End: Timeouts ##

#gzip on;

server {

listen 80;

server_name localhost;

#charset koi8-r;

#access_log logs/host.access.log main;

## Caching Static Files, put before first location

#location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {

# expires 14d;

# add_header Vary Accept-Encoding;

#}

# For Naxsi remove the single # line for learn mode, or the ## lines for full WAF mode

location / {

#include /nginx/conf/mysite.rules; # see also http block naxsi include line

##SecRulesEnabled;

##DeniedUrl "/RequestDenied";

##CheckRule "$SQL >= 8" BLOCK;

##CheckRule "$RFI >= 8" BLOCK;

##CheckRule "$TRAVERSAL >= 4" BLOCK;

##CheckRule "$XSS >= 8" BLOCK;

root html;

index index.html index.htm;

}

# For Naxsi remove the ## lines for full WAF mode, redirect location block used by naxsi

##location /RequestDenied {

## return 412;

##}

## Lua examples !

# location /robots.txt {

# rewrite_by_lua '

# if ngx.var.http_host ~= "localhost" then

# return ngx.exec("/robots_disallow.txt");

# end

# ';

# }

#error_page 404 /404.html;

# redirect server error pages to the static page /50x.html

#

error_page 500 502 503 504 /50x.html;

location = /50x.html {

root html;

}

# proxy the PHP scripts to Apache listening on 127.0.0.1:80

#

#location ~ \.php$ {

# proxy_pass http://127.0.0.1;

#}

# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000

#

#location ~ \.php$ {

# root html;

# fastcgi_pass 127.0.0.1:9000; # single backend process

# fastcgi_pass myLoadBalancer; # or multiple, see example above

# fastcgi_index index.php;

# fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

# include fastcgi_params;

#}

# deny access to .htaccess files, if Apache's document root

# concurs with nginx's one

#

#location ~ /\.ht {

# deny all;

#}

}

# another virtual host using mix of IP-, name-, and port-based configuration

#

#server {

# listen 8000;

# listen somename:8080;

# server_name somename alias another.alias;

# location / {

# root html;

# index index.html index.htm;

# }

#}

# HTTPS server

#

#server {

# listen 443 ssl spdy;

# server_name localhost;

# ssl on;

# ssl_certificate cert.pem;

# ssl_certificate_key cert.key;

# ssl_session_timeout 5m;

# ssl_prefer_server_ciphers On;

# ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

# ssl_ciphers ECDH+AESGCM:ECDH+AES256:ECDH+AES128:ECDH+3DES:RSA+AESGCM:RSA+AES:RSA+3DES:!aNULL:!eNULL:!MD5:!DSS:!EXP:!ADH:!LOW:!MEDIUM;

# location / {

# root html;

# index index.html index.htm;

# }

#}

}

rtmp {

server {

listen 1935;

chunk_size 4000;

application live {

live on;

}

}

}

接着 启动nginx 此时 本机上的 rtmp://localhost:1935/live 的路径已被作为流媒体服务器处理了

使用直播软件推流

直播软件可选择的余地很多,这里使用开源的软件OBS https://obsproject.com/zh-cn/

这里使用的是OBS-Studio-28.1.2

服务器那只需要将本机的ip地址填上就行了。

linux 宝塔面板

https://blog.csdn.net/weixin_28882177/article/details/117032198

前端播放rtmp流

videojs 播放rtmp流,随便搜搜都是文章。

有一点需要注意的是: video 6.0及以上版本,需要引入videojs-flash库(5.0及以下版本,flash在其核心库中,高版本分离了flash)

其余事项

在使用软件测试该流时 请记得将 1935 端口放行,当然以此类推,如果你将其放在任意的端口 应该在你的云服务器上将该端口放行以便外部访问。