Implementare CameraStream con WebRTC

1. Prima di iniziare

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

Prerequisiti

• Rivedi Cloud-to-cloud primer.

Obiettivi didattici

• Come eseguire il deployment di un servizio cloud per la smart home.
• Come collegare il tuo servizio all'Assistente Google.
• Come trasmettere 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 10.16 o versioni successive.
• Piano Blaze (pagamento a consumo) per Firebase.
• Una webcam integrata o esterna in grado di supportare 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 localmente ed eseguirne il deployment su Firebase Hosting.

Per installare l'interfaccia a riga di comando di Firebase, segui questi passaggi:

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

$ npm install -g firebase-tools

2. Verifica che l'interfaccia a riga di comando sia installata correttamente:

$ firebase --version

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

$ firebase login

Creare e configurare un progetto Actions

1. Vai alla console Actions e fai clic su Nuovo progetto.
2. Nella casella di testo Nome progetto, inserisci un nome per il progetto e fai clic su Crea progetto.

3. Nella pagina Che tipo di azione vuoi creare?, fai clic su Smart home > Inizia a creare. Il progetto si apre nella console Actions.

4. Fai clic su Sviluppa > Chiamata.
5. Nella casella di testo Nome visualizzato, inserisci un nome per l'azione e fai clic su Salva. Questo nome verrà visualizzato nell'app Google Home in un secondo momento quando ci sarà un dispositivo da configurare. Per questo codelab, abbiamo inserito WebRTC Codelab come nome visualizzato, ma puoi utilizzarne un altro.

6. Fai clic su Azioni.
7. Nella casella di testo URL di evasione degli ordini, inserisci un URL segnaposto, ad esempio https://example.com.

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 il display per la smart home di Google.

Per eseguire l'app client WebRTC di CameraStream, procedi in uno dei seguenti modi:

• 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 di avvio su cui crei.
• 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 un'interfaccia utente frontend per controllare e monitorare facilmente lo stato della videocamera.
• La sottodirectory functions, che contiene un servizio cloud completamente implementato che gestisce la videocamera con Cloud Functions for Firebase e Realtime Database.

Il codice di avvio contiene commenti TODO che indicano dove è necessario aggiungere o modificare il codice, come nell'esempio seguente:

// TODO: Implement full SYNC response.

Connessione a Firebase

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

$ 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 viene visualizzato il seguente messaggio, ignoralo. Questo avviso è dovuto a dipendenze precedenti. Per maggiori informazioni, consulta 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 Functions (Funzioni) e Hosting. Questa operazione inizializza le API e le funzionalità necessarie per il progetto.

? 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

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. Messaggi SDP (Exchange Session Description Protocol)

Lo scambio di messaggi SDP è un passaggio importante nella creazione di uno stream 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 multimediale.

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 Crea > Realtime Database > Crea il database.

2. Nel menu a discesa Località di Realtime Database, seleziona una località appropriata da cui ospitare il database.

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

4. Nella console Firebase, seleziona Impostazioni progetto > Impostazioni progetto > Aggiungi Firebase all'app web per avviare il flusso di lavoro di configurazione.
5. Se hai già aggiunto un'app al 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, e fai clic su Registra app.
7. Nella sezione Aggiungi l'SDK Firebase, seleziona Utilizza <script>. del tag.
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 Vai alla console per completare il processo. L'app web appena creata sarà visibile 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 sono stati connessi dall'utente. Viene inviato al tuo servizio quando l'utente collega un account. Dovresti rispondere con un payload JSON dei dispositivi dell'utente e delle loro 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 con lo stato di esecuzione di ogni dispositivo richiesto.

In questa sezione aggiorni le funzioni di cui hai eseguito il deployment in precedenza per gestire questi intent.

Aggiorna la risposta SYNC

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

Gestire l'intent EXECUTE

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

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

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 grazie all'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';

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.

Per saperne di più su CORS, consulta l'articolo sulla condivisione delle risorse tra origini (CORS).

Gestire la chiusura dello stream

• Per gestire la chiusura dello stream WebRTC, aggiungi "segnalazione" Firebase URL della funzione 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 in Firebase, esegui il deployment del fulfillment 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

Attiva il collegamento degli account

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

1. Nella console di Actions, seleziona Develop > Collegamento dell'account.
2. Nella sezione Informazioni sul client OAuth, inserisci le seguenti informazioni nelle caselle di testo corrispondenti:

3. Fai clic su Salva > Test.

5. Testa la videocamera WebRTC virtuale

1. Vai all'URL di Hosting che hai visualizzato quando hai eseguito il deployment del tuo progetto Firebase. Vedrai la seguente interfaccia, ovvero l'app client CameraStream:

2. Nel riquadro Risoluzione video locale, seleziona il video che ti interessa.
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 Torna indietro. La videocamera WebRTC viene aggiunta alla tua struttura nell'app Google Home.

Avvia uno stream WebRTC

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

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

• Di' "Hey Google, trasmetti in streaming la videocamera WebRTC".
• Sullo smart display Google, tocca Controllo della casa > Fotocamera > Videocamera WebRTC.

Nell'app client CameraStream per la smart home di Google, puoi notare che l'SPP per l'offerta e l'SDP per la risposta sono stati generati e scambiati correttamente. L'immagine dalla 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 display Google Nest con il protocollo WebRTC.

Scopri di più

• Caratteristiche dei dispositivi per la smart home
• Azioni su Google: esempio di smart home utilizzando Node.js
• Testare e condividere le azioni della smart home