[分享] Ameba Pro2 通過 FFmpeg 串流視頻到瀏覽器

介紹

近日,Ameba Family 又有一名新成員加入-- Ameba Pro2 RTL8735B, 一顆支持視訊和 AI 功能的 IC。在我們預先發布的Ameba Pro2 Arduino SDK 中,我們已經支援了一個從開發板實時視頻串流到電腦VLC 媒體播放器的範例。但是,一些用戶可能希望將視頻串流到他們的 Web 瀏覽器。因此在正式支援這項功能之前,在本文中我將與大家分享如何使用 FFmpeg 和 Nginx 來實現所需的功能。

FFmpeg

圖片

FFmpeg 是領先的多媒體框架,能夠解碼編碼轉碼復用解復用串流過濾播放 幾乎所有東西。

  1. Download FFmpeg 下載 FFmpeg,如果你使用的是 Windows 系統,可以從這裡的鏈接下載:Builds - CODEX FFMPEG @ gyan.dev

  1. FFmpeg下載成功後,輸入ffmpeg -version ,看到下面的日誌,說明你的FFmpeg環境搭建成功

nginx

圖片

  1. nginx-rtmp-win32 從GitHub下載- illuspas/nginx-rtmp-win32:Nginx-rtmp-module Windows 構建。並解壓縮。

  1. conf/nginx.conf 使用以下代碼進行修改:
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;
        }
    }
}

  1. 打開 cmd 並輸入start nginx ,然後打開瀏覽器:localhost:20000 檢查它是否顯示如下屏幕截圖所示的信息。然後按 關閉 nginxnginx -s stop 或按 退出nginx -s quit


方法 1:在您的 PC 上顯示視頻串流

在 Ameba Pro2 上運行視頻串流範例后,在PC端鍵入以下命令:

ffplay -fflags nobuffer -flags low_delay -framedrop -rtsp_transport tcp rtsp://192.168.xxx.xxx/<your setting>  

將 RTSP 地址更改為 Ameba Pro2 廣播的地址. 例如,我使用的運行指令如下所示:

ffplay -fflags nobuffer -flags low_delay -framedrop -rtsp_transport tcp rtsp://192.168.1.153:554

當指令成功運行后,您的 PC 上將出現一個彈窗,顯示從您的 Ameba Pro2 相機串流到PC的傳輸視訊


方法 2:在瀏覽器上顯示視頻流

第二種方法將使用 FFmpeg 作為解碼器進行 RTSPRTMP 的轉碼,因為目前市面上大多數瀏覽器只能識別RTMP 格式的串流.

因此,首先使用以下 ffmpeg 的指令轉換視頻串流,然後將其流式傳輸到您搭建的 Nginx RTMP 本地服務器中,以在瀏覽器中查看。

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"  

例如,我使用的代碼指令如下:

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"

輸入指令後,打開瀏覽器並輸入rtmp://192.168.1.213/live/demo 然後您就可以在瀏覽器中彈出的 PotPlayer 軟體中接收您串流的視頻了。最終運行結果如下圖所示: