Intro
Recently, Ameba Family has a new member who joined us, Ameba Pro2, which supports video and AI functions. In our pre-released Ameba Pro2 Arduino SDK, we have already supported real-time video streaming to VLC Media Player. However, some users might want to stream the video to their web browser. So, in this article, I will share with you guys how you could use FFmpeg to achieve the required feature.
FFmpeg
FFmpeg is the leading multimedia framework, able to decode , encode , transcode , mux , demux , stream , filter and play pretty much anything that humans and machines have created.
-
Download FFmpeg from Download FFmpeg, if you are using a Windows system, you can just download it from the link here: Builds - CODEX FFMPEG @ gyan.dev
-
After FFmpeg is successfully downloaded, key in
ffmpeg -version
, upon seeing the log below, it means your FFmpeg environment has been set up successfully
nginx
-
Download
nginx-rtmp-win32
from GitHub - illuspas/nginx-rtmp-win32: Nginx-rtmp-module Windows builds. and unzip it.
-
Modify
conf/nginx.conf
using the code below:
worker_processes 1;
error_log logs/error.log debug;
events {
worker_connections 1024;
}
rtmp {
server {
listen 1935;
chunk_size 4000;
application live {
live on;
}
application hls {
live on;
hls on;
hls_path temp/hls;
hls_fragment 8s;
}
}
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 20000;
location / {
root html;
index index.html index.htm;
}
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root html;
}
location /hls {
#server hls fragments
types{
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias temp/hls;
expires -1;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
- Open cmd and type
start nginx
, then open your browser:localhost:20000
to check whether it displays information as shown in the screenshot below. Then close nginx bynginx -s stop
or quit bynginx -s quit
.
Method 1: Display video streaming on your PC
Setup your video streaming example on Ameba, key in the command below, change the IP address to the IP broadcast by Ameba
ffplay -fflags nobuffer -flags low_delay -framedrop -rtsp_transport tcp rtsp://192.168.xxx.xxx/<your setting>
For example, I am using the code below
ffplay -fflags nobuffer -flags low_delay -framedrop -rtsp_transport tcp rtsp://192.168.1.153:554
Lastly, a pop-up window will appear on your PC which shows the video streamed from your Ameba Pro2 Camera
Method 2: Display video streaming on your Browser
The second method will use FFmpeg as a decoder to convert RTSP
to RTMP
since most browsers can only identify RTMP
.
Therefore, by using the command below to convert the video source first, then stream it to your Nginx RTMP localhost to view it in your browser.
ffmpeg -re -rtsp_transport tcp -i "rtsp Address" -f flv -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 1280x720 -q 10 "rtmp://localhost:1935/live/test"
For example, I am using the code below
ffmpeg -re -rtsp_transport tcp -i "rtsp://192.168.1.153" -f flv -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 1280x720 -q 10 "rtmp://192.168.1.213/live/demo"
Open your browser and key in rtmp://192.168.1.213/live/demo
, and open PotPlayer, then you are able to stream your video in the browser.
The result is as shown below:
A pop-up window will ask whether you want to open the website in PotPlayer
. You can download it from here. And the final results will be shown as below.