Raspberry Pi 教學 (11) - 利用 Raspberry Pi 建立自己的 Google TV # 2 ( Build your own Google TV by on Raspberry Pi tutorial # 2 )

本篇繼續介紹如何建立自己的 Google TV ( RaspberryPi TV )，之前將 Node.js 相關套件都安裝完畢，我們接著還需要安裝、設定其他軟體 ( Chromium、Youtube-dl、OMXPlayer ) 以及分享實際操作過程。另外，各位朋友可以參考原文出處以及 GitHub Repository。

在教學前先將實際操作畫面分享，以下為 RaspberryPi TV 的螢幕畫面：

以下為利用 iPhone 遙控 RaspberryPi TV 的操作畫面：

看完以上的操作畫面，是否想自己來體驗看看 RaspberryPi TV ？ 接著我們趕快進入實作吧！

---

安裝 Chromium：
首先我們還需要安裝瀏覽器，輸入指令 sudo apt-get install chromium-browser，為了使操作環境更好還需要安裝字體，執行指令 sudo apt-get install ttf-mscorefonts-installer，耐心等待安裝即可。

---

安裝 Youtube Downloader 以及更新：

RaspberryPi TV 是透過下載 Youtube 的影片並播放，因此需要安裝 Youtube Downloader，輸入指令 sudo apt-get install youtube-dl 來安裝 Youtube Downloader，接著執行 sudo youtube-dl -U 更新 ( 因該套件維護問題，會有指示提示你此部分需要執行共兩次 )。此外，本步驟可以選擇性地透過修改 app.js ( 此檔案稍後會在 Backend 部份提到 ) 中的指令變成不下載影片而直接線上播放 。

---

測試 Chromium 與 Youtube-dl：
我們可以在 Raspberry Pi 上執行 chromium --kiosk http://www.google.com 來測試瀏覽器是否正常運作，另外若你是 SSH 至 Raspberry Pi 的話需要先執行 export DISPLAY=:0.0。

測試 Youtube-dl 是否可以正常下載，執行指令 youtube-dl <youtube_video_url>，另外 youtube-dl 還可以指定影片格式、解析度等等參數，請自行參考。

---

測試 OMXPlayer 播放影片：

因 OMXPlayer 已經預設安裝於 Raspbian 中，所以不需要另行安裝。我們直接試播放影片透過執行 omxplayer <youtube_video_file>。

---

建立 RaspberryPi TV 的 Backend：
在建立 RaspberryPi TV 之前，先將整個專案的架構列出：

• public
• js
• css
• images
• fonts
• index.html
• remote.html
• app.js
• package.json

public ：為放置 HTML、CSS 等等靜態資源的資料夾

app.js ：為設定 HTTP Express Server 核心檔案

package.json：以 JSON 格式列出套件清單檔案供 npm 執行

以上提到的所有檔案，請至 GitHub Repository 取得並按照上述架構將檔案放置於 Raspberry Pi 上，下圖為檔案放置範例：

RaspberryPi TV 的 Backend 分為 Node.js、Express、Socket.io 三個部份，因我們已經將 Node.js 安裝完畢，所以剩下 Express、Socket.io 需要安裝，這時後我們就需要 package.json，參考下圖：

package.json 裡面將 Express、Socket.io 的版本都列出，我們只需要在 package.json 檔案所在地方執行 npm install 就會自動開始下載、安裝 Express、Socket.io。安裝過程會自動幫你建立名為 node_modules 的資料夾並相關檔案自動放進該資料夾。

---

建立 RaspberryPi TV 的 Front-end：

前端部分我們不需要多做什麼，除了已經取得 public 內的檔案，我們只需要將 public 資料夾的 index.html 與 remote.index 做修改：

index.html：為 Raspberry Pi 主要輸出螢幕的操作畫面
需要修改部分為第 48 行 var socket = io.connect('http://192.168.0.102:8080'); 將其 IP 改為 Raspberry Pi 的 IP 位址。

remote.html：為行動裝置的操作畫面

要修改部分為第 59 行 var socket = io.connect('http://192.168.0.102:8080'); 將其 IP 改為 Raspberry Pi 的 IP 位址，還有第 117 與 122 行的 IP 也要改成 Raspberry Pi 目前的 IP 位址。

---

實際操作 RaspberryPi TV：
首先將 Server 啟動，輸入指令 node app.js 或 npm start，參考如下圖：

接著在 Raspberry Pi 上打開瀏覽器 Chromium 輸入 http://localhost:8080，即可以看到 index.html 顯示，或者在 Terminal 中輸入 chromium --kiosk http://localhost:8080。( 畫面可以參考本篇最一開始提供的截圖 )

在 iPhone 的瀏覽器上輸入 http://<ip>:8080/remote，就可以看到 remote.html 顯示。在 iPhone 上往左、右滑動，Raspberry Pi 上的畫面也會跟著切換為 Watch、Listen、Play，點擊 rPiTV Remote 文字部分可以離開播放，點擊其他部分可以暫停、恢復播放，點擊 Watch 按鈕可以播放影片。( 操作畫面可以參考本篇一開始提供的截圖 )

以上就完成自製的 Google TV，其他 Raspberry Pi 相關教學可以參考本篇整理。