Implementare CameraStream con WebRTC

1. Prima di iniziare

La caratteristica CameraStream appartiene ai dispositivi in grado di riprodurre in streaming i feed video su smart display, dispositivi Chromecast e smartphone. Il protocollo WebRTC è ora supportato all'interno del tratto CameraStream, il che significa che puoi ridurre notevolmente la latenza di avvio e streaming da una videocamera a un display Google Nest.

Prerequisiti

• Consulta la guida introduttiva al trasferimento da cloud a cloud.

Obiettivi didattici

• Come eseguire il deployment di un servizio cloud per la smart home.
• Come collegare il tuo servizio all'Assistente Google.
• Come riprodurre in streaming su un display Google Nest con il protocollo WebRTC.

Che cosa ti serve

• Un browser web, ad esempio Google Chrome.
• Un dispositivo iOS o Android con l'app Google Home.
• Node.js versione 10.16 o successive.
• Piano Blaze (pagamento a consumo) per Firebase.
• Una webcam integrata o esterna che supporti la risoluzione Full HD.
• Un display Google Nest.

2. Inizia

Installa l'interfaccia a riga di comando di Firebase

L'interfaccia a riga di comando di Firebase ti consente di pubblicare le tue app web in locale ed eseguirne il deployment su Firebase Hosting.

Per installare l'interfaccia a riga di comando di Firebase:

1. Nel terminale, scarica e installa l'interfaccia a riga di comando di Firebase:

$ npm install -g firebase-tools

2. Verifica che la CLI sia stata installata correttamente:

$ firebase --version

3. Autorizza l'interfaccia a riga di comando di Firebase con il tuo Account Google:

$ firebase login

Crea un progetto

1. Vai a Google Home Developer Console.
2. Fai clic su Crea progetto, inserisci un nome per il progetto e fai clic su Crea progetto.

Esegui l'app client CameraStream

Il codice sorgente di questo codelab include un client WebRTC che stabilisce, negozia e gestisce la sessione WebRTC tra la webcam e lo smart display Google Home.

Per eseguire l'app client WebRTC CameraStream, esegui una delle seguenti operazioni:

• Fai clic sul pulsante seguente per scaricare il codice sorgente sul tuo computer di sviluppo:

file_downloadScarica il codice sorgente

• Clona questo repository GitHub:

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

Il codice contiene le seguenti directory:

• La directory camerastream-start, che contiene il codice iniziale su cui si basa la build.
• La directory camerastream-done, che contiene il codice della soluzione per il codelab completato.

La directory camerastream-start contiene le seguenti sottodirectory:

• La sottodirectory public, che contiene una UI frontend per controllare e monitorare facilmente lo stato del dispositivo videocamera.
• La sottodirectory functions, che contiene un servizio cloud completamente implementato che gestisce la videocamera con Cloud Functions per Firebase e Realtime Database.

Il codice iniziale contiene commenti TODO che indicano dove devi aggiungere o modificare il codice, come nel seguente esempio:

// TODO: Implement full SYNC response.

Aggiungere Firebase al progetto della console per gli sviluppatori di Google Home

Metodo 1: tramite la console Firebase

1. Vai a Firebase.
2. Fai clic su Crea un progetto Firebase.
   
3. Nella schermata Crea un progetto, fai clic su Aggiungi Firebase al progetto Google Cloud.
   
4. Nella schermata Inizia, seleziona il progetto Google Cloud che hai appena creato nella console Google Home Developer e poi fai clic su Continua.
   

Metodo 2: tramite l'interfaccia a riga di comando di Firebase

firebase projects:addfirebase

Seleziona il progetto della console per gli sviluppatori Google Home che hai appena creato per aggiungere Firebase.

Quando Firebase viene aggiunto al progetto Google Home Developer Console, viene visualizzato nella console Firebase. L'ID progetto Firebase corrisponderà all'ID progetto della console per gli sviluppatori Google Home.

Connessione a Firebase

1. Vai alla directory camerastream-start e configura l'interfaccia a riga di comando di Firebase con il tuo progetto Azioni:

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

