Live Streaming on AWS (AWS 即時影音串流架構)
- 作者 -
Shanna Chang, Solutions Architect, AWS
Sam Tu, Business Development Manager, AWS

[挑戰]
AWS 利用多個 services 打造符合 OTT 的即時影音串流解決方案,透過 MediaLive 加上MediaPackage 建立高可用、穩定地即時觀看體驗.AWS MediaLive 以及 MediaPackage 皆可隨著工作量附載,彈性的擴張服務解決傳統即時影像接收的硬體限制。此解決方案利用 dual input 的方式作為 redundent。AWS Elemental MediaPackage 也提供了像是 DRM Restart 和 Rewind 等等的客製選項,供客戶彈性運用串流後的影音資料
[操作步驟]
.adaefe6a84c7ee01b8773a8d5bdb20d4e6479eb1.jpg)
Column 1 |
Column 2 |
步驟一 |
利用 CloudFormation 部署架構 |
步驟二 |
建置一個新的input並且附加到主要channel (Optional) |
步驟三 |
利用OBS建置一個即時串流影像 (Optional) |
步驟一、利用 CloudFormation 部署架構
▍ 1.1
點選下方連結:https://thinkwithwp.com/tw/solutions/implementations/live-streaming-on-aws/#:~:text=Live%20Streaming%20on%20AWS%20architecture,(HLS)%20streams%20as%20output.
進入到主要畫面後,選擇右側的 [launch in the AWS Console] 選項.
.2f2ecf305af0e9958b6d653c2f821d2f666dc3ae.jpg)
▍ 1.2
登入 Console 以後,畫面會進入到 CloudFormation 的創建 Stack 畫面.點選右下角的[Next]
.29a88c00d59f83a7a64919062871e1fd7c0eab40.jpg)
▍ 1.3
進入到下一頁 Specify Stack details 的畫面,將頁面滑動至底部點選[Next]
.362645fed9b14a66a055bd6bf560dfccd765eac4.jpg)
▍ 1.4
進入到 Review LiveStreamingwithMediaStore 頁面,滑動至頁面底部,勾選 “I acknowledge that AWS ... ”.點選 [Create Stack]
.f7b926e7b567e73a112aca20b27297cc10202255.jpg)
▍ 1.5
在 CloudFormation 主要畫面中,會顯示我們創建的 Stack 狀態為 “CREATE_IN_PROGRESS” .等待大約 5~10 分鐘的時間後,CloudFormation 創建完成,並且 Status 的狀態會顯示 “CREATE_COMPLETE”.
.b813a82832b62612e939e822ed163dbd6353530b.jpg)
▍ 1.6
在創建完成的 CloudFormation 畫面上方,點選 [Resources] 這個分頁.在這個頁面中,我們可以看到利用 CloudFormation 創建出的資源.
.fd91c9e0dbbf7523358718e89e0dcebd7bd6ae61.jpg)
▍ 1.7
在創建完成的 CloudFormation 畫面上方,點選 [Outputs] 這個分頁.在這個頁面中,點選最下方 DemoConsole 連結,此為 demo 使用的 playback 網站
.5ebd991e7b6b32a1d61c301bfb946542a185b7be.jpg)
▍ 1.8
在 demo 網站中,我們可以透過下方不同輸出格式的按鈕,瀏覽不同格式的輸出畫面.如果成功看到播放畫面,則本次架構部署完成”.
.5ac61e3d0ce2ce92731558982d9d0e895cf04afe.jpg)
步驟二、建置一個新的 input 並且附加到主要channel (Optional)
▍ 2.1
到 MediaLive 頁面,點選 [Create Input] ,創建一個新的直播 Input
.139dbef83c1e6e924e67fa71231b278d8e6dbb10.jpg)
▍ 2.2

▍ 2.3
選擇創建一個新的 Security Group,並且輸入自己電腦的 IP ,點選 [Create Input security group]
.d0bf55b2d3f8369c003c2c998b1d8f363afbf739.jpg)
▍ 2.4
Destination 欄位 key 輸入 live ,value 輸入 mystream ,點選 [create input]
.36b4cc0705206e04b5ae30cb9e6a801825472e11.jpg)
▍ 2.5
創建完成後點選創建好的 input,在 endpoint 底下複製 URL
.7c9663719cd53dd4e3865768bd2ce8b670b4c4ac.jpg)
步驟三、利用 OBS 建置一個即時串流影像 (Optional)
▍ 3.1
至 OBS Studio 官網下載 OBS ,打開 OBS 點選右下角的 setting
.34142e6cddc639d2dddf206b816c7c5bde72a249.jpg)
▍ 3.2
在設定畫面點選左側 Stream, Service 選擇 Custom,Server 的欄位將剛剛複製 input 頁面中的 URL 貼到 server 欄位,stream key 填上 mystream
.0954513424b4a5af5f4c4b265e793f08332d50c0.jpg)
▍ 3.3
在 OBS 其他頁面中,照著以下設定填寫
.7e36a5ed1f1e717dcaf110ecffb2599601b2e888.jpg)
▍ 3.4
在 mediaLive 畫面,點選 channel ,點選 edit channel
.94d86c174b0cc2ceb2f8cbdc3faf39dca835c418.jpg)
▍ 3.5
在 Input 欄位點選 Add,增加我們剛剛新建的 input ,點選原本部署的 Input “LiveStreaming-livestream“,點選 [remove] ,接著點選 Channel 上方的 start 按鈕
.8dbf9fc3bf465c54280ab2bfc0ccd901f8cb304a.jpg)
▍ 3.6
在 OBS 點選 start streaming ,並且打開剛剛的播放畫面,大約延遲30秒的時間便會開始播放
[常見問題]
Q1: 再搭配 OBS 的直撥方案時,為什麼我在 demo page 的影像畫面一直無法顯示?
A1: 如果畫面無法呈現時,可以檢查 Input security group 是否有設定正確
Q2: 創建 input 時,顯示已經到達 input security group 的限制,請問我要怎麼創建一個新的 input security group?
A2: 您可以到 AWS Elemental MediaLive 的 input security group 的畫面去編輯 security group
Q3: 如果想搭配此直播 Solution 加上聊天室功能,有沒有推薦的聊天室Solution ?
A3: 本篇文章主要為 live streaming solution,如果有聊天室的需求可以尋求aws 其他服務,例如: https://thinkwithwp.com/blogs/mobile/building-a-serverless-real-time-chat-application-with-aws-appsync/
Q4: 目前 AWS 推出的直撥串流服務,除了MediaLive 還有 IVS,應該如何做選擇?
A4: AWS Elemental MediaLive 與 IVS 的,支援格式不太一樣,舉例來說: AWS MediaLive 目前支援 HLS, RTP, RTPM, MP4, AWS Elemental media services... 等, IVS 目前支援 RTMPS, Max resolution 目前 MediaLive 支援 4K, IVS 支援 1080p, 詳情可以參考 IVS 官方頁面.
[參考資料]
想要了解更多此架構用到的服務,點選下方連結:
