Http Media Streaming Server - html

I have developed video streaming application with RED5 media server(RTMP). Instead of RTMP need to stream live video through HTTP.
Any open source HTTP media server??
Is any open source server which supports both RTMP and HTTP ?
Thanks in advance.

Primarily, HTTP and RTMP are different protocols. You won't serve RTMP inside the HTTP. (Although you can do this for a tunneling solution).
Exist several ways to do HTTP Streaming. Such as HLS, DASH, Smooth and Progresive Download. If you need serve streaming to iOS (iPad, iPhone, Apple TV) you will need to use HLS.
As well as arcyqwerty said. Any HTTP server is able to serve HTTP Streaming. But you will need to prepare your media files and the manifest files before serving.
Here are some links very important for read about HLS (HTTP Live Streaming):
https://developer.apple.com/library/ios/documentation/networkinginternet/conceptual/streamingmediaguide/Introduction/Introduction.html
https://developer.apple.com/streaming/
http://features.encoding.com/http-live-streaming-hls/
https://datatracker.ietf.org/doc/html/draft-pantos-http-live-streaming-12
What about open source servers. I know these:
Flumotion: http://www.flumotion.net/
Gstreamer Server Streaming: http://cgit.freedesktop.org/gstreamer/gst-streaming-server/
Nginx HLS Module: http://nginx.org/en/docs/http/ngx_http_hls_module.html (Only Nginx Plus)
Or you can do like me and use GStreamer for segmenting and make manifest. And finaly I use the Nginx only to serve them.
I hope I helped you a little bit.

Any HTTP server that can serve files (apache, nginx, IIS, etc) can "stream" media over HTTP.
So if you want, you can keep RED5 for RTMP and set up an HTTP server to serve the same files.
You may want to look into Media streaming basics - HTTP vs RTMP for info about the protocols
Adding the nginx-rtmp module to nginx might be what you're looking for if you need a single-product solution
https://github.com/arut/nginx-rtmp-module

I use this and it works properly. (Ubuntu 12.04 TLS server)
Step by step:
sudo apt-get install build-essential libpcre3 libpcre3-dev libssl-dev
wget http://nginx.org/download/nginx-1.6.0.tar.gz
wget https://github.com/arut/nginx-rtmp-module/archive/master.zip
tar -zxvf nginx-1.6.0.tar.gz
unzip master.zip
cd nginx-1.6.0
./configure --with-http_ssl_module --add-module=../nginx-rtmp-module-master --with-http_flv_module --with-http_mp4_module
make
sudo make install
sudo /usr/local/nginx/sbin/nginx -s stop
sudo /usr/local/nginx/sbin/nginx
NGINX Config: (/usr/local/nginx/conf/nginx.conf)
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
rtmp {
server {
listen 1935;
chunk_size 4000;
# video on demand for flv files
application vod {
play /var/flvs;
}
# video on demand for mp4 files
application vod2 {
play /var/mp4s;
}
}
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
gzip on;
server {
listen 80;
server_name 192.168.52.16;
#charset koi8-r;
#access_log logs/host.access.log main;
# This URL provides RTMP statistics in XML
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
# XML stylesheet to view RTMP stats.
# Copy stat.xsl wherever you want
# and put the full directory path here
root /var/www/;
}
location /hls {
# Serve HLS fragments
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias /tmp/app;
expires -1;
}
# location /hds {
# f4f; # Use the HDS handler to manage requests
# # serve content from the following location
# alias /var/www/video;
# }
location /video {
mp4;
flv;
mp4_buffer_size 4M;
mp4_max_buffer_size 10M;
}
location / {
root html;
index index.html index.htm;
}
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;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$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;
#}
}
}
Save the config file and:
sudo /usr/local/nginx/sbin/nginx -s stop
sudo /usr/local/nginx/sbin/nginx
Next...
Create two directories:
mkdir /var/flvs
mkdir /var/mp4s
You need copy an mp4 file to the mp4s directory. For example: sample.mp4
Finaly
sudo /usr/local/nginx/sbin/nginx -s stop
sudo /usr/local/nginx/sbin/nginx
Try:
rtmp://your_server_ip/vod2/sample.mp4
(suggest: you use the VLC media player)
or html code
<html>
<head>
<title>RTMP Video</title>
<!-- flowplayer javascript component -->
<script src="http://releases.flowplayer.org/js/flowplayer-3.2.12.min.js"></script>
</head>
<body>
<div id="player" style="width:644px;height:480;margin:0 auto;text-align:center">
<img src="images/background.jpg" height="480" width="644" /></div>
<script>
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", {
clip: {
url: 'sample.mp4',
scaling: 'fit',
provider: 'hddn'
},
plugins: {
hddn: {
url: "swf/flowplayer.rtmp-3.2.13.swf",
// netConnectionUrl defines where the streams are found
netConnectionUrl: 'rtmp://your_server_ip:1935/vod2/'
}
},
canvas: {
backgroundGradient: 'none'
}
});
</script>
</body>
</html>

