<!-- .slide: data-background="https://images.unsplash.com/photo-1589320843167-b3c194ee9e8f" --> # Ready, Set, Go Live! [This slide & QR](https://hackmd.io/@jokeum/Sk0LXzwzY)  [View source](https://hackmd.io/49nbctl9TIGxjaDMS5FyIA) ---- [toc] --- {%youtube 1R5uLqIc9n0 %} --- ## Who am I? - 前端設計師 :computer: - 影像創作者 :camera: - 影像顧問 :film_projector: ---- 簡孝樺，若思影像工作室負責人，自由接案導演、剪接師、前端設計師。 參與作品如「[非常木蘭](https://youtu.be/Vy_kq_RGNdo)」「[The Body Shop](https://youtu.be/1FsAP5i5n-w)」廣告、「[小男孩樂團](https://youtu.be/F3CCXOa_hi0)」MV、「[vTaiwan](https://vtaiwan.tw)」網站。 現正鑽研直播領域實作與研究，曾執行「[唐鳳辦公室](https://www.youtube.com/c/PdisTwGov)」「[Hahow](https://www.youtube.com/c/HahowIn)」多場直播活動。 --- # 1. 初探直播技術 👀 這節會簡單介紹一些現下直播工程常見的詞彙，幫助你瞭解實作時會碰到的各種東西，也可以透過這些關鍵字深入查詢更多資料。 --- ## 五個你通常要先考慮的要素 1. 音訊 Audio input 1. 影像 Video input 1. 編碼器 Switcher and encoder 1. 網路 Internet bandwidth 1. 平台 Live streaming platform [閱讀更多](https://vimeo.com/blog/post/how-to-live-stream/) ---  直播架構圖 ----  [直播架構圖](https://www.inside.com.tw/article/9119-how-to-build-pro-livestream) --- ### 1-1. 音訊 Audio input 想像一下，直播中出現的「聲音」，可能有哪些來源？ 🛎️ ---- - 主持人、講者 speakers - 播放影片的聲音 - 現場情境音樂 - 背景音 - 音效 SFX - [Jingles](https://youtu.be/tvt1ts4oFRA?t=96) - ... ---- 透過音訊擷取設備，將現實世界的**類比資訊**轉換成電腦世界的**數位資料**輸入 ```flow wave=>start: 聲波 input=>end: 音訊輸入 op=>operation: 麥克風 op2=>operation: 混音器/音效卡 wave(right)->op(right)->op2(right)->input ``` ---- ![](https://edge.rode.com/images/page/3/modules/569/R%C3%98DE_R%C3%98DECASTER_PRO_LEARNING_HUB_IMAGE_1H_1000x1000_RGB.jpg "RØDECaster Pro" =600x) ---- [快轉至常用設備介紹](#/23) --- ### 1-2. 影像 Video input 想像一下，直播中出現的「畫面」，可能有哪些來源？ 🛎️ ---- - 攝影機、webcam - 遠距視訊 - 影片、簡報 - 即時操作的螢幕畫面 screen captures - 圖片、影片、動態圖 footages - [聊天室留言](https://youtu.be/UOg3RvHO-xk?t=161) - [Input overlay](https://youtu.be/UDjueYD2_1Y) - ... ---- 透過視訊擷取設備，將現實世界的 **RAW 影像資訊**轉換成電腦世界的**數位資料**輸入 ```flow wave=>start: 光學色彩 input=>end: 影像輸入 op=>operation: 相機/感光元件 op2=>operation: 擷取卡 wave(right)->op(right)->op2(right)->input ``` ---- ![](https://i.imgur.com/RNlunBW.jpg "Lindy Video Capture Device" =600x) ---- [快轉至常用設備介紹](#/22) --- ### 1-3. 編碼器 Switcher and encoder 編碼器是 **轉換影音格式串流（如 h264）** 的工具，有軟體、硬體等不同形式，彼此也可以混合使用。 為直播設計的編碼器通常包含 **切換器的功能** ，用來切換畫面及聲音。 note: > [name=hahow] 希望能再多介紹目前的主流的直播硬體品牌、器材，各家差異是什麼以及其功能介紹 --- #### 軟體編碼器 software encoder 需要安裝在電腦上，依靠電腦效能運算畫面，如： [OBS](https://obsproject.com/), [Streamlabs](https://streamlabs.com/), [Vmix](https://www.vmix.com/), [Wirecast](https://www.telestream.net/wirecast/), ... [更多軟體介紹](https://www.dacast.com/blog/live-broadcasting-software/) ---- <!-- .slide: data-background="#fff" -->  [配置圖](https://support.google.com/youtube/answer/2907883) ---- :::success 👍 高彈性，容易加入各種訊源、特效 👍 可支援客製化操作及擴充 👍 有許多免費或比較便宜的方案 ::: :::danger 👎 編碼效能取決於電腦本身效能 👎 軟體運算延遲較高 ::: ---- ##### 以 OBS 為例  ---- - 開源軟體 - 社群支援、外掛豐富 - 可模擬成 virtual webcam ---- ##### 介面簡介（Demo） - scene & source - filter - audio mixer - transition - stream url/key - encoding method - bitrate - CPU usage --- #### 硬體編碼器 hardware encoder 通常由硬體本身負責運算畫面，搭配電腦/平板操作控制，如： [Atem mini](https://www.blackmagicdesign.com/products/atemmini), [YoloBox](https://www.yololiv.com/), [TriCaster](https://www.newtek.com/tricaster/), ... ---- <!-- .slide: data-background="#fff" -->  [配置圖](https://support.google.com/youtube/answer/2907883) ---- :::success 👍 硬體定製可提供穩定效能及可靠性 👍 編碼延遲低 👍 客戶服務 ::: :::danger 👎 通常比較貴 👎 訊源彈性較低，選擇固定 👎 產品生命週期不一定有支援未來的格式需求 ::: ---- ##### 以 Atem mini 為例  ---- - 上下游產品線齊全 - 功能專為直播需求設計，效能卓越 - 可模擬成 webcam device 使用 - 相對來說，訊源設定彈性低，現場改動麻煩 ----  Atem mini Extreme ISO ---- ##### 介面簡介（暫時沒有 Demo） ----  --- #### 瀏覽器 browser-based encoder 透過瀏覽器加入畫面、排版、其他線上資源，體驗上近似視訊會議，如： [streamyard](https://streamyard.com), [Melon](https://melonapp.com), [vimeo livestream](https://vimeo.com/vimeolivestream), ... ---- :::success 👍 大家都有瀏覽器，學習成本低 👍 網頁體驗的更新迭代速度最快 👍 容易介接其他網路服務來源 ::: :::danger 👎 功能受限於瀏覽器的技術發展 👎 穩定性取決於雲端服務平台本身 👎 雲端服務平台通常需要些許購置成本 ::: ---- ##### 以 streamyard 為例  ---- - 輕鬆開啟、容易操作 - 快速加入社群訊息畫面及邀請遠距來賓 - 整合視訊會議及直播功能 ---- ##### 介面簡介（Demo） - layout - banner - invite - social comment - multicast --- ### 1-4. 網路 Internet bandwidth 考量環境與預算，有哪些可用來上傳直播串流的網路供選擇？ :::info 💡 不管哪一種，最好的狀態是專線使用（或是做 QoS），避免其他裝置搶走頻寬，影響穩定度 💡 詢問上層網管有沒有鎖特定封包 ::: ---- #### 有線網路 wired LAN 找到離 ISP 源頭最近的路由器 LAN port，是最穩定的連線方式  ---- #### WIFI wireless LAN 容易受到距離、波長干擾，延遲較高，建議審慎考慮使用  ---- #### 行動熱點分享器/路由器 在沒有 LAN 或有餘裕準備備援的情況下（如外景或是多人共用網路），可另外租用 4G/5G 的網路供應設備 ![](https://i.imgur.com/K1apUbE.png "Netgear M5" =600x) ---- #### 網路聚合直播編碼器 兼具 **行動熱點** 及 **硬體編碼器** 特色的單兵直播包，接上攝影機 HDMI 即可上傳串流；頂級型號甚至能支援聚合 8 張網卡，共用上傳網速 ![](https://i.imgur.com/eMdjZQd.png "LiveU Solo+" =500x) --- ### 1-5. 平台 Live streaming platform 選擇平台，也就是選擇你的觀眾要在哪裡收看，影響廣泛，如維護顧客關係、後台資料蒐集利用、操作易用性、傳播率… - 單一平台 - youtube, facebook, twitch, ... - 多平台 simulcast/multicast - streamyard, vimeo, restream, ... - 視訊會議平台 - google meet, teams, skype, ... ---- [youtube studio](https://studio.youtube.com) [spec 最高支援 2160p 60fps](https://support.google.com/youtube/answer/2853702) ----  介面 ---- #### 操作步驟 1. 登入管理員權限帳號，進入 Studio 2. 建立 → 進行直播  ---- 3. 管理 → 安排直播時間  ---- 5. 輸入標題、說明、開始時間、縮圖等 6. 設定串流格式 1. 通常使用 RTMP 協定送串流，特殊情形可切換為 HTTP/RTMPS 2. 預設是固定的金鑰，如果需要同時開兩個可以點重設 3. （Optional）視互動需求選擇延遲程度 4. （Optional）其他設定視需求調整  ---- 7. 將串流網址/金鑰複製到串流編碼器（OBS） - 如 `rtmp://a.rtmp.youtube.com/live2` `g00q-eev7-3rtx-3u6y-5jsq` 8. （Optional）將備用串流的網址/金鑰複製到另一台串流編碼器 9. 點右上的分享，可得網址做宣傳 ---- [facebook](https://www.facebook.com/live/producer) [最高支援 720p 30fps（可升級 1080p 60fps）](https://www.facebook.com/business/help/162540111070395) :::info 支援 360 直播同時有 ambisonic 空間音效的平台，目前 facebook 是唯一選擇。 ref: https://www.zylia.co/blog/how-to-live-stream-a-360-video-with-ambisonics-audio-on-facebook-using-insta360-camera-and-zylia-zm-1microphone ::: ----  ---- [vimeo](https://vimeo.com/live/event/create) [最高支援 1080p 60fps](https://vimeo.zendesk.com/hc/en-us/articles/115012811208-Encoder-guide) ----  ---- [streamyard](https://streamyard.com/destinations/connect) [最高支援 1080p](https://streamyard.com/resources/docs/hd-streaming/) ----  ---- [直播技術分享-操作手冊](https://paper.dropbox.com/doc/--BTdTXGgH80jOk_OQ7oPrtwytAg-LnkDxRT2VxZ1E5D84Y7BR) --- 🛎️ --- # 2. 實戰流程 🚀 這節會以我的個人經驗為例，實際檢視執行一場直播時，前後分別要做哪些工作。 --- ## 2-1. 事前準備 1. 瞭解目標、確認需求 1. 協調可使用的資源 1. 收集素材 1. 盤點器材配置 1. 廣泛場勘與測試 --- ### 2-1-1. 瞭解目標、確認需求 - 與負責窗口確認這場直播的目的是？ e.g. 宣傳、實況轉播、粉絲維繫、置入、CTA… - 我的工作跟其他人如何切分？ e.g. 導播操作、主持、控場… - 與觀眾如何互動？ e.g. 小編回訊息、QA、[Slido](https://youtu.be/Atg-D3bwWuo?t=27)、[CodeMiko](https://youtu.be/CsQjxEd-gsw?t=55) … - 發佈直播預告 --- ### 2-1-2. 協調可使用的資源 - :timer_clock: & :moneybag: - 場地在哪？拍攝背景為何？ - 實體道具 e.g. 手板、抽獎、佈置擺飾… - 電力、網路、人力、器材供應 - [場地配置圖](https://ponpai.tw/archives/233152-%E5%85%A5%E9%96%80%E5%B0%88%E6%A5%AD%E7%9B%B4%E6%92%AD-%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99%E4%BA%BA%E5%8A%9B%E9%85%8D%E7%BD%AE%E7%AF%87) --- ### 2-1-3. 收集素材 - 直播畫面的排版 layout - 片頭、片尾 - 字卡、底圖、字幕 - Logo, Jingles, Lower-thirds - ... :::info 💡 按照你的使用習慣，事先告知預期的檔案格式及類型 ::: ----  https://youtu.be/iGK8-Hi5EP0 ----  https://youtu.be/LqqvBcq1zdg?t=567 --- ### 2-1-4. 盤點器材配置 - 需要準備哪些硬體？買 or 租？ - 需要安裝哪些軟體？Mac or Windows？ - 畫出你的直播配置圖，在腦中或紙上 --- #### 硬體 - 攝影機、擷取卡、麥克風、音訊設備、編碼用主機、網路設備 - 轉接頭、影音分配器、影音線材、無線圖傳 - 燈光、音響、行動電源、延長線 - ... :::info 💡 臨時出狀況？準備 backup solution！ ::: --- ##### 攝影機 按照畫質、電量續航、方便性等需求做選擇 * Lumix GH5（單眼） * j5create JVCU435（Webcam） * 手機鏡頭（[USB](https://reincubate.com/camo/), [WIFI](https://www.theverge.com/21281765/webcam-phone-tablet-android-ios-pc-mac-how-to), [NDI](https://www.ndi.tv/products/ndi-hx-camera-app/), [WebRTC](https://youtu.be/6R_sQKxFAhg?t=303)） * Sony AXP55（DV） * GoPro * [Logitech Rally](https://www.logitech.com/zh-tw/products/video-conferencing/conference-cameras/rally-ultra-hd-ptz-camera.960-001226.html)（PTZ） * ... ---- (New!) 各家單眼品牌的 webcam 軟體 - [Panasonic](https://www.panasonic.com/global/consumer/lumix/lumix_webcam_software.html) - [Sony](https://support.d-imaging.sony.co.jp/app/webcam/en/) - [Nikon](https://downloadcenter.nikonimglib.com/zh-tw/products/548/Webcam_Utility.html) - [Canon](https://www.usa.canon.com/internet/portal/us/home/support/self-help-center/eos-webcam-utility) ----  [各式攝影機](https://www.newtek.com/blog/tips/whats-the-best-camera-for-my-live-tv-studio/) ----  [各式攝影機](https://www.epiphan.com/blog/best-cameras-for-live-streaming/) ----  [各式視訊接頭](https://www.homenish.com/types-of-video-cables/) ---- ##### 擷取卡 注意是否支援 UVC（模擬成 webcam device）、解析度支援、傳輸介面、HDCP * Avermedia BU110（支援行動裝置） * Upmost MPB741G（HDMI pass-through） * J5create JVA06（雙輸入+可充電） * Avermedia GC513 LGP2（可內錄） * Elgato 4K60 S+（4K 擷取） * Atomos Connect（便宜） * ... ----  [各式擷取卡](https://www.ign.com/articles/the-best-capture-cards) ----  [各式擷取卡](https://www.techadvisor.com/test-centre/game/best-game-capture-cards-3671924/) ----  [各式 USB 接頭](https://www.mall99.co.ke/identifying-your-usb-connector-or-usb-cable-type/) ----  [規格比較表](https://www.upmostgroup.com/tw/product/info/58/2433) --- ##### 麥克風 離發話源頭越近，收音品質越清晰；不同設備彼此可能有不同 delay 導致串音，建議事先測試 * Senheisser EW G3（UHF） * Saramonic blink500 pro（2.4G） * Rode wireless go 2（直接作為 USB mic） * Mipro MU-55（迷你麥） * Rode NTG-3（shotgun） * Rode Podcaster（USB mic） * ... ----  [各式麥克風](https://www.mediashi.com/articles/how-to-record-professional-audio-on-an-iphone-or-ipad-with-an-external-microphone) ----  [各式麥克風](https://mynewmicrophone.com/full-list-of-microphone-types-sub-types/) ----  [各式音訊接頭](https://producerhive.com/buyer-guides/accessories/audio-cable-types/) ---- ##### 音訊設備 推薦使用 Compressor/Limiter 來維持音量的穩定 - USB 外接音效卡 - Scarlett 2i2（錄音介面） - Zoom H6（行動錄音機） - Yamaha AG06（混音器） - RodeCaster Pro（Sound pad） - ... ---- (Tips!) 也可以透過擷取卡擷取 HDMI 中的音訊 ---- | RodeCaster Pro | Zoom H6 | Yamaha AG06 | | - | - | - | |  |  |  | ----  [各式音效設備](https://www.nytimes.com/wirecutter/reviews/best-usb-audio-interface/) ---- [更多設備介紹](https://digilog.tw/posts/1042) --- ##### 編碼主機 如果選擇軟體編碼器，電腦效能及規格需求高 - i7, 16G ram, SSD, 獨顯, 散熱佳 - 有實體接口為佳 ex: HDMI, RJ45, USB-C, mic/phone - [ASUS ROG GX700](https://www.google.com/search?q=asus+rog+gx700) - MacBook Pro 16" - 桌機 ---- 如果選擇硬體編碼器，通常只要搭配一般筆電或平板即可 --- ##### 網路設備 配合不同環境，選擇適用的網路解決方案 臨時租用時可參考：[楓驛](https://www.lens.tw/product/%e5%8f%b0%e7%81%a3wifi%e8%b7%af%e7%94%b1%e5%99%a8%e7%a7%9f%e5%80%9f-4g-%e4%b8%8a%e7%b6%b2%e5%90%83%e5%88%b0%e9%a3%bd/)、[Aerobile](https://www.aerobile.com)、[台灣租借WIFI](https://www.wifi-rental.com.tw/router11/) :::info 💡 測試時可注意哪一家的基地台訊號最適合 💡 挑選時可注意是否有支援 **備援網路切換**（Ethernet <-> 4G/LTE）功能 ::: --- - 影音分配器 - 影音線材 - 轉接頭 - 無線圖傳 --- - 燈光 - 音響 - 行動電源 - 延長線 --- #### 軟體 安裝 OBS & 下載需要的外掛 plugins - 多平台串流 [multi-rtmp](https://sorayuki.github.io/obs-multi-rtmp/) - 數位時鐘 [Datetime](https://obsproject.com/forum/resources/datetime-digital-clock.882/) - 倒數計時鐘 [Advanced Timer](https://obsproject.com/forum/resources/advanced-timer.637/) - 來源自動開關 [Source toggler](https://obsproject.com/forum/resources/source-toggler.860/) - 來源面板 [source-dock](https://obsproject.com/forum/resources/source-dock.1317/) - 音訊處理 [VST](http://reaper.fm/reaplugs/) - ... ---- * 遠距視訊工具 [vdo.ninja](https://vdo.ninja) (Web) * 留言顯示工具 [chat.overlay.ninja](http://chat.overlay.ninja/) (Web) * 影音共享方案 [NDI](https://www.ndi.tv/tools/) 在 LAN 中分享攝影機、螢幕畫面等來源 軟體模擬 LAN 上的 Airplay receiver，也可接受 Miracast 及 Chromecast rr ---- * Windows 軟體混音器 [voicemeeter](https://vb-audio.com/Voicemeeter/) (Win) PC 的桌面音訊可直接導入 OBS、或是經 voicemeeter 軟體混音器處理 * Mac 音訊路由工具 [loopback](https://rogueamoeba.com/loopback/), [blackhole](https://github.com/ExistentialAudio/BlackHole) (Mac) Mac 的桌面音訊如果要導入 OBS，必須使用音訊路由工具 ---- #### 直播配置架構圖（Demo） --- ### 2-1-5. 廣泛場勘與測試 - [ ] 測速 [testmy.net](https://testmy.net/upload) fast.com - [ ] 檢查軟硬體相容性及穩定性 - [ ] 確認各種拉線距離 - [ ] 工作區域安排及隔音 - [ ] 冷氣 --- ## 2-2. 直播現場 在現場的責任分配，大致可分為幕前與幕後。我的經驗比較多是在處理技術問題，但有時候也必須與主持人或表演者等角色溝通，合作增進直播成效。 1. **製作人** 處理鏡頭前的事 1. **導播** 處理鏡頭後的事 note: > [name=hahow] 1.切分鏡時機 2.導播與主持人之溝通媒介與方式 3.主持人是否可以備平板隨時掌握觀眾留言 --- ### 2-2-1. 鏡頭前要處理的事 - [ ] 實際預演，流程除錯 dry run - [ ] 和表演者溝通眼神、視線、姿勢等，檢視拍攝呈現效果 - [ ] 事先討論臨場狀況的溝通方式，如手勢、大字報、小卡片、私訊… - [ ] 如果有安排主持人，主持人和表演者建立默契的方式 --- ### 2-2-2. 鏡頭後要處理的事 - [ ] 架設器材、貼大力膠 - [ ] 設定編碼器串流平台連線設定、測試 - [ ] 建立各個場景、轉場 - [ ] 監看及監聽，視需要分配給其他人 - [ ] 和攝影師溝通，如白平衡、曝光、鏡頭運動 --- ### 2-2-3. 直播開始時 - [ ] 請所有人的設備關靜音 - [ ] 有機會的話，設備們可以錄製備份檔案供日後使用 (how?) - [ ] 看準時機，切換畫面 - [ ] 觀察串流平台中控室及直播觀眾反應，必要時做出修正 --- 🛎️ --- # 3. 實機演練 🛠️ 這節會就先前執行案例遇到的情境，請大家練習繪製配置圖，給予回饋並實際示範操作過程。 :::info 1. 練習時分 3 組，備大張海報、便利貼、馬克筆 1. 示範時包含配置圖回饋、設備架設、後台操作… ::: note: > [name=hahow] 這部分是我個人最想知道的，感謝規劃（提醒記得包含 Hahow 後台所有直播相關設定，與權限的部分） --- ### 3-1. 情境一：在 Hahow 直播 :::info - 有 2 個老師 + 主持人在現場 - 加入 1 個活動流程簡報畫面 - YT, FB 多平台同步串流 ::: :::spoiler - 遇到 🐛 怎麼辦？ - 影音不同步？ - 流量太高？太低？ - 即時加入字卡 ::: --- ### 3-2. 情境二：從遠端邀請來賓加入直播 :::info - 有 2 個老師在各自家中對談 + present - 加入 2 個螢幕操作畫面 - 加入網友提問留言 ::: :::spoiler - 整合視訊軟體 e.g. skype(NDI mode), vdo.ninja, vMix remote - 整合留言 e.g. sli.do, chat.overlay.ninja ::: --- ### 3-3. 情境三：教老師自行一鍵直播 :::info - 有 1 個老師在現場教通靈，必須四下無人 - 加入 1 個簡報畫面 - 加入 1 個桌上實物操作畫面 ::: :::spoiler - 使用者操作手冊 - 標籤 ::: --- ### 3-4. 情境四：出外景直播 :::info - 有 1 個老師在自由廣場變魔術 - 加入 1 個手上實物操作畫面 ::: :::spoiler - 行動電源 - 手機搭配擷取卡 e.g. [Febon](https://www.youtube.com/watch?v=GmUdgyM-45A) + CameraFi - 使用 4G/5G 行動網路分享器 ::: --- 🛎️ --- # 4. Wrap up & 交流 🎉 You can find me on joke@nous.im