使用 WebRTC 實作 CameraStream

1. 事前準備

CameraStream 特徵屬於可將影像串流傳輸至智慧螢幕、Chromecast 裝置和智慧型手機的裝置。CameraStream 特徵現在支援 WebRTC 協定，這表示你可以大幅縮短攝影機裝置到 Google Nest 螢幕裝置的啟動和串流延遲時間。

串流至 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 Hosting。

如要安裝 Firebase CLI，請按照下列步驟操作：

  1. 在終端機中下載並安裝 Firebase CLI：
$ npm install -g firebase-tools
  1. 確認 CLI 安裝正確無誤：
$ firebase --version
  1. 使用 Google 帳戶授權 Firebase CLI：
$ firebase login

建立專案

  1. 前往 Google Home 開發人員控制台。
  2. 按一下「建立專案」，輸入專案名稱，然後按一下「建立專案」。

命名專案

執行 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 新增至 Google Home 開發人員控制台專案

方法 1：透過 Firebase 控制台

  1. 前往 Firebase。
  2. 點選「建立 Firebase 專案」。
    建立 Firebase 專案
  3. 在「建立專案」畫面中，按一下「將 Firebase 新增到 Google Cloud 專案」。
    將 Firebase 新增至 Google Cloud 專案
  4. 在「開始使用」畫面中，選取您剛在 Google Home 開發人員控制台中建立的 Google Cloud 專案，然後按一下「繼續」。
    選取 Google Cloud 專案

方法 2：透過 Firebase CLI

firebase projects:addfirebase

選取您剛建立的 Google Home 開發人員控制台專案，然後新增 Firebase。

將 Firebase 新增至 Google Home 開發人員控制台專案後，Firebase 控制台就會顯示該專案。Firebase 專案的專案 ID 會與 Google Home 開發人員控制台專案 ID 一致。

已新增 Cloud 專案

連結至 Firebase

  1. 前往 camerastream-start 目錄，然後使用 Actions 專案設定 Firebase CLI：
$ cd camerastream-start
$ firebase use <project-id>
  1. 在 camerastream-start 目錄中，前往 functions 資料夾，然後安裝所有必要的依附元件：
$ cd functions
$ npm install
  1. 如果看到下列訊息，請忽略。這是因為依附元件版本較舊。詳情請參閱這個 GitHub 問題。
found 5 high severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
  1. 初始化 Firebase 專案：
$ firebase init
  1. 選取「函式」和「託管」。這會初始化專案所需的 API 和功能。
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter
 to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
 proceed)
>( ) Data Connect: Set up a Firebase Data Connect service
 ( ) Firestore: Configure security rules and indexes files for Firestore
 ( ) Genkit: Setup a new Genkit project with Firebase
 (*) Functions: Configure a Cloud Functions directory and its files
 ( ) App Hosting: Configure an apphosting.yaml file for App Hosting
 (*) Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
 ( ) Storage: Configure a security rules file for Cloud Storage
 ( ) Emulators: Set up local emulators for Firebase products
 ( ) Remote Config: Configure a template file for Remote Config
 ( ) Extensions: Set up an empty Extensions manifest
 (*) Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision
default instance
 ( ) Data Connect: Set up a Firebase Data Connect service
 ( ) Firestore: Configure security rules and indexes files for Firestore
  1. 使用預設檔案設定 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
  1. 在專案程式碼中，使用 public 目錄設定 Hosting，並使用現有的 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 會使用 ICE 協商對等互連連線的參數，例如使用的轉碼器、參與者的 IP 位址，以及用於媒體傳輸的連接埠。

如要使用即時資料庫做為主機，在網路攝影機和智慧住宅 CameraStream 用戶端應用程式之間交換 SDP 訊息，請按照下列步驟操作：

  1. 在 Firebase 控制台中，依序點選「Build」>「Realtime Database」>「Create database」。

Firebase 控制台中的「即時資料庫」頁面

  1. 在「Realtime Database location」(即時資料庫位置) 下拉式選單中，選取適合代管資料庫的位置。

「設定資料庫」對話方塊中的「即時資料庫位置」下拉式選單

  1. 選取「以測試模式啟動」，然後按一下「啟用」。啟用即時資料庫後，您需要從 CameraStream 用戶端應用程式參照該資料庫。
  1. 在 Firebase 控制台中，依序選取 513f2be95dcd7896.png「專案設定」>「專案設定」>「將 Firebase 新增至您的網頁應用程式」e584a9026e2b407f.png，啟動設定工作流程。
  2. 如果已將應用程式新增至 Firebase 專案，請按一下「新增應用程式」，顯示平台選項。
  3. 輸入應用程式的暱稱，例如 My web app，然後按一下「註冊應用程式」。
  4. 在「Add Firebase SDK」(新增 Firebase SDK) 部分，選取「Use <script> tag」(使用 <script> 標記)。
  5. 複製 firebasebaseConfig 物件中的值，然後貼到 camaerastream-start/public/webrtc_generator.js 檔案中。
const firebaseConfig = {
  apiKey: "XXXXX",
  authDomain: "XXXXX",
  projectId: "XXXXX",
  storageBucket: "XXXXX",
  messagingSenderId: "XXXXX",
  appId: "XXXXX",
  measurementId: "XXXXX"
};
  1. 按一下「Continue to console」(前往主控台)，即可完成設定程序。您會在「專案設定」頁面中看到新建立的網頁應用程式。

4. 建立 WebRTC 攝影機

設定好動作後，雲端服務必須處理下列意圖：

  • 當 Google 助理想瞭解使用者已連線的裝置時，就會發生 SYNC 意圖。使用者連結帳戶時，系統會將這個權杖傳送至您的服務。您應以 JSON 酬載回應，其中包含使用者的裝置及其功能。
  • 當 Google 助理想代表使用者控制裝置時，就會發生 EXECUTE/QUERY 意圖。您應以 JSON 酬載回應，其中包含每個要求裝置的執行狀態。

在本節中，您將更新先前部署的函式，以處理這些意圖。

更新 SYNC 回覆

  1. 前往 functions/index.js 檔案。其中包含用來回應 Google 助理要求的程式碼。
  2. 編輯 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
      },
    }],
  },
};
});
  1. 程式碼中未定義「USER_ID」。在 const _ = require('underscore'); 下方新增下列項目：
// Hardcoded user ID
const USER_ID = '123';

處理 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，請在 functions/index.js 檔案的 allowlist 陣列中新增 Firebase Hosting 網址：

index.js

'use strict';
.....

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 部署更新後的雲端執行要求：

$ 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

設定開發人員控制台專案

  1. 前往開發人員控制台。
  2. 按一下「建立專案」，輸入專案名稱，然後按一下「建立專案」。

命名專案

選取雲端對雲端整合

在開發人員控制台的「專案首頁」中，選取「Cloud-to-cloud」下方的「新增雲端對雲端整合」。

新增雲端對雲端整合

  1. 輸入整合名稱，然後在「裝置類型」下方選取「攝影機」。稍後設定裝置時，Google Home 應用程式會顯示這個名稱。在本程式碼研究室中，我們輸入「WebRTC Codelab」做為顯示名稱，但您可以使用其他名稱。

新增顯示名稱

  1. 在「應用程式品牌宣傳」下方，上傳應用程式圖示的 png 檔案，大小為 144 x 144 像素，並命名為 .png。

新增應用程式圖示

啟用帳戶連結

如要在專案部署後啟用帳戶連結功能，請按照下列步驟操作：

  1. 前往 Developer Console 並開啟專案。
  2. 在「雲端對雲端」部分下方，依序點選整合項目旁的「開發」 >「編輯」。
  3. 在「設定與配置」頁面中，找到「帳戶連結」部分，並在對應的文字方塊中輸入下列資訊：

用戶端 ID

ABC123

用戶端密碼

DEF456

驗證網址

https://us-central1-
.cloudfunctions.net/fakeauth

權杖網址

https://us-central1-
.cloudfunctions.net/faketoken

更新帳戶連結網址

  1. 依序點選「儲存」>「測試」。

5. 測試虛擬 WebRTC 攝影機

  1. 前往部署 Firebase 專案時看到的 Hosting URL。您會看到下列介面，這是 CameraStream 用戶端應用程式：

CameraStream 用戶端應用程式介面

  1. 在「本機影片解析度」面板中，選取所需影片。
  2. 授予 CameraStream 用戶端應用程式存取網路攝影機和麥克風的權限。用戶端會顯示網路攝影機的影像畫面。
  1. 在 Google Home 應用程式中，依序輕觸「新增」>「支援 Google」。

Google Home 應用程式中的「設定裝置」頁面

  1. 搜尋並選取您建立的動作。

Google Home 應用程式中的智慧住宅動作

  1. 記下這個由五個英數字元組成的專屬代碼，因為後續步驟會用到。

由五位英數字元組成的專屬驗證碼

  1. 輕觸「帶我回去」。WebRTC 攝影機已新增至 Google Home 應用程式中的住家。

啟動 WebRTC 串流

  1. 在 CameraStream 用戶端應用程式的網頁上，將上一節中的英數代碼輸入「帳戶連結權杖值」文字方塊，然後按一下「提交」。

「帳戶連結權杖值」文字方塊

  1. 如要透過 Google 智慧螢幕裝置啟動 WebRTC 工作階段，請採取下列任一做法：
  • 說出「Ok Google，串流 WebRTC 攝影機」。
  • 在 Google 智慧螢幕裝置上，依序輕觸「居家控制」>「攝影機」>「WebRTC 攝影機」。

在 Google 智慧住宅 CameraStream 用戶端應用程式中，您會看到系統已成功產生並交換 Offer SPD 和 Answer SDP。網路攝影機的影像會透過 WebRTC 串流至 Google 智慧螢幕裝置。

6. 恭喜

恭喜！您已瞭解如何使用 WebRTC 通訊協定，將網路攝影機的畫面串流到 Google Nest 螢幕裝置。

瞭解詳情