2. Nella directory camerastream-start, vai alla cartella functions e installa tutte le dipendenze necessarie:

$ cd functions
$ npm install

3. Se visualizzi il seguente messaggio, ignoralo. Questo avviso è dovuto a dipendenze precedenti. Per maggiori informazioni, vedi questo problema di GitHub.

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

4. Inizializza un progetto Firebase:

$ firebase init

5. Seleziona Funzioni e Hosting. In questo modo vengono inizializzate le API e le funzionalità necessarie per il progetto.

? 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. Configura Cloud Functions con i file predefiniti e assicurati di non sovrascrivere i file index.js e package.json esistenti nell'esempio di progetto:

? 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. Configura Hosting con la directory public nel codice del progetto e utilizza il file index.html esistente:

? 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. Scambio di messaggi SDP (Session Description Protocol)

Lo scambio di messaggi SDP è un passaggio importante per la creazione di un flusso WebRTC. SDP è un protocollo basato su testo che descrive le caratteristiche di una sessione multimediale. Viene utilizzato in WebRTC per negoziare i parametri di una connessione peer-to-peer, ad esempio i codec utilizzati, gli indirizzi IP dei partecipanti e le porte utilizzate per il trasporto dei contenuti multimediali.

Per utilizzare Realtime Database come host per lo scambio di messaggi SDP tra la webcam e l'app client CameraStream per la smart home, segui questi passaggi:

1. Nella console Firebase, fai clic su Build > Realtime Database > Crea database.

2. Nel menu a discesa Posizione di Realtime Database, seleziona una posizione appropriata da cui ospitare il database.

3. Seleziona Avvia in modalità test e poi fai clic su Attiva. Con Realtime Database abilitato, devi essere in grado di farvi riferimento dall'app client CameraStream.

4. Nella console Firebase, seleziona Impostazioni progetto > Impostazioni progetto > Aggiungi Firebase alla tua app web per avviare il flusso di lavoro di configurazione.
5. Se hai già aggiunto un'app al tuo progetto Firebase, fai clic su Aggiungi app per visualizzare le opzioni della piattaforma.
6. Inserisci un nickname per l'app, ad esempio My web app, poi fai clic su Registra app.
7. Nella sezione Aggiungi SDK Firebase, seleziona Utilizza tag <script>.
8. Copia i valori dall'oggetto firebasebaseConfig e incollali nel file camaerastream-start/public/webrtc_generator.js.

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

9. Fai clic su Continua alla console per completare la procedura. Vedrai la web app appena creata nella pagina Impostazioni progetto.

4. Crea una videocamera WebRTC

Ora che hai configurato l'azione, il tuo servizio cloud deve gestire i seguenti intent:

• Un intent SYNC che si verifica quando l'assistente vuole sapere quali dispositivi ha connesso l'utente. Viene inviato al tuo servizio quando l'utente collega un account. Devi rispondere con un payload JSON dei dispositivi dell'utente e delle relative funzionalità.
• Un intent EXECUTE/QUERY che si verifica quando l'assistente vuole controllare un dispositivo per conto di un utente. Devi rispondere con un payload JSON contenente lo stato di esecuzione di ogni dispositivo richiesto.

In questa sezione, aggiorna le funzioni che hai eseguito il deployment in precedenza per gestire questi intent.

Aggiorna la risposta di SYNC

1. Vai al file functions/index.js. Contiene il codice per rispondere alle richieste dell'assistente.
2. Modifica l'intent SYNC per restituire i metadati e le funzionalità del dispositivo:

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 non è definito nel codice. Aggiungi quanto segue in const _ = require('underscore');:

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

Gestisci l'intent EXECUTE

L'intent EXECUTE gestisce i comandi per aggiornare lo stato del dispositivo. La risposta restituisce lo stato di ogni comando, ad esempio SUCCESS, ERROR o PENDING, e il nuovo stato del dispositivo.

Per gestire un intent EXECUTE, modificalo in modo che restituisca l'endpoint signaling del progetto Firebase nel file functions/index.js:EXECUTE

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

