【AI 做產品 EP1】自己的痛點自己解：用 Vibe Coding 做出電腦一鍵遙控多支手機同步錄影的工具

如果你打算拍 YouTube、Podcast、線上課程，或訪談節目，並且跟我一樣使用固定的機位錄影，我強烈建議你收藏這篇文章。

因為接下來要分享一個節省我超多時間的免費工具。

痛點：錄完要檢查，檔案還要傳來傳去

過去正式開拍前，我都要先試錄一小段，確認畫面、聲音符合自己的需求；而正式開拍後，每錄完一段，我都要跑到手機旁邊播放影片，以此確認動作與聲音足夠流暢。

但畢竟手機畫面較小，很多小毛病是把影片放到電腦上才會發現的，像腳架不穩造成畫面輕微晃動，或自己穿的衣服太薄有激凸問題。

而我過去的拍片流程，是先把影片上傳到雲端備份，再下載到電腦。

很多小問題是在自己以為可以收工的時候才發現，非常崩潰。

痛點：多支手機，無法同時開始與停止

另外，有些時候我們會需要用到多機拍攝。

以這次的影片來說，一支從正面拍，另一支從側面拍，這樣當我卡詞動作不連貫的時候，剪輯能直接替換成另一個素材而不會有中斷感。

或是想一次拍好長影片跟短影音，就能一支橫著錄長影片，另一支直的錄短影音；甚至是訪談節目，主持人跟來賓各用一支手機拍，這樣對話時就能切到正在講話的人。

但我們馬上就會遇到一個問題，如果只用一支手機錄影，可以用手勢控制開始跟結束；但如果要用兩支以上的手機同時錄影，就很難讓它們同時啟動。

一旦開始的時間不同步，後續剪輯影片、校正聲音的過程就會讓人崩潰。

而停止錄影驗收成果的時候也一樣，我需要在兩支手機間走來走去，個別確認畫面跟聲音；當要拍攝的段落很多時，這些走動其實很耗體力。

自己設計的多機錄影工具

為了解決以上問題，我上網搜尋了許多電腦控制手機，以及多機錄影的工具，但用起來都不順手，所以我乾脆根據自己實際的工作流設計了一套。

現在當手機掃碼連上電腦後，就能即時顯示拍攝畫面，讓我確認畫面的角度、光暗。

在電腦上按下開始時，多支手機就能同步開始錄影；按下結束後除了停止錄影外，影片還會直接回傳到電腦，讓我馬上播放檢查。

而這個工具從萌生想法到完成產品原型，前後只花了一個小時。

完整的 Demo，可以觀看 YT 喔 👉

對 AI 應用感興趣的朋友，歡迎按下訂閱按鈕，未來我計畫分享一系列 AI 工具的應用教學。

這篇文章我會分成三個部分：

1. 先帶大家實際操作這個工具，包含新增專案、下載 App、配對手機、調整解析度等細節

2. 接著說明如何安裝工具，以及網路設定要注意的事項

3. 最後分享我如何用 AI Coding 在短時間完成產品原型，以及在實際應用中一次次迭代的心得

---

① 多機錄影工具實戰

這套工具是用電腦的瀏覽器，來控制多支手機錄影，macOS 跟 Windows 都能使用；目前手機支援 Android 系統，下載 APK 即可安裝體驗。

考量到資訊安全跟傳輸速度，影片不會經過雲端，而是透過家裡的 Wi-Fi 直接傳回電腦。

而且錄影是在手機上進行的，Wi-Fi 只負責控制跟傳檔，所以畫質不會受到網路影響。

安裝的步驟我放在後面，這邊先帶大家看這套工具能做到哪些事。

STEP 1｜設定錄影資料夾、新增專案

在瀏覽器打開控制台後，先選擇錄影要存放的資料夾。

因為 30 分鐘的 4K 影片大約就有 9 GB 的大小，所以建議存到外接硬碟。

這邊提醒一下大家，外接硬碟最好用 exFAT 格式；不要用 FAT32，因為它的單一檔案不能超過 4 GB。

另外，我們可能會拍很多不同的主題，如果全部塞在同一個資料夾，未來要找影片會很麻煩。

所以接著要點擊「新增專案」，輸入這次拍攝的主題，比如「multicam-recorder」。

之後錄好的影片，就會自動存進這個主題的資料夾。

STEP 2｜下載 App、配對手機

完成後點擊「配對手機」，用手機相機掃畫面上的 QR Code。

還沒裝 App 的話，打開頁面上的下載連結會得到一個 APK 檔；裝好之後按「打開 App 並配對」，就完成了。

每支手機在成功配對後，之後打開 App 就會自動連線；另外手機如果有外接麥克風，在介面上也會顯示。

配對成功後，電腦上就會出現每支手機現在的即時畫面。

以前架好手機之後，我得走到每支手機前面，一支一支確認角度跟位置；現在坐在電腦前，就能同時看到每支手機拍到的畫面。

如果發現角度有歪、人在畫面的位置不對，或光線不夠亮，都能在拍攝前及時調整。

至於腳架晃動這類比較細的問題，等一下錄完後，馬上就能在電腦上播放檢查。

