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

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?

Related

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;
}
}
}

Google Chrome MIME type for .csv file?

Does Google chrome support csv MIME type? I have the following entries in my mime.types (Nginx) file (these are only csv related entries):
types {
text/csv csv;
text/comma-separated-values csv;
text/anytext csv;
application/csv csv;
application/csv+xml csv;
}
Here is my nginx.conf file:
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
gzip_types text/plain text/xml text/css
text/comma-separated-values
text/javascript application/x-javascript
application/atom+xml;
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 /var/log/nginx/access.log main;
sendfile off;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
include /etc/nginx/conf.d/*.conf;
}
But Chrome won't like it! No problem on Safari though!
Is there a Chrome specific csv support?
Thanks
I resolved the issue by adding:
add_header Content-Type text/csv;
to the nginx webapp.conf file where I define my specific location:
location /ingressfile {
access_log /var/log/nginx/ingressfile.log main;
set $module company.api;
set $app app;
uwsgi_pass restapi;
uwsgi_intercept_errors on;
# add support for csv files
add_header Content-Type text/csv;
# Use this I'm-a-teapot code to redirect to static file
error_page 418 = #ingressfile;
}
Hopefully this helps people with the same kind of issues!

Nginx unable to host HTML file

I get the following error when I try to host HTML or text files:
2017/09/27 21:30:06 [emerg] 4652#13640: unexpected end of file,
expecting ";" or "}" in C:/nginx/html/reports/Summary.html:1068
It looks like its unable to identify the type of the file may be (my guess)
Also the server_name field doesn't seem to work as expected.
Have I missed something?
This is how the file header looks:
<!DOCTYPE html>
<html>
<head><title>Content Summary</title>
<meta charset="utf-8" http-equiv="Content-Type" content="text/html">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
This is my nginx conf:
user www-data;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include C:/nginx/conf/mime.types;
default_type application/octet-stream;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 600;
types_hash_max_size 2048;
proxy_read_timeout 300;
proxy_connect_timeout 300;
server {
listen 89;
server_name reports.devops.com;
location / {
include C:/nginx/html/reports/Summary.html;
}
}
}
Include is for including nginx config. So you need to change your config file to below
user www-data;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include C:/nginx/conf/mime.types;
default_type application/octet-stream;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 600;
types_hash_max_size 2048;
proxy_read_timeout 300;
proxy_connect_timeout 300;
server {
listen 89;
server_name reports.devops.com;
location / {
root C:/nginx/html/reports/;
index index.html Summary.html;
try_files $uri $uri/;
}
}
}
The root C:/nginx/html/reports/; directive will tell nginx that you are looking to serve files from this directory. index index.html Summary.html; directive will tell it to search for files like index.html and Summary.html is no file is not specified. And try_files $uri $uri/; will tell nginx to either check the url as a file or a folder.

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' '*';
}

Http Media Streaming Server

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>