Gestire la condivisione delle risorse tra origini (CORS)

Per gestire CORS a causa dell'utilizzo del metodo POST per inviare l'SDP, aggiungi l'URL di Firebase Hosting all'array allowlist nel file functions/index.js:

index.js

'use strict';
.....

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

Per saperne di più su CORS, consulta Condivisione delle risorse tra origini (CORS).

Gestire l'interruzione dello stream

Per gestire la terminazione dello stream WebRTC, aggiungi l'URL della funzione "signaling" di Firebase al file 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();

Esegui il deployment in Firebase

Per eseguire il deployment su Firebase, esegui il deployment dell'intent di cloud aggiornato con l'interfaccia a riga di comando di Firebase:

$ firebase deploy

Questo comando esegue il deployment di un'app web e di diverse Cloud Functions for Firebase:

...

✔ Deploy complete!

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

Configura il progetto Developer Console

1. Vai a Developer Console.
2. Fai clic su Crea progetto, inserisci un nome per il progetto e fai clic su Crea progetto.

Seleziona l'integrazione da cloud a cloud

Nella Home page del progetto nella Developer Console, seleziona Aggiungi integrazione cloud-to-cloud in Cloud-to-cloud.

1. Inserisci un nome integrazione e seleziona Videocamera in Tipo di dispositivo. Questo nome viene visualizzato in un secondo momento nell'app Google Home quando è presente un dispositivo da configurare. Per questo codelab, abbiamo inserito WebRTC Codelab come nome visualizzato, ma puoi utilizzare un nome diverso.

2. In Branding dell'app, carica un file png per l'icona dell'app, di dimensioni 144 x 144 px e denominato .png.

Abilitare il collegamento degli account

Per attivare il collegamento degli account dopo il deployment del progetto:

1. Vai alla Developer Console e apri il progetto.
2. Nella sezione Cloud-to-Cloud, fai clic su Sviluppa > Modifica accanto all'integrazione.
3. Nella pagina Configurazione, individua la sezione Collegamento account e inserisci le seguenti informazioni nelle caselle di testo corrispondenti:

4. Fai clic su Salva > Test.

5. Testare la videocamera virtuale WebRTC

1. Vai all'URL di hosting visualizzato durante il deployment del progetto Firebase. Visualizzi la seguente interfaccia, ovvero l'app client CameraStream:

2. Nel riquadro Risoluzione video locale, seleziona il video che preferisci.
3. Concedi all'app client CameraStream l'autorizzazione ad accedere alla webcam e al microfono. Sul client viene visualizzato un feed video della webcam.

Link all'azione CameraStream per la smart home

1. Nell'app Google Home, tocca Aggiungi > Funziona con Google.

2. Cerca l'azione che hai creato e selezionala.

3. Prendi nota del codice alfanumerico univoco di cinque caratteri perché ti servirà in un secondo momento.

4. Tocca Riportami indietro. La videocamera WebRTC viene aggiunta alla tua struttura nell'app Google Home.

Avviare uno stream WebRTC

1. Nella pagina web dell'app client CameraStream, inserisci il codice alfanumerico dell'ultima sezione nella casella di testo Valore token di collegamento dell'account e poi fai clic su Invia.

2. Per avviare una sessione WebRTC dal tuo smart display Google, esegui una delle seguenti operazioni:

• Di' "Hey Google, riproduci in streaming la videocamera WebRTC".
• Sul tuo smart display Google, tocca Controllo della casa > Videocamera > Videocamera WebRTC.

Dall'app client CameraStream per la smart home Google, vedi che l'offerta SDP e la risposta SDP sono state generate e scambiate correttamente. L'immagine della webcam viene riprodotta in streaming sul tuo smart display Google con WebRTC.

6. Complimenti

Complimenti! Hai imparato a trasmettere in streaming dalla webcam a un dispositivo di visualizzazione Google Nest con il protocollo WebRTC.

Scopri di più

• Caratteristiche dei dispositivi per la smart home
• Actions on Google: esempio di casa smart che utilizza Node.js
• Testare e condividere le Azioni per la smart home