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

**URL:** <https://forum.amebaiot.com/t/ameba-pro2-ffmpeg/1506>\
**Category:** Multimedia\
**Tags:** 中文, rtl8735b\
**Created:** [October 27, 2022, 9:46am UTC](https://forum.amebaiot.com/t/ameba-pro2-ffmpeg/1506 "2022-10-27T09:46:05Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![dakamaster](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.amebaiot.com/dakamaster/32/1744_2.png) [@dakamaster](https://forum.amebaiot.com/u/dakamaster)\
**Post date:** [October 27, 2022, 9:46am UTC](https://forum.amebaiot.com/t/ameba-pro2-ffmpeg/1506/1 "2022-10-27T09:46:05Z")

</div>

## 介紹

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

## FFmpeg

 ![圖片](https://us1.discourse-cdn.com/flex016/uploads/ameba/original/2X/7/7663549395b6ac0f14332b0ebc0eaf5e317da9ea.png)

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

1. 從[Download FFmpeg 下載 FFmpeg](http://www.ffmpeg.org/download.html)，如果你使用的是 Windows 系統，可以從這裡的鏈接下載：[Builds - CODEX FFMPEG @ gyan.dev](https://www.gyan.dev/ffmpeg/builds/)

 ![粘貼圖像 20221026172129](https://us1.discourse-cdn.com/flex016/uploads/ameba/original/2X/e/e90d1dc8300ff9aca26571eda5694011b4cd1e7f.png)

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

 ![粘貼圖像 20221026172546](https://us1.discourse-cdn.com/flex016/uploads/ameba/original/2X/e/e6b704195370a59195b5f812cbfc9d8c034da012.png)

## nginx

 ![圖片](https://us1.discourse-cdn.com/flex016/uploads/ameba/original/2X/0/0228e94d7ef09ba371f2ca3385aa0bea3b81392a.png)

1. `nginx-rtmp-win32` 從GitHub下載[- illuspas/nginx-rtmp-win32：Nginx-rtmp-module Windows 構建。](https://github.com/illuspas/nginx-rtmp-win32)並解壓縮。

 ![粘貼圖像 20221026172930](https://us1.discourse-cdn.com/flex016/uploads/ameba/original/2X/b/bd897ea398ee588916bfef66c90b79d3034a7fa4.png)

1. `conf/nginx.conf` 使用以下代碼進行修改：

```auto
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` 檢查它是否顯示如下屏幕截圖所示的信息。然後按 關閉 nginx`nginx -s stop` 或按 退出`nginx -s quit` 。

 ![粘貼圖像 20221026173453](https://us1.discourse-cdn.com/flex016/uploads/ameba/original/2X/1/1e312b80ce646b259ee37897e9430124c59f98d9.png)

* * *

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

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

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

```

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

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

```

 ![粘貼圖像 20221026174744](https://us1.discourse-cdn.com/flex016/uploads/ameba/original/2X/2/2807dca67f138164ed9a5f5255fca3396131d268.png)

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

 ![粘貼圖像 20221026175117](https://us1.discourse-cdn.com/flex016/uploads/ameba/original/2X/2/2c192f58ef52af66faa286572c24e769865e5aad.jpeg)

 ![粘貼圖像 20221026175129](https://us1.discourse-cdn.com/flex016/uploads/ameba/original/2X/5/5fb139b7fa8411e5279b4189e8629453e92da68b.jpeg)

 ![粘貼圖像 20221026175153](https://us1.discourse-cdn.com/flex016/uploads/ameba/original/2X/8/82b3d4efd25196127fa1e51b3852d238b222d624.jpeg)

 ![粘貼圖像 20221026175229](https://us1.discourse-cdn.com/flex016/uploads/ameba/original/2X/4/4d6331db0c1a36e87ae0c2bccf4ed00160de011d.png)

* * *

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

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

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

```auto
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"  

```

例如，我使用的代碼指令如下：

```auto
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 軟體中接收您串流的視頻了。最終運行結果如下圖所示：

 ![圖片](https://us1.discourse-cdn.com/flex016/uploads/ameba/original/2X/0/06bba746de2482bbb674bf0f10e050175e857c28.png)

 ![圖片](https://us1.discourse-cdn.com/flex016/uploads/ameba/original/2X/4/49e04b1e5268e5708cf24c9b5d4d9cfb4b2a2c02.jpeg)

 ![圖片](https://us1.discourse-cdn.com/flex016/uploads/ameba/original/2X/8/8a8161f78fa078fbb59f7914afe28055291f2ce7.jpeg)