Related

Chrome does not go to localhost website but rather nginx screen

I setup a VM Ubuntu 18.04 and using a LNMP stack. I have my website working and connecting just fine in firefox, but for chrome it just points to the "Welcome to Nginx!" Screen.
I have tried disabling caches, removing anything relating to caches, and browsing in incognito mode. All the stack overflow answerI have found didn't help, which included going to chrome flags and doing some things there.
For the life of me I cannot figure out why it works on Firefox but not Chrome. I just put my website live today and a lot of CSS is off because its chrome based and not FF based. I want to correct it, but working in a non-local environment is driving me crazy.
Below is my nginx setup.
server {
server_name zeragames.localhost;
root /var/www/html/zeragames/web; ## <-- Your only path reference.
location = /favicon.ico {
log_not_found off;
access_log off;
}
location = /robots.txt {
allow all;
log_not_found off;
access_log off;
}
# Very rarely should these ever be accessed outside of your lan
location ~* \.(txt|log)$ {
allow 192.168.0.0/16;
deny all;
}
location ~ \..*/.*\.php$ {
return 403;
}
location ~ ^/sites/.*/private/ {
return 403;
}
# Block access to scripts in site files directory
location ~ ^/sites/[^/]+/files/.*\.php$ {
deny all;
}
# Allow "Well-Known URIs" as per RFC 5785
location ~* ^/.well-known/ {
allow all;
}
# Block access to "hidden" files and directories whose names begin with a
# period. This includes directories used by version control systems such
# as Subversion or Git to store control files.
location ~ (^|/)\. {
return 403;
}
location / {
# try_files $uri #rewrite; # For Drupal <= 6
try_files $uri /index.php?$query_string; # For Drupal >= 7
}
location #rewrite {
#rewrite ^/(.*)$ /index.php?q=$1; # For Drupal <= 6
rewrite ^ /index.php; # For Drupal >= 7
}
# Don't allow direct access to PHP files in the vendor directory.
location ~ /vendor/.*\.php$ {
deny all;
return 404;
}
# Protect files and directories from prying eyes.
location ~* \.(engine|inc|install|make|module|profile|po|sh|.*sql|theme|twig|tpl(\.php)?|xtmpl|yml)(~|\.sw[op]|\.bak|\.orig|\.save)?$|/(\.(?!well-known).*)|Entries.*|Repository|Root|Tag|Template|composer\.(json|lock)|web\.config$|/#.*#$|\.php(~|\.sw[op]|\.bak|\.orig|\.save)$ {
deny all;
return 404;
}
# In Drupal 8, we must also match new paths where the '.php' appears in
# the middle, such as update.php/selection. The rule we use is strict,
# and only allows this pattern with the update.php front controller.
# This allows legacy path aliases in the form of
# blog/index.php/legacy-path to continue to route to Drupal nodes. If
# you do not have any paths like that, then you might prefer to use a
# laxer rule, such as:
# location ~ \.php(/|$) {
# The laxer rule will continue to work if Drupal uses this new URL
# pattern with front controllers other than update.php in a future
# release.
location ~ '\.php$|^/update.php' {
fastcgi_split_path_info ^(.+?\.php)(|/.*)$;
# Ensure the php file exists. Mitigates CVE-2019-11043
try_files $fastcgi_script_name =404;
# Security note: If you're running a version of PHP older than the
# latest 5.3, you should have "cgi.fix_pathinfo = 0;" in php.ini.
# See http://serverfault.com/q/627903/94922 for details.
include fastcgi_params;
# Block httpoxy attacks. See https://httpoxy.org/.
fastcgi_param HTTP_PROXY "";
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
fastcgi_param QUERY_STRING $query_string;
fastcgi_intercept_errors on;
# PHP 5 socket location.
#fastcgi_pass unix:/var/run/php5-fpm.sock;
# PHP 7 socket location.
fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
}
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
try_files $uri #rewrite;
expires max;
log_not_found off;
}
# Fighting with Styles? This little gem is amazing.
# location ~ ^/sites/.*/files/imagecache/ { # For Drupal <= 6
location ~ ^/sites/.*/files/styles/ { # For Drupal >= 7
try_files $uri #rewrite;
}
# Handle private files through Drupal. Private file's path can come
# with a language prefix.
location ~ ^(/[a-z\-]+)?/system/files/ { # For Drupal >= 7
try_files $uri /index.php?$query_string;
}
# Enforce clean URLs
# Removes index.php from urls like www.example.com/index.php/my-page --> www.example.com/my-page
# Could be done with 301 for permanent or other redirect codes.
if ($request_uri ~* "^(.*/)index\.php/(.*)") {
return 307 $1$2;
}
}

