CameraStream mit WebRTC implementieren

1. Hinweis

Das Attribut CameraStream gehört zu Geräten, die Videostreams auf Smart-Displays, Chromecast-Geräte und Smartphones streamen können. Das WebRTC-Protokoll wird jetzt im CameraStream-Trait unterstützt. Das bedeutet, dass du die Start- und Streaminglatenz von einem Kameragerät zu einem Google Nest-Displaygerät erheblich reduzieren kannst.

Vorbereitung

• Cloud-to-Cloud-Grundlagen

Lerninhalte

• So stellen Sie einen Smart-Home-Clouddienst bereit.
• So verbinden Sie Ihren Dienst mit Google Assistant.
• Mit dem WebRTC-Protokoll auf ein Google Nest-Display streamen

Voraussetzungen

• Ein Webbrowser, z. B. Google Chrome.
• Ein iOS- oder Android-Gerät mit der Google Home App.
• Node.js-Version 10.16 oder höher.
• Blaze-Tarif (Pay as you go) für Firebase.
• Eine integrierte oder externe Webcam, die Full-HD-Auflösung unterstützt.
• Ein Google Nest-Display

2. Jetzt starten

Firebase CLI installieren

Mit der Firebase CLI können Sie Ihre Web-Apps lokal bereitstellen und in Firebase Hosting bereitstellen.

So installieren Sie die Firebase CLI:

1. Laden Sie die Firebase CLI in Ihrem Terminal herunter und installieren Sie sie:

$ npm install -g firebase-tools

2. Prüfen Sie, ob die CLI korrekt installiert wurde:

$ firebase --version

3. Autorisieren Sie die Firebase CLI mit Ihrem Google-Konto:

$ firebase login

Projekt erstellen

1. Rufen Sie die Google Home Developer Console auf.
2. Klicken Sie auf Projekt erstellen, geben Sie einen Namen für das Projekt ein und klicken Sie auf Projekt erstellen.

CameraStream-Client-App ausführen

Der Quellcode für dieses Codelab enthält einen WebRTC-Client, der die WebRTC-Sitzung zwischen der Webcam und dem Google Smart Home-Displaygerät herstellt, aushandelt und verwaltet.

Führen Sie einen der folgenden Schritte aus, um die CameraStream WebRTC-Client-App auszuführen:

• Klicken Sie auf die folgende Schaltfläche, um den Quellcode auf Ihren Entwicklercomputer herunterzuladen:

file_downloadQuellcode herunterladen

• Klonen Sie dieses GitHub-Repository:

  $ git clone https://github.com/google-home/smarthome-camerastream-webrtc.git
  

Der Code enthält die folgenden Verzeichnisse:

• Das Verzeichnis camerastream-start, das den Startcode enthält, auf dem Sie aufbauen.
• Das Verzeichnis camerastream-done, das den Lösungscode für das fertige Codelab enthält.

Das Verzeichnis camerastream-start enthält die folgenden Unterverzeichnisse:

• Das Unterverzeichnis public, das eine Frontend-Benutzeroberfläche enthält, mit der Sie den Status Ihres Kamerageräts einfach steuern und überwachen können.
• Das Unterverzeichnis functions, das einen vollständig implementierten Clouddienst enthält, der die Kamera mit Cloud Functions for Firebase und Realtime Database verwaltet.

Der Startcode enthält TODO-Kommentare, die angeben, wo Sie Code hinzufügen oder ändern müssen, z. B. im folgenden Beispiel:

// TODO: Implement full SYNC response.

Firebase zu Ihrem Google Home Developer Console-Projekt hinzufügen

Methode 1: Über die Firebase Console

1. Rufen Sie Firebase auf.
2. Klicken Sie auf Firebase-Projekt erstellen.
   
3. Klicken Sie auf dem Bildschirm Projekt erstellen auf Firebase dem Google Cloud-Projekt hinzufügen.
   
4. Wählen Sie auf dem Bildschirm Erste Schritte das Google Cloud-Projekt aus, das Sie gerade in der Google Home Developer Console erstellt haben, und klicken Sie dann auf Weiter.
   

Methode 2: Über die Firebase CLI

firebase projects:addfirebase

Wählen Sie das Google Home Developer Console-Projekt aus, das Sie gerade erstellt haben, um Firebase hinzuzufügen.

Wenn Ihrem Google Home Developer Console-Projekt Firebase hinzugefügt wird, wird es in der Firebase Console angezeigt. Die Projekt-ID des Firebase-Projekts entspricht der Projekt-ID Ihres Google Home Developer Console-Projekts.

Mit Firebase verknüpfen

1. Rufen Sie das Verzeichnis camerastream-start auf und richten Sie dann die Firebase CLI mit Ihrem Actions-Projekt ein:

$ cd camerastream-start
$ firebase use <project-id>

2. Wechseln Sie im Verzeichnis camerastream-start zum Ordner functions und installieren Sie dann alle erforderlichen Abhängigkeiten:

$ cd functions
$ npm install

3. Wenn die folgende Meldung angezeigt wird, ignorieren Sie sie. Diese Warnung wird aufgrund älterer Abhängigkeiten angezeigt. Weitere Informationen finden Sie in diesem GitHub-Problem.