STEP 3｜調整錄影規格與人像設定

完成前置作業後，在正式拍攝前可以先設定影片的畫質，以及人臉的拍攝效果。

在「錄影規格」的部分可以選擇解析度，從 4K 到 720p 都有，所有手機會套用同一個解析度。

而人像設定預設開啟「臉部優先」，這樣對焦、曝光都會以人臉為準，就算背景是白天窗戶，臉也比較不會黑掉。

另外，還能在錄影時鎖定曝光跟白平衡，讓畫面的亮度跟顏色不會錄到一半變掉；這些都是交給手機的相機處理，所以畫質不會改變。

STEP 4｜即時畫面、變焦，直拿橫拿一次錄好

設定好之後，還能一邊看即時畫面，一邊各自調整每支手機的變焦。

而且手機怎麼放，就會錄怎麼樣的影片；比如一支橫放錄長影片，另一支直放錄短影音，一次錄影就能把兩種版本錄好。

STEP 5｜一鍵同步錄影，錄完馬上看

都準備好之後，直接按畫面上的「開始錄影」，所有手機就會同時開始，按「停止」就會同時停止；如果習慣用鍵盤的話，也能使用快捷鍵，按 R 開始、按 S 停止。

錄完之後，你會發現同一段影片的檔名，前綴都是一樣的錄影時間，後綴則是對應的手機名稱；這樣在剪輯的時候，就能快速找到同一段的每支手機影片。

而我最滿意的設計，是錄完馬上就能看。

手機在錄影的同時，就會把影片陸續傳回電腦；停止之後，短影片稍等幾秒就能播放，而長影片只要 Wi-Fi 跟得上，也能在 1 分鐘後觀看。

稍等一下，影片就傳輸完成了，我們可以切成全螢幕來觀看。

畫面跟聲音都有，這樣就不用再特地跑到手機旁確認內容有沒有符合預期；另外就算錄到一半 Wi-Fi 斷線，手機也會照常錄影，連回來再自動續傳。

同時提醒一下大家，錄影時 App 要一直開在畫面上，因為 Android 不允許 App 在背景使用相機，所以我另外設計了「調暗螢幕」的功能。

實際錄影時，其實不需要螢幕那麼亮；而且把螢幕調暗後，手機比較省電，能錄得更久，也比較不會發燙。

STEP 6｜標記、裁剪與清理影片

另外在錄影時，有時一段內容會重錄好幾次，所以這邊有設計標記功能，滿意的那一段可以按星星，至於 NG 的就按垃圾桶刪除。

而且標記跟刪除時，同一段的每支手機會一起處理；即使刪錯了，也能從電腦的垃圾桶救回來。

還有一個很實用的小功能，就是「裁剪」。

錄影時通常都會有開頭的準備動作，以及結尾按停止的片段；這些都可以直接剪掉，操作時每支手機會一起裁，不用每支影片各剪一次。

裁完會另存成新檔，不會動到原本的影片。

至於手機這邊，可以一鍵「清除已傳完的影片」，它只會刪掉已經傳到電腦的影片，節省手機空間的容量。

---

② 安裝工具與注意事項

介紹完工具的功能之後，接下來帶大家安裝這款工具。

安裝 Node.js

因為電腦端負責控制手機、接收影片的程式，需要 Node.js 才能執行，所以我們要先打開終端機，接著輸入「node -v」確認電腦是否有完成安裝。

這套工具需要 Node.js 24 以上的版本，如果版號太舊，或是出現沒有指令的錯誤訊息，就需要先安裝 Node.js。

在安裝 Node.js 這塊，我建議大家透過 NVM 來安裝，因為它可以幫你快速在不同版本間切換、更新。

如果你跟我一樣使用 Mac，執行下面的指令就可以安裝了：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.8/install.sh | bash

但如果你是 Windows，就需要下載 exe 檔來安裝：https://github.com/nvm-windows/nvm/releases

nvm 安裝完成後，要重新開一個終端機，輸入 nvm install --lts 來安裝最新的 LTS 版本；安裝完畢後，再輸入一次 node -v，看到 24 以上的版號就沒問題了。

安裝 Git

接下來是 Git，它是工程師用來管理程式碼的工具，等等我們會用它，把這套工具從 GitHub 下載到電腦。

輸入 git --version，就能確認電腦有沒有安裝 Git。

如果你是 Mac，還沒安裝的話會跳出安裝「命令列開發者工具」的視窗，按下「安裝」就好；而 Windows，就要到 Git 官網下載安裝檔：https://git-scm.com/downloads/win

下載專案、啟動工具

都準備好之後，依序輸入下面的指令，就能下載專案、進入資料夾、安裝套件，並啟動工具：

git clone https://github.com/dean9703111/multicam-recorder.git
cd multicam-recorder
npm install
npm start

看到有「控制台：http://localhost:8787」的訊息出現就代表成功了，接著用瀏覽器打開網址就能看到控制台。

三個注意事項

裝好之後，再提醒大家三個細節：