how to serve xml file as a static content in nginx

I have a test.xml file stored in the location
/deploy/projects/backend/assets. I tried to serve this file as a static content when someone accesses this using link https://xyz/assets/test.xml. However, it gives error "404 Not Found". My nginx config file is as below:
cat nginx/server.conf
http {
include /etc/nginx/mime.types;
client_max_body_size 100m;
server {
listen 80 default_server;
server_name _;
location ~ ^/assets/ {
root /deploy/projects/backend;
}
}
}

Angular 8 + Nginx - failed to load resource

I have an application written in Angular 8 that I'm serving on nginx. After the deployment I get an following error:
Failed to load resource: the server responded with a status of 404 ()
Additionally in the Dev Tools we can see such a message:
error: "404 Not Found404 Not Foundnginx/1.12.0
message: "Http failure response for https://myUrl/app/assets/config/endpoints.json: 404 OK
name: "HttpErrorResponse" ok: false status: 404 statusText:
"OK" url: "https://myUrl/app/assets/config/endpoints.json"
What I didn't understand why is the response stating "OK"? But it's not the main problem. The main problem is that I can't load this endpoints.json file neither access any file located under the assets dir.
When I directly go to the URI:
https://myUrl/app/someFile.png
then it's visible, but if I try to reach
https://myUrl/app/assets or https://myUrl/app/assets/logo.png
then i get an 404 error page.
It's served from a docker container and I saw that all files are there so the structure is as follows in
/usr/share/nginx/html/
-/
-index.html
-assets/
-------config/
-------------endpoints.json
-------images/
-------------logo.png
-polifills.js
-favicon.ico
The app was build with the --prod flag and the base href flag --base-href ./
As I see the favicon is loading and all the scripts in the main dir work fine. The problem is related to the assets dir...
Here are my files:
* nginx.conf
server {
listen 8888;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
include /etc/nginx/mime.types;
try_files $uri $uri/ /index.html;
}
}
Enpoints service (which is trying to get this endpoints.json
private enpoints$: Observable<Endpoint>;
private readonly ENDPOINT_URL = './assets/config/endpoints.json';
constructor(private http: HttpClient) {}
public loadEndpoints(): Observable<Endpoint> {
if (!this.enpoints$) {
this.enpoints$ = this.http.get<Endpoint>(this.ENDPOINT_URL).pipe(shareReplay(1));
}
return this.enpoints$;
}
Any suggestions?
Just figured it out. The issue was related to my nginx configuration.
I had to take the root path out of the location block so it's applicable to all locations. The official nginx pitfalls doc helped me here a lot.
Now my config file looks like that:
server {
listen 8888;
server_name localhost;
root /usr/share/nginx/html;
location / {
index index.html index.htm;
include /etc/nginx/mime.types;
try_files $uri $uri/ /index.html;
}
location /assets {
try_files $uri $uri/ /index.html;
}
}
Although I think the second block isn't needed at all. I have to check it, and will reply.

embed live RTMP stream in html with flowplayer(nginx-rtmp-module)

I have an nginx server with the rtmp-module. I am using ffmpeg to transcode from rtsp to rtmp. I'm able to view the live stream with VLC but I am unable to embed the video in html. Here is my nginx.conf:
worker_processes 1;
events {
worker_connections 1024;
}
# HTTP server
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
root html;
index index.html index.htm;
}
# path to HLS application service
location /media_server {
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root /usr/local/nginx-streaming/html;
add_header Cache-Control no-cache;
}
# redirect server error pages to the static page /50x.html
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
# RTMP media server
rtmp {
server {
listen 1935;
chunk_size 4000;
# Transcoding (ffmpeg needed)
application media_server {
live on;
hls on;
hls_path /usr/local/nginx-streaming/html/media_server;
hls_nested on;
hls_variant _low BANDWIDTH=640000;
hls_variant _hi BANDWIDTH=2140000;
# ffmpeg static execution
exec_static /usr/bin/ffmpeg -rtsp_transport tcp -i rtsp://myipaddress:554 -framerate 6 -video_size 1280x720 -vcodec libx264 -preset veryfast -maxrate 6144k -bufsize 3968k -pix_fmt yuv420p -g 60 -c:a aac -b:a 128k -ar 44100 -f flv rtmp://localhost/media_server/test;
}
}
}
here is my html:
<!DOCTYPE html>
<html><head>
<title></title>
<meta charset="utf-8">
<!-- for video tag based installs flowplayer depends on jQuery 1.7.2+ -->
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<!--
include flowplayer JavaScript file that does
Flash embedding and provides the Flowplayer API.
-->
<script type="text/javascript" src="http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js"></script>
</head>
<body>
<!-- widescreen container, 1280x720 (clip dimensions) * 1.15, center splash -->
<div id="theplayer" style="width:512px;height:288px;margin:0 auto;text-align:center"><object id="theplayer_api" name="theplayer_api" data="http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf" type="application/x-shockwave-flash" width="100%" height="100%"><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="always"><param name="quality" value="high"><param name="bgcolor" value="#000000"><param name="flashvars" value="config={"clip":{"url":"test","live":true,"scaling":"fit","provider":"rtmp"},"plugins":{"rtmp":{"url":"http://releases.flowplayer.org/swf/flowplayer.rtmp-3.2.13.swf","netConnectionUrl":"rtmp://localhost:1935/media_server/telesanremo"},"controls":{"url":"http://releases.flowplayer.org/swf/flowplayer.controls-3.2.16.swf"}},"playerId":"theplayer","playlist":[{"url":"test","live":true,"scaling":"fit","provider":"rtmp"}]}"></object></div>
<script type="text/javascript">
$f("theplayer", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
clip: {
url: 'test',
live: 'true',
provider: 'rtmp'
},
plugins: {
rtmp: {
url: 'flowplayer.rtmp-3.2.13.swf',
netConnectionUrl: 'rtmp://localhost:1935/media_server'
}
}
});
</script>
</body></html>
the error i get is:
201: unable to load stream or clip file connection failed
What am i doing wrong?