found 5 high severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

4. Firebase-Projekt initialisieren:

$ firebase init

5. Wählen Sie Functions und Hosting aus. Dadurch werden die erforderlichen APIs und Funktionen für Ihr Projekt initialisiert.

? 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

6. Konfigurieren Sie Cloud Functions mit den Standarddateien und achten Sie darauf, dass die vorhandenen Dateien index.js und package.json im Projektbeispiel nicht überschrieben werden:

? 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

7. Konfigurieren Sie Hosting mit dem Verzeichnis public im Projektcode und verwenden Sie die vorhandene Datei 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-Nachrichten (Session Description Protocol) austauschen

Der Austausch von SDP-Nachrichten ist ein wichtiger Schritt beim Einrichten eines WebRTC-Streams. SDP ist ein textbasiertes Protokoll, das die Merkmale einer Multimediasitzung beschreibt. Sie wird in WebRTC verwendet, um die Parameter einer Peer-to-Peer-Verbindung auszuhandeln, z. B. die verwendeten Codecs, die IP-Adressen der Teilnehmer und die Ports, die für den Medientransport verwendet werden.

Wenn Sie die Realtime Database als Host verwenden möchten, um SDP-Nachrichten zwischen Ihrer Webcam und der Smart Home CameraStream-Client-App auszutauschen, gehen Sie so vor:

1. Klicken Sie in der Firebase Console auf Entwickeln > Realtime Database > Datenbank erstellen.

2. Wählen Sie im Drop-down-Menü Realtime Database location (Standort der Realtime Database) einen geeigneten Standort für das Hosting Ihrer Datenbank aus.

3. Wählen Sie Im Testmodus starten aus und klicken Sie dann auf Aktivieren. Wenn die Realtime Database aktiviert ist, müssen Sie in der CameraStream-Client-App darauf verweisen können.

4. Wählen Sie in der Firebase Console  Projekteinstellungen > Projekteinstellungen > Firebase zu Ihrer Web-App hinzufügen aus, um den Einrichtungsvorgang zu starten.
5. Wenn Sie Ihrem Firebase-Projekt bereits eine App hinzugefügt haben, klicken Sie auf App hinzufügen, um die Plattformoptionen aufzurufen.
6. Geben Sie einen Alias für die App ein, z. B. My web app, und klicken Sie dann auf App registrieren.
7. Wählen Sie im Bereich Firebase-SDK hinzufügen die Option <script>-Tag verwenden aus.
8. Kopieren Sie die Werte aus dem firebasebaseConfig-Objekt und fügen Sie sie in die Datei camaerastream-start/public/webrtc_generator.js ein.

const firebaseConfig = {
  apiKey: "XXXXX",
  authDomain: "XXXXX",
  projectId: "XXXXX",
  storageBucket: "XXXXX",
  messagingSenderId: "XXXXX",
  appId: "XXXXX",
  measurementId: "XXXXX"
};

9. Klicken Sie auf Weiter zur Konsole, um den Vorgang abzuschließen. Die neu erstellte Web-App wird auf der Seite Projekteinstellungen angezeigt.

4. WebRTC-Kamera erstellen

Nachdem Sie Ihre Aktion konfiguriert haben, muss Ihr Cloud-Dienst die folgenden Intents verarbeiten:

• Ein SYNC-Intent, der ausgelöst wird, wenn Assistant wissen möchte, welche Geräte der Nutzer verbunden hat. Wird an Ihren Dienst gesendet, wenn der Nutzer ein Konto verknüpft. Sie sollten mit einer JSON-Nutzlast der Geräte des Nutzers und deren Funktionen antworten.
• Ein EXECUTE/QUERY-Intent, der ausgelöst wird, wenn Assistant ein Gerät im Namen eines Nutzers steuern möchte. Sie sollten mit einer JSON-Nutzlast mit dem Ausführungsstatus jedes angeforderten Geräts antworten.

In diesem Abschnitt aktualisieren Sie die Funktionen, die Sie zuvor bereitgestellt haben, um diese Intents zu verarbeiten.

Antwort von SYNC aktualisieren

1. Rufen Sie die Datei functions/index.js auf. Sie enthält den Code, mit dem auf Anfragen von Assistant reagiert wird.
2. Bearbeite den Intent SYNC, um die Metadaten und Funktionen des Geräts zurückzugeben:

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
      },
    }],
  },
};
});

3. USER_ID ist im Code nicht definiert. Fügen Sie unter const _ = require('underscore'); Folgendes hinzu:

// Hardcoded user ID
const USER_ID = '123';

Intent EXECUTE verarbeiten

Der Intent EXECUTE verarbeitet Befehle zum Aktualisieren des Gerätestatus. Die Antwort gibt den Status jedes Befehls zurück, z. B. SUCCESS, ERROR oder PENDING, sowie den neuen Gerätestatus.

Wenn Sie einen EXECUTE-Intent verarbeiten möchten, bearbeiten Sie den EXECUTE-Intent so, dass der signaling-Endpunkt des Firebase-Projekts in der Datei functions/index.js zurückgegeben wird:

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],
    },
  };
});

