1. 事前準備
「CameraStream」特性適用於可串流播放智慧螢幕、Chromecast 裝置和智慧型手機的裝置。CameraStream 特性現已支援 WebRTC 通訊協定，因此您可以將相機裝置的啟動和串流延遲時間大幅縮短至 Google Nest 螢幕裝置。
必備條件
- 複習雲端對雲端的入門課程。
課程內容
- 如何部署智慧型住宅雲端服務。
- 如何將服務連結至 Google 助理
- 如何使用 WebRTC 通訊協定將內容串流至 Google Nest 螢幕裝置。
軟硬體需求
- 使用 Google Chrome 等網路瀏覽器。
- 搭載 Google Home 應用程式的 iOS 或 Android 裝置。
- Node.js 10.16 以上版本。
- Blaze (即付即用) 方案，適用於 Firebase。
- 內建 HD 高畫質解析度的內建或外接網路攝影機裝置。
- Google Nest 螢幕裝置。
2. 開始操作
安裝 Firebase CLI
Firebase CLI 可讓您在本機上提供網頁應用程式，並將其部署至 Firebase 託管。
如要安裝 Firebase CLI，請按照下列步驟操作：
- 在終端機中下載並安裝 Firebase CLI：
$ npm install -g firebase-tools
- 確認 CLI 已正確安裝：
$ firebase --version
- 使用 Google 帳戶授權 Firebase CLI：
$ firebase login
建立及設定動作專案
- 前往 Actions 主控台，然後按一下「New Project」(新專案)。
- 在「專案名稱」文字方塊中輸入專案名稱，然後按一下「建立專案」。
- 在「您想建立哪一類動作？」頁面上，依序點選「智慧型住宅」 >「開始建立」。專案會在 Actions 主控台開啟。
- 依序按一下「開發」 >「叫用」。
- 在「顯示名稱」文字方塊中輸入動作的名稱，然後按一下「儲存」。日後需要設定的裝置時，這個名稱就會顯示在 Google Home 應用程式中。在本程式碼研究室中，我們輸入了
WebRTC Codelab做為顯示名稱，但您可以使用其他名稱。
- 按一下 [動作]。
- 在「Fulfillment URL」文字方塊中，輸入預留位置網址，例如
https://example.com。
執行 CameraStream 用戶端應用程式
本程式碼研究室的原始碼包含 WebRTC 用戶端，可在網路攝影機和 Google 智慧住宅顯示裝置之間建立、協商及管理 WebRTC 工作階段。
如要執行 CameraStream WebRTC 用戶端應用程式，請執行下列任一操作：
- 按一下以下按鈕即可將原始碼下載至開發機器：
- 複製這個 GitHub 存放區：
$ git clone https://github.com/google-home/smarthome-camerastream-webrtc.git
程式碼包含下列目錄：
camerastream-start目錄，其中包含您進行建構的範例程式碼。camerastream-done目錄，其中包含已完成程式碼研究室的解決方案程式碼。
camerastream-start 目錄包含以下子目錄：
public子目錄，其中包含前端 UI，可讓您輕鬆控制及監控相機裝置的狀態。functions子目錄，其中包含完全導入的雲端服務，會使用 Cloud Functions for Firebase 和即時資料庫來管理相機。
範例程式碼包含 TODO 註解，指出需要新增或變更程式碼的位置，如以下範例所示：
// TODO: Implement full SYNC response.
連結至 Firebase
- 前往
camerastream-start目錄，然後使用 Actions 專案設定 Firebase CLI：
$ cd camerastream-start $ firebase use PROJECT_ID
- 在
camerastream-start目錄中，前往functions資料夾，然後安裝所有必要的依附元件：
$ cd functions $ npm install
- 如果您看到下列訊息，請予以忽略。這項警告與舊版依附元件不符。詳情請參閱這個 GitHub 問題。
found 5 high severity vulnerabilities run `npm audit fix` to fix them, or `npm audit` for details
- 初始化 Firebase 專案：
$ firebase init
- 依序選取「Functions」和「Hosting」。這會將專案所需的 API 和功能初始化。
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. ❯◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default instance ◯ Firestore: Deploy rules and create indexes for Firestore ◉ Functions: Configure a Cloud Functions directory and its files ◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys ◯ Hosting: Set up GitHub Action deploys ◯ Storage: Configure a security rules file for Cloud Storage ◯ Extensions: Set up an empty Extensions manifest
- 使用預設檔案設定 Cloud Functions，並確保您沒有覆寫專案範例中現有的
index.js和package.json檔案：
? Would you like to initialize a new codebase, or overwrite an existing one? Overwrite ? What language would you like to use to write Cloud Functions? JavaScript ? File functions/package.json already exists. Overwrite? No ? File functions/index.js already exists. Overwrite? No ? Do you want to install dependencies with npm now? Yes
- 在專案程式碼中使用
public目錄設定主機，並使用現有的index.html檔案：
? What do you want to use as your public directory? public ? Configure as a single-page app (rewrite all urls to /index.html)? Yes ? Set up automatic builds and deploys with GitHub? No ? File public/index.html already exists. Overwrite? No
3. Exchange 工作階段說明通訊協定 (SDP) 訊息
交換 SDP 訊息是建立 WebRTC 串流的重要步驟。SDP 是一種文字通訊協定，用於說明多媒體工作階段的特性。請在 WebRTC 中用於協商點對點連線的參數，例如使用的轉碼器、參與者 IP 位址和傳輸媒體的通訊埠。
如要使用即時資料庫做為主機，在網路攝影機和智慧住宅 CameraStream 用戶端應用程式之間交換 SDP 訊息，請按照下列步驟操作：
- 在 Firebase 控制台，依序按一下「建立」>「即時資料庫」>「建立資料庫」。
- 在「即時資料庫位置」下拉式選單中，選取存放資料庫的適當位置。
- 選取「以測試模式啟動」，然後按一下「啟用」。啟用即時資料庫後，你必須透過 CameraStream 用戶端應用程式參照該資料庫。
- 在 Firebase 控制台中，依序選取
「專案設定」>「專案設定」>「
- 將 Firebase 新增至網頁應用程式」來啟動設定工作流程。 - 如果您已將應用程式新增至 Firebase 專案，請按一下「新增應用程式」顯示平台選項。
- 輸入應用程式的暱稱 (例如
My web app)，然後按一下「Register app」(註冊應用程式)。 - 在「新增 Firebase SDK」部分中，選取「使用 <script> 代碼」。
- 複製
firebasebaseConfig物件的值，然後貼到camaerastream-start/public/webrtc_generator.js檔案中。
const firebaseConfig = {
apiKey: "XXXXX",
authDomain: "XXXXX",
projectId: "XXXXX",
storageBucket: "XXXXX",
messagingSenderId: "XXXXX",
appId: "XXXXX",
measurementId: "XXXXX"
};
- 按一下「前往控制台」即可完成設定程序。您會在「Project settings」(專案設定) 頁面上看到新建立的網頁應用程式。
4. 建立 WebRTC 相機
現在動作設定已完成，您的雲端服務必須處理下列意圖：
- 當 Google 助理想瞭解使用者連結的裝置時，就會發生
SYNC意圖。當使用者連結帳戶時，系統會將這段 ID 傳送至您的服務。您應回應使用者裝置的 JSON 酬載及其功能。 - 當 Google 助理代表使用者控制裝置時，就會發生
EXECUTE/QUERY意圖。您必須使用回應要求的每部要求裝置的執行狀態回應 JSON 酬載。
在本節中，您將更新先前部署的函式來處理這些意圖。
更新 SYNC 回應
- 前往
functions/index.js檔案。其中包含用來回應 Google 助理要求的程式碼。 - 編輯
SYNC意圖以傳回裝置的中繼資料和功能：
index.js
app.onSync((body) => {
return {
requestId: body.requestId,
payload: {
agentUserId: USER_ID,
devices: [{
id: 'camera',
type: 'action.devices.types.CAMERA',
traits: [
'action.devices.traits.OnOff',
'action.devices.traits.CameraStream',
],
name: {
defaultNames: ['My WebRTC Camera],
name: 'Camera',
nicknames: ['Camera'],
},
deviceInfo: {
manufacturer: 'Acme Co',
model: 'acme-camera',
hwVersion: '1.0',
swVersion: '1.0.1',
},
willReportState: false,
attributes: {
cameraStreamSupportedProtocols:['webrtc'],
cameraStreamNeedAuthToken: true,
cameraStreamSupportsPreview: true
},
}],
},
};
});
處理 EXECUTE 意圖
EXECUTE 意圖會處理指令來更新裝置狀態。回應會傳回每個指令的狀態 (例如 SUCCESS、ERROR 或 PENDING)，以及新裝置的狀態。
- 如要處理
EXECUTE意圖，請編輯EXECUTE意圖，以傳回functions/index.js檔案中的 Firebase 專案的signaling端點：
index.js
app.onExecute(async (body,headers) => {
var array = headers.authorization.split(' ');
var snapshot = await firebaseRef.ref('/userId/'+array[1]).once('value');
var offerGenLocation = snapshot.val().type;
const {requestId} = body;
var result = {
status: 'SUCCESS',
states: {
cameraStreamProtocol: 'webrtc',
cameraStreamSignalingUrl:'https://us-central1-<project-id>.cloudfunctions.net/signaling?token='+array[1], // TODO: Add Firebase hosting URL
cameraStreamIceServers: '',
cameraStreamOffer:'',
cameraStreamAuthToken:'',
},
ids: [
'camera'
],
};
return {
requestId: requestId,
payload: {
commands: [result],
},
};
處理跨來源資源共享 (CORS)
- 由於使用
POST方法傳送 SDP 的方式處理 CORS，請將 Firebase 託管網址新增至functions/index.js檔案中的allowlist陣列：
index.js
'use strict';
const functions = require('firebase-functions');
const {smarthome} = require('actions-on-google');
const {google} = require('googleapis');
const util = require('util');
const admin = require('firebase-admin');
var allowList = ['https:www.gstatic.com','https://<project-id>.web.app']; //TODO Add Firebase hosting URL.
如要進一步瞭解 CORS，請參閱跨源資源共享 (CORS)。
處理串流終止
- 如要處理 WebRTC 串流終止，請在
public/webrtc_generator.js檔案中新增 Firebase「信號」函式網址：
webrtc_產生器.js
terminateButton.onclick = function(){
console.log('Terminating Stream!!')
var signalingURL = 'https://us-central1-<project-id>.cloudfunctions.net/signaling'; //TODO Add Firebase hosting URL
var http = new XMLHttpRequest();
部署至 Firebase
- 如要部署至 Firebase，請使用 Firebase CLI 部署更新的雲端執行要求：
$ firebase deploy
這個指令會部署網頁應用程式和數個 Cloud Functions for Firebase：
... ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/<project-id>/overview Hosting URL: https://<project-id>.web.app
啟用帳戶連結功能
如要在專案部署後啟用帳戶連結，請按照下列步驟操作：
- 在動作主控台中，依序選取「開發」 >「帳戶連結」。
- 在「OAuth 用戶端資訊」部分的相應文字方塊中，輸入下列資訊：
用戶端 ID |
|
用戶端密鑰 |
|
授權網址 |
|
權杖網址 |
|
- 依序點選「Save」>「Test」。
5. 測試虛擬 WebRTC 相機
- 前往您在部署 Firebase 專案時找到的託管網址。您看到以下介面，即 CameraStream 用戶端應用程式：
- 在「當地視訊解析度」面板中，選取所需影片。
- 授權讓 CameraStream 用戶端應用程式存取你的網路攝影機和麥克風。網路攝影機的視訊影像程式會顯示在用戶端。
智慧型住宅CameraStream動作連結
- 在 Google Home 應用程式中，依序輕觸「新增」>「與 Google 服務連結」。
- 搜尋並選取您建立的動作。
- 記下專屬英數字元 (最多 5 個字元)，因為這樣之後會需要用到。
- 輕觸「返回」。WebRTC 攝影機已新增至 Google Home 應用程式的結構。
啟動 WebRTC 串流
- 在 CameraStream 用戶端應用程式的網頁，然後在「Account linkToken value」文字方塊中輸入最後一個部分的英數字元代碼，然後按一下「Submit」。
- 如要從 Google 智慧螢幕啟動 WebRTC 工作階段，請執行下列任一操作：
- 說出「Ok Google，串流播放 WebRTC 攝影機」。
- 在 Google 智慧螢幕上，依序輕觸「居家控制系統」>「相機」>「WebRTC 相機」。
透過 Google 智慧住宅 CameraStream 用戶端應用程式，你可以看到並成功產生及交換優惠 SPD 和回應 SDP。使用 WebRTC 將網路攝影機拍攝的圖片串流到 Google 智慧螢幕上。
6. 恭喜
恭喜！你已瞭解如何使用 WebRTC 通訊協定將網路攝影機串流到 Google Nest 螢幕裝置。
瞭解詳情
- 智慧住宅裝置特性
- Actions on Google：使用 Node.js 的智慧型住宅範例
- 測試及分享智慧住宅動作