1. 事前準備
CameraStream 特徵屬於能夠將視訊畫面串流至智慧螢幕、Chromecast 裝置和智慧型手機的裝置。CameraStream 特徵現在支援 WebRTC 通訊協定，這表示你可以大幅縮短攝影機裝置到 Google Nest 螢幕裝置的啟動和串流延遲時間。
必要條件
- 參閱雲端對雲端入門。
課程內容
- 如何部署智慧型住宅雲端服務。
- 如何將服務連結至 Google 助理。
- 如何透過 WebRTC 通訊協定，串流至 Google Nest 顯示裝置。
軟硬體需求
- 使用 Google Chrome 等網路瀏覽器。
- 已安裝 Google Home 應用程式的 iOS 或 Android 裝置。
- Node.js 10.16 以上版本。
- 適用於 Firebase 的 Blaze (即付即用) 方案。
- 支援 Full 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 專案
- 前往 Actions 主控台，然後按一下「新增專案」。
- 在「專案名稱」文字方塊中輸入專案名稱，然後按一下「建立專案」。
- 在「您想建立哪種動作？」頁面上，點選「智慧型住宅」>開始建構。專案會在「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. 交換工作階段說明通訊協定 (SDP) 訊息
交換 SDP 訊息是建立 WebRTC 串流的重要步驟。SDP 是一種文字型通訊協定，用於說明多媒體工作階段的特性。用於在 WebRTC 中交涉點對點連線的參數，例如使用的轉碼器、參與者的 IP 位址，以及用於媒體傳輸的通訊埠。
如要使用即時資料庫做為主機，在網路攝影機和智慧型住宅 CameraStream 用戶端應用程式之間交換 SDP 訊息，請按照下列步驟操作：
- 在 Firebase 控制台，依序點選「建構」>「建立」即時資料庫 >建立資料庫。
- 在「即時資料庫位置」下拉式選單中，選取適當的代管資料庫位置。
- 選取「以測試模式啟動」，然後按一下「啟用」。在啟用即時資料庫的情況下，您必須能夠從 CameraStream 用戶端應用程式參照該資料庫。
- 在 Firebase 控制台中，選取
「專案設定」>專案設定 >
將 Firebase 新增至您的網頁應用程式，即可啟動設定工作流程。 - 如果您已在 Firebase 專案中加入應用程式，按一下「新增應用程式」即可顯示平台選項，
- 輸入應用程式的暱稱 (例如
My web 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"
};
- 點選「Continue to console」即可完成程序。「專案設定」頁面中會顯示新建立的網頁應用程式。
4. 建立 WebRTC 攝影機
現在動作已設定完成，您的雲端服務必須處理下列意圖：
- Google 助理想知道使用者連結哪些裝置時，出現的
SYNC意圖。當使用者連結帳戶後，系統會將這項資訊傳送至您的服務。您應透過 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 串流終止，請新增 Firebase「信號」
public/webrtc_generator.js檔案的函式網址：
webrtc_generator.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 部署新版 Cloud 執行要求：
$ 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
啟用帳戶連結
如要在專案部署完成後啟用帳戶連結，請按照下列步驟操作：
- 在 Actions 主控台中，選取「Develop」(開發) >帳戶連結：
- 在「OAuth 用戶端資訊」部分的對應文字方塊中，輸入以下資訊：
用戶端 ID |
|
用戶端密鑰 |
|
授權網址 |
|
權杖網址 |
|
- 按一下 [儲存] > 測試。
5. 測試虛擬 WebRTC 相機
- 前往您在部署 Firebase 專案時顯示的託管網址。您會看到以下介面，也就是 CameraStream 用戶端應用程式：
- 在「本機影片解析度」面板中，選取所需影片。
- 授權讓 CameraStream 用戶端應用程式存取你的網路攝影機和麥克風。用戶端會顯示網路攝影機的影片動態饋給。
連結至智慧型住宅CameraStream動作
- 在 Google Home 應用程式中，依序輕觸「新增」>支援 Google。
- 搜尋並選取您建立的動作。
- 請記下專屬的五位英數字元代碼，因為後續步驟將會用到。
- 輕觸「返回上一步」。WebRTC 攝影機已在 Google Home 應用程式中的住家結構中新增。
啟動 WebRTC 串流
- 在 CameraStream 用戶端應用程式的網頁上，於「帳戶連結符記值」文字方塊中輸入最後部分的英數字元代碼，然後按一下「提交」。
- 如要從 Google 智慧螢幕裝置啟動 WebRTC 工作階段，請執行下列任一操作：
- 說出「Ok Google，串流播放 WebRTC 攝影機」。
- 在 Google 智慧螢幕裝置上，依序輕觸「居家控制系統」>「居家控制系統」攝影機 >WebRTC 相機。
在 Google 智慧型住宅 CameraStream 用戶端應用程式中，你會看到已成功產生並交換優惠 SPD 和回應 SDP。系統會使用 WebRTC 將網路攝影機中的圖片串流至 Google 智慧螢幕裝置。
6. 恭喜
恭喜！你已瞭解如何使用 WebRTC 通訊協定，從網路攝影機串流到 Google Nest 顯示裝置。