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

- 作者：林鼎淵（Dean Lin）
- 網址：https://deanlin.net/blog/202610/multicam-recorder-vibe-coding/
- 發布：2026-10-27
- 主題：AI 實戰
- 標籤：Vibe Coding、自媒體、YouTube、多機錄影、Node.js
- 摘要：如果你拍 YouTube、Podcast、線上課程或訪談節目，又跟我一樣使用固定的機位錄影，這篇分享我用 Vibe Coding 花一小時做出的免費開源多機錄影工具：在電腦一鍵遙控多支手機同步錄影，錄完馬上就能在電腦上看。

[https://youtu.be/fHN0WMLYOL8](https://youtu.be/fHN0WMLYOL8)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

### 自己設計的多機錄影工具

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

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

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

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

> 完整的 Demo，可以觀看 YT 喔 👉
> 對 AI 應用感興趣的朋友，歡迎按下訂閱按鈕，未來我計畫分享一系列 AI 工具的應用教學。

[YouTube 影片：【AI 做產品 EP1】自己的痛點自己解：用 Vibe Coding 做出電腦一鍵遙控多支手機同步錄影的工具](https://www.youtube.com/watch?v=fHN0WMLYOL8)

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

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](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](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 教學總整理](https://deanlin.net/tags/vibe-coding/)。

### 第一版，只是開始

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

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

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

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

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

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

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

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

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

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

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

### 不是每個想法都要做

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

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

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

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

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

### 從需求出發，分享出去

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

其實像這樣為了自己的需求做工具，也不是第一次了；過去為了錄影，我寫過[網頁版的提詞器](https://deanlin.net/blog/202507/afteroffice8-vibe-coding/)，為了在企業內訓時提醒大家資安，我做了[去識別化工具](https://deanlin.net/blog/202610/ai-traps-ep3-data-anonymization/)，來避免隱私資訊外洩。

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

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

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

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

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

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

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

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

GitHub 連結：[https://github.com/dean9703111/multicam-recorder](https://github.com/dean9703111/multicam-recorder)

產品網站：[https://deanlin.net/multicam-recorder/](https://deanlin.net/multicam-recorder/)

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

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

  [https://www.tenlong.com.tw/products/9786264142083](https://www.tenlong.com.tw/products/9786264142083)

---

關於作者：林鼎淵（Dean Lin），台灣的生成式 AI 企業內訓講師、外商資安公司軟體專家，也是生成式 AI 創新學院發起人。出版 7 本書（包含全台第一本 ChatGPT 應用專書），兩度獲得 iThome 鐵人賽佳作，累積上百場授課與顧問經驗。（https://deanlin.net/about/）
引用時請附上原文網址：https://deanlin.net/blog/202610/multicam-recorder-vibe-coding/