第一，手機跟電腦要連家裡同一個 Wi-Fi。因為公共 Wi-Fi 跟訪客網路，會讓裝置看不到彼此，這會導致手機無法與電腦建立連線。

第二，如果影片打算使用裁剪功能，電腦還需要安裝 ffmpeg。如果沒安裝，點擊裁剪時也會有彈窗提醒你操作步驟。

第三，影片在手機上是存在 App 自己的資料夾。如果把 App 解除安裝，手機裡的影片也會一起被刪掉。

---

③ 在實戰中迭代，打造最符合需求的工具

接下來想跟大家分享這套同時有網頁跟手機 App 的工具，是怎麼做出來的。

說真的，我上次寫 App 已經是七、八年前的事了，早就忘記怎麼寫；但在 AI 的協助下，從遇到痛點萌生想法，到擬出方案完成實作，前後只花了一個多小時。

我覺得這就是 Vibe Coding 的魅力。

如果你想讓這個工具也支援 iPhone，或加上其他自己需要的功能，卻不知道怎麼用 AI 寫程式，可以參考我整理的 Vibe Coding 教學總整理。

第一版，只是開始

不過一個多小時做出來的，只是產品原型，真正拿來用之後，問題才一個個浮現。

像是第一次配對時，手機掃 QR Code 出現的是一串看不懂的文字（JSON 格式），根本打不開；後來請 AI 改成網址，掃完就會直接打開配對頁面，也方便還沒安裝 App 的使用者能直接下載 APK 安裝。

還有發現電腦資料夾刪掉的影片，網頁上卻還留著紀錄，因此加上「專案」功能，讓網頁上的清單會與資料夾同步更新。

到了實際錄影，又發現手機直放時，App 的畫面不會跟著轉，所以在 App 加入偵測轉向的設計，讓直放、橫放都能錄。

另外在開拍時，我發現電腦螢幕一片黑，看不到手機正在拍的畫面；所以我特別設計了即時畫面，錄影前坐在電腦前，就能直接確認角度、光線和位置是否有需要調整的地方。

這些都是實際跑過才發現的，所以 AI 寫完之後，一定要親自測一遍。

實測心得：傳輸速度，很吃家裡的 Wi-Fi

而我印象最深刻的，是在雙機錄影的時候，突然發現有一支手機的影片傳到一半就卡住了。

一查才發現，問題出在手機跟電腦連的是同一個頻段；影片要先從手機傳到路由器，再從路由器傳到電腦，同一個頻段要傳兩次，網路就塞住了。

後來我把兩支手機改連 2.4 GHz，電腦連 5 GHz，上傳跟下載各走一個頻段，就沒有再卡住了。如果你的電腦可以插網路線，效果會更好。

這些特殊情境只有實際跑過，才會發現原來還有這麼多細節需要注意。

不是每個想法都要做

另外，迭代並不代表要一直加功能。

像我原本想加入濾鏡，但跟 AI 討論之後，決定不做；因為濾鏡一旦套上去，拍完就改不回來了。

而且如果你用不同品牌的手機，就算套同一個濾鏡，顏色還是會不一樣，剪輯時反而更難調成一致。

所以 App 只負責錄出乾淨的原始畫面，調色留給剪輯軟體一次處理。

雖然最後沒有做濾鏡，但在討論的過程中，AI 提了一個我沒想到的功能，就是錄影時鎖定曝光跟白平衡；這樣就算錄到一半光線變了，每支手機的亮度跟顏色，也不會跟著跑掉。

從需求出發，分享出去

講到這邊，大家應該會發現，這套工具的每個功能，都是為了解決我錄影時遇到的問題。

其實像這樣為了自己的需求做工具，也不是第一次了；過去為了錄影，我寫過網頁版的提詞器，為了在企業內訓時提醒大家資安，我做了去識別化工具，來避免隱私資訊外洩。

這些工具都是從自己的需求出發，因為真的有在使用，所以會持續迭代。

而我選擇把這些工具免費分享到網路，也是希望能形成一個正向循環，因為大家用了之後給的回饋，常常是我自己沒想到的；可能是更好的做法，或是我沒想過的用途。

這就是「我不知道我不知道」

像去識別化工具分享出去之後，我才知道，原來它對校園老師處理學生資料也有很大的幫助；而這些回饋，又會讓我把工具改得更好，幫到更多人。

---

結語：好工具，是在實戰中一次次改出來的

過去很多人有想法，卻因為沒有技術，因此只能等待別人開發；但現在只要需求足夠明確，就能在 AI 的輔助下，自己完成工具。

只是我們不要妄想一次就做到最好，而是在實戰中，一次次看到缺陷並改善，讓它變成最符合自己需求的工具。

今天分享的多機錄影工具，我有把它免費開源：

GitHub 連結：https://github.com/dean9703111/multicam-recorder

產品網站：https://deanlin.net/multicam-recorder/

假如有想新增或客製化的功能，歡迎 Fork 修改成自己的版本；如果這個專案對你有幫助，可以路過按個 Star 讓我知道。

好的，今天的分享就到這邊，如果這篇文章有給你啟發與幫助；別忘了按讚、訂閱，並把文章分享給需要的朋友。