GCCP Creator @ COSCUP 2022

Event: COSCUP 2022 https://coscup.org/2022/zh-TW/session/P7HXPX
Speaker: Nijia Lin

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