Event: COSCUP 2022 https://coscup.org/2022/zh-TW/session/P7HXPX Speaker: Nijia Lin
GCCP CreatorLINE Developer Rela/onsNiJia Lin
View Slide
🥷 NiJia LinLINE Technology EvangelistCOSCUP 2020、2021 講者LINE Bot SDK Python 共同維護者😻貓派、🐶柴⽝派
LINE Technology EvangelistCOSCUP 2020、2021 講者LINE Bot SDK Python 共同維護者😻貓派、🐶柴⽝派(⽝在哪?)蟒蛇派 🐍🥷 NiJia Lin
CloudStorageSpeechToTextIAM &RoleYoutube&Video.js今⽇ GCCP Creator 圍繞…CloudRun凡事總有個原因https://github.com/louis70109/GCCP-Creator
🎥 減少獨⾃製作影片的 effort🎯 增加被平台看⾒的機會🀄 想紅https://github.com/louis70109/GCCP-Creator你好好解釋 - 凡事總要個原因
GCCP 能怎麼增進效率https://github.com/louis70109/GCCP-Creator
爲什麼⽤ CC 字幕?
使⽤ CC 字幕的原因優點篇• 不必等字幕做完才出影片• 上字幕難免出錯,修改快速• 自適應(不受解析度影響)• 提高影片曝光率(Youtube 識別)• Youtube 編輯器夠用• 額外優惠• 幫助聽障人士• 電腦版有自動翻譯• 有機會讓粉絲幫忙共編https://github.com/louis70109/GCCP-Creator
使⽤ CC 字幕的原因缺點篇• 預設是關閉,需要訓練用戶• 中文觀眾習慣看內字幕• 字卡特效較少(不夠吸睛)https://github.com/louis70109/GCCP-Creator
能怎麼設定 GCCP 呢?
我在講它要聽!✍開啟 SpeechToText
Speech to text
Speech to text不⽤在 UI 上建立
Speech to text⽤ API 來操作就好👍
總會需要個玻璃櫃🦖建立 Cloud Storage
建立Google Cloud Storage(a.k.a GCS)
⽽且要有鎖頭🔐來點 IAM & Role
IAM
鑰匙不能被發現 – 把 JSON Key 送進環境變數安全 🆙 部署 🆙 ⾦⿂腦 ⬇• 建立一個暫時檔• 路徑放環境變數中• 寫入 GOOGLE_APPLICATION_CREDENTIALS• ⚠需要框架啟動前
安全 🆙 部署 🆙 ⾦⿂腦 ⬇• 建立一個暫時檔• 路徑放環境變數中• 寫入 GOOGLE_APPLICATION_CREDENTIALS• ⚠需要框架啟動前• ⚠需整理成 JSON 樣式• 單引號 -> 雙引號鑰匙不能被發現 – 把 JSON Key 送進環境變數
萬事皆上雲⛅如何部署到 GCP
就這樣?🤨
對,就這樣 🤗
• Docker 免、DockerHub 免,只要⼀個 Dockerfile• 省硬碟空間 (但需要神奇⼩卡)• 省去開發初期⿇煩的事情使⽤ gcloud 好處
做什麼才會觸發(導火線)在 CloudRun設定 Eventarc
設定觸發條件
上傳檔案測試
⾃動產⽣ SRT
到 CloudRun 設定 Eventarc
不想住這邊,我要搬走!使⽤ video.js 的 hints
影片(mp4) ⼈⼈好,別把我送⼈就好• ⼿動上傳檔會有 CORS• 只要開啟 public 即可• 誰都不准擋我!
CORS 你聽我解釋 – CC 字幕篇• ⽤個 API Server 轉成純⽂字給前端• (Optional) 放在 localStorage 上⾯
CORS 那我要去愛別⼈ – API 我還你原形• ⽤個 API Server 轉成純⽂字給前端• (Optional) 放在 localStorage 上⾯• 因為有 \n,⽤ eval() + Blob 組合把它變成⼀串網址回給 video.js
• 因 GCS 的 CORS 的設定⽬前在 GCP 網⾴介⾯上沒辦法改,⼀定要⽤ CLI 設定既然你不聽那我來硬的 – CLI 降⾁!
• 因為 CORS 的設定在 GCP 網⾴介⾯上沒辦法改,⼀定要⽤ CLI 設定• 泡個茶上個廁所,時間到了 Cache 就不在了• 開啟 DevTools 清除快取(Cache)過去即是永恆 – 快取放我走!
• 必須要⽤ WebVTT 格式• Video.js 會⾃動的轉成 big5• 有時間序的 SRT 字幕檔第⼀⾏ ➕ WEBVTT\n\n(兩個換⾏)不都在講同⼀件事?Video.js 需要 VTT
那字幕編輯在哪?
別⼈的比較好🚬 (⼩吉)Youtube UI 很夠⽤
管理⼤師⏰的⼤家能帶走點什麼?
✍揮揮衣袖,不帶走⼀片雲彩• STT 時間⽀援最低到 nano,但在 Youtube 字幕上也算很精準• STT 測試起來以⼀分鐘為分⽔嶺,太短的影片可能不適⽤• 減少初期敲字幕稿的時間(30~40%),只需後續細修、對時間• 編輯器⽤別⼈的就好,別想⾃⼰寫 (還我三個禮拜!)• 若有 Python、FastAPI 部署相關經驗歡迎等等找我聊🤝• Video.js ⽢苦談也⼀起來!https://github.com/louis70109/GCCP-Creator