nginx HLS stream not working

I've installed nginx with RTMP module on my linux server where I want it to receive a RTMP stream from Open Broadcaster Software, convert it to HLS and play it on my private website with some HTML5 player. Receiving the stream trough RTMP works, but the HLS stream doesn't seem to work. My current config is like so:
worker_processes 1;
events {
worker_connections 1024;
}
http {
#include mime.types;
#default_type application/octet-stream;
sendfile off;
#keepalive_timeout 65;
server {
listen 8080;
#server_name localhost;
#location / {
# root html;
# index index.html index.htm;
#}
#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;
#}
#*********************************************************************************************************************************
location /hls {
types {
application/vnd.apple.mpegurl m3u8;
}
root /mnt/;
add_header Cache-Control no-cache;
# To avoid issues with cross-domain HTTP requests (e.g. during development)
#add_header Access-Control-Allow-Origin *;
}
#*********************************************************************************************************************************
}
}
rtmp {
server {
listen 1935;
chunk_size 4096;
application stream {
live on;
#record off;
hls on;
hls_path /mnt/hls;
#hls_fragment 6s;
}
}
}
To recieve the RTMP stream I use rtmp://ip/stream/streamname which works fine, for receiving HLS I try to use http://ip:8080/hls/streamname.m3u8 which gives me the .m3u8 file if I type it in a browser, but doesn't seem to work on the webpage when I try to play the file in a HTML5 player. I'm testing via these pages: https://videojs.github.io/videojs-contrib-hls/ and https://demo.theoplayer.com/test-hls-mpeg-dash-stream
Can anyone help me understand what I'm doing wrong?
It would help if you shared what type of console or network errors you get when testing your HLS stream on those pages.
It might provide some insight for you to troubleshoot. For example, you might be getting Access Control Allow Origin errors by accessing your stream from a different domain. Try uncommenting this line in your nginx.conf and reloading.
#add_header Access-Control-Allow-Origin *;
I also have a reference to "video/mp2t ts;" in my hls location block.
location /hls/ {
# Serve HLS fragments
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root /tmp;
add_header Cache-Control no-cache;
add_header 'Access-Control-Allow-Origin' '*';
}
Cheers.
Ian
Under the line: #hls_fragment 6s;
Add the code: deny_play_all;
Apparently you can't play the hls or dash files if the rtmp stream can be played. I don't know why. It just worked for me.
nginx-1.21.1
location /hls/ {
# Serve HLS fragments
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
**root /tmp;** -> **alias /tmp;**
add_header Cache-Control no-cache;
add_header 'Access-Control-Allow-Origin' '*';
}