Cross-Origin Resource Sharing (CORS) verarbeiten

Um CORS aufgrund der Verwendung der POST-Methode zum Senden des SDP zu verarbeiten, fügen Sie die Firebase Hosting-URL dem allowlist-Array in der Datei functions/index.js hinzu:

index.js

'use strict';
.....

var allowList = ['https://www.gstatic.com','https://<project-id>.web.app']; //TODO Add Firebase hosting URL.

Weitere Informationen zu CORS finden Sie unter Cross-Origin Resource Sharing (CORS).

Stream-Beendigung behandeln

Wenn Sie die Beendigung von WebRTC-Streams verarbeiten möchten, fügen Sie die Firebase-Funktions-URL „signaling“ der Datei public/webrtc_generator.js hinzu:

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();

In Firebase bereitstellen

So stellen Sie die aktualisierte Cloud-Auftragsausführung in Firebase bereit:

$ firebase deploy

Mit diesem Befehl werden eine Web-App und mehrere Cloud Functions for Firebase bereitgestellt:

...

✔ Deploy complete!

Project Console: https://console.firebase.google.com/project/<project-id>/overview
Hosting URL: https://<project-id>.web.app

Developer Console-Projekt konfigurieren

1. Rufen Sie die Entwicklungskonsole auf.
2. Klicken Sie auf Projekt erstellen, geben Sie einen Namen für das Projekt ein und klicken Sie auf Projekt erstellen.

Cloud-zu-Cloud-Integration auswählen

Wählen Sie in der Developer Console auf der Projekthomepage unter Cloud-to-Cloud die Option Cloud-to-Cloud-Integration hinzufügen aus.

1. Geben Sie einen Integrationsnamen ein und wählen Sie unter Gerätetyp die Option Kamera aus. Dieser Name wird später in der Google Home App angezeigt, wenn ein Gerät eingerichtet werden muss. In diesem Codelab haben wir WebRTC Codelab als Anzeigenamen eingegeben. Sie können aber auch einen anderen Namen verwenden.

2. Laden Sie unter App-Branding eine png-Datei für das App-Symbol mit einer Größe von 144 × 144 Pixel und dem Namen .png hoch.

Kontoverknüpfung aktivieren

So aktivieren Sie die Kontoverknüpfung, nachdem Ihr Projekt bereitgestellt wurde:

1. Rufen Sie die Developer Console auf und öffnen Sie das Projekt.
2. Klicken Sie im Bereich Cloud-to-Cloud neben der Integration auf Entwickeln > Bearbeiten.
3. Suchen Sie auf der Seite Einrichtung und Konfiguration nach dem Bereich Kontoverknüpfung und geben Sie die folgenden Informationen in die entsprechenden Textfelder ein:

4. Klicken Sie auf Speichern > Testen.

5. Virtuelle WebRTC-Kamera testen

1. Rufen Sie die Hosting-URL auf, die beim Bereitstellen Ihres Firebase-Projekts angezeigt wurde. Sie sehen die folgende Oberfläche, die die CameraStream-Client-App ist:

2. Wählen Sie im Bereich Lokale Videoauflösung das gewünschte Video aus.
3. Erteilen Sie der CameraStream-Client-App die Berechtigung, auf Ihre Webcam und Ihr Mikrofon zuzugreifen. Auf dem Client wird ein Videofeed von Ihrer Webcam angezeigt.

Mit der Smart-Home-Aktion CameraStream verknüpfen

1. Tippe in der Google Home App auf Hinzufügen > Funktioniert mit Google.

2. Suchen Sie nach der von Ihnen erstellten Aktion und wählen Sie sie aus.

3. Notieren Sie sich den eindeutigen, fünfstelligen alphanumerischen Code, da Sie ihn später benötigen.

4. Tippen Sie auf Bring mich zurück. Die WebRTC-Kamera wird Ihrem Zuhause in der Google Home App hinzugefügt.

WebRTC-Stream starten

1. Geben Sie auf der Webseite für die CameraStream-Client-App den alphanumerischen Code aus dem letzten Abschnitt in das Textfeld Wert des Kontoverknüpfungstokens ein und klicken Sie dann auf Senden.

2. So starten Sie eine WebRTC-Sitzung auf Ihrem Google Smart Display:

• Sagen Sie „Hey Google, streame WebRTC-Kamera.“
• Tippe auf deinem Google Smart Display auf Smart-Home-Steuerung > Kamera > WebRTC-Kamera.

In der Google Smart Home CameraStream-Client-App sehen Sie, dass das Offer-SPD und das Answer-SPD erfolgreich generiert und ausgetauscht wurden. Das Bild von Ihrer Webcam wird mit WebRTC auf Ihr Google Smart Display gestreamt.

6. Glückwunsch

Glückwunsch! Sie haben gelernt, wie Sie mit dem WebRTC-Protokoll von Ihrer Webcam auf ein Google Nest-Display streamen.

Weitere Informationen

• Smart-Home-Geräteattribute
• Actions on Google: Smart-Home-Beispiel mit Node.js
• Smart-Home-Aktionen testen und teilen