[Sharing] Video Streaming from Ameba Pro2 to Browser via FFmpeg

[dakamaster]

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.

1. 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
   

   

2. 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

1. Download nginx-rtmp-win32 from GitHub - illuspas/nginx-rtmp-win32: Nginx-rtmp-module Windows builds. and unzip it.
   

   

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

3. 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 by nginx -s stop or quit by nginx -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.

[Marco_Rizzo]

Hello everyone, I would like to know if it is possible to use ffmpeg instead of vlc in the Multimedia - RTP Audio Stream example.
I would like to send the audio stream via ffmpeg to amb82.
Thank you,
Marco.

[M-ichae-l]

Please refer to RTP Class – Realtek IoT/Wi-Fi MCU Solutions .
For usage of FFmpeg, official SDK will keep using vlc instead.