Implémenter CameraStream avec WebRTC

1. Avant de commencer

La caractéristique CameraStream appartient aux appareils permettant de diffuser des flux vidéo sur les écrans connectés, Chromecast et les smartphones. Le protocole WebRTC est désormais compatible avec la caractéristique CameraStream, ce qui signifie que vous pouvez réduire considérablement la latence de démarrage et de streaming d'un appareil photo vers un écran Google Nest.

Prérequis

• Consultez le guide Présentation de Cloud à cloud.

Points abordés

• Déployer un service cloud pour la maison connectée
• Comment associer votre service à l'Assistant Google
• Diffuser un flux sur un appareil Google Nest avec le protocole WebRTC

Prérequis

• Un navigateur Web tel que Google Chrome
• Un appareil iOS ou Android avec l'application Google Home
• Node.js version 10.16 ou ultérieure.
• Forfait Blaze (paiement à l'usage) pour Firebase
• Webcam intégrée ou externe compatible avec la résolution Full HD.
• Un écran Google Nest

2. Premiers pas

Installer la CLI Firebase

La CLI Firebase vous permet de diffuser vos applications Web en local et de les déployer sur Firebase Hosting.

Pour installer la CLI Firebase, procédez comme suit:

1. Dans votre terminal, téléchargez et installez la CLI Firebase:

$ npm install -g firebase-tools

2. Vérifiez que la CLI est correctement installée:

$ firebase --version

3. Autorisez la CLI Firebase avec votre compte Google:

$ firebase login

Créer et configurer un projet Actions

1. Accédez à la console Actions, puis cliquez sur Nouveau projet.
2. Dans la zone de texte Nom du projet, saisissez un nom pour le projet, puis cliquez sur Créer un projet.

3. Sur la page Quel type d'action voulez-vous créer ?, cliquez sur Maison connectée > Commencer à créer. Le projet s'ouvre dans la console Actions.

4. Cliquez sur Develop > Invocation (Développer > Appel).
5. Dans la zone de texte Nom à afficher, saisissez le nom de l'action, puis cliquez sur Enregistrer. Ce nom s'affichera dans l'application Google Home ultérieurement lorsqu'un appareil sera configuré. Pour cet atelier de programmation, nous avons saisi WebRTC Codelab comme nom à afficher, mais vous pouvez utiliser un autre nom.

6. Cliquez sur Actions.
7. Dans la zone de texte URL de traitement, saisissez une URL d'espace réservé, telle que https://example.com.

Exécuter l'application cliente CameraStream

Le code source de cet atelier de programmation inclut un client WebRTC qui établit, négocie et gère la session WebRTC entre la webcam et l'écran d'accueil Google.

Pour exécuter l'application cliente WebRTC de CameraStream, effectuez l'une des opérations suivantes:

• Cliquez sur le bouton suivant pour télécharger le code source sur votre ordinateur de développement:

file_downloadTélécharger le code source

• Clonez ce dépôt GitHub:

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

Le code contient les répertoires suivants:

• Le répertoire camerastream-start, qui contient le code de démarrage sur lequel s'appuie la compilation.
• Le répertoire camerastream-done, qui contient le code de solution de l'atelier de programmation terminé.

Le répertoire camerastream-start contient les sous-répertoires suivants:

• Le sous-répertoire public, qui contient une UI de frontend pour contrôler et surveiller facilement l'état de votre caméra.
• Le sous-répertoire functions, qui contient un service cloud entièrement implémenté qui gère la caméra avec Cloud Functions for Firebase et Realtime Database.

Le code de démarrage contient des commentaires TODO qui indiquent où vous devez ajouter ou modifier du code. Exemple:

// TODO: Implement full SYNC response.

Se connecter à Firebase

1. Accédez au répertoire camerastream-start, puis configurez la CLI Firebase avec votre projet Actions:

$ cd camerastream-start
$ firebase use PROJECT_ID

2. Dans le répertoire camerastream-start, accédez au dossier functions, puis installez toutes les dépendances nécessaires:

$ cd functions
$ npm install

3. Si le message suivant s'affiche, ignorez-le. Cet avertissement est dû à des dépendances plus anciennes. Pour en savoir plus, consultez ce problème GitHub.

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

4. Initialisez un projet Firebase:

$ firebase init

5. Sélectionnez Functions (Fonctions) et Hosting (Hébergement). Cette opération initialise les API et les fonctionnalités nécessaires pour votre projet.

? 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. Configurez Cloud Functions avec les fichiers par défaut, en veillant à ne pas écraser les fichiers index.js et package.json existants dans l'exemple de projet:

? 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. Configurez Hosting avec le répertoire public dans le code du projet et utilisez le fichier index.html existant:

? 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. Messages de protocole de description de session Exchange (SDP)

L'échange de messages SDP est une étape importante dans la création d'un flux WebRTC. SDP est un protocole textuel qui décrit les caractéristiques d'une session multimédia. Il permet de négocier les paramètres d'une connexion peer-to-peer, tels que les codecs utilisés, les adresses IP des participants et les ports utilisés pour le transport multimédia.

Pour utiliser Realtime Database en tant qu'hôte afin d'échanger des messages SDP entre votre webcam et l'application cliente CameraStream pour maison connectée, procédez comme suit:

1. Dans la console Firebase, cliquez sur Créer > Realtime Database > Créer une base de données.

2. Dans le menu déroulant Emplacement en temps réel de la base de données, sélectionnez l'emplacement à partir duquel héberger votre base de données.

3. Sélectionnez Démarrer en mode test, puis cliquez sur Activer. Lorsque Realtime Database est activé, vous devez pouvoir le référencer depuis l'application cliente CameraStream.

4. Dans la console Firebase, sélectionnez Paramètres du projet > Paramètres du projet > Ajouter Firebase à votre application Web pour lancer le workflow de configuration.
5. Si vous avez déjà ajouté une application à votre projet Firebase, cliquez sur Ajouter une application pour afficher les options de plate-forme.
6. Saisissez un pseudo pour l'application, tel que My web app, puis cliquez sur Enregistrer l'application.
7. Dans la section Ajouter le SDK Firebase, sélectionnez Utiliser la balise <script>.
8. Copiez les valeurs de l'objet firebasebaseConfig, puis collez-les dans le fichier camaerastream-start/public/webrtc_generator.js.

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

9. Cliquez sur Accéder à la console pour terminer le processus. L'application Web que vous venez de créer s'affiche sur la page Paramètres du projet.

4. Créer une caméra WebRTC

Maintenant que vous avez configuré votre action, votre service cloud doit gérer les intents suivants:

• Un intent SYNC qui se produit lorsque l'Assistant souhaite connaître les appareils connectés par l'utilisateur. Cet intent est envoyé à votre service lorsque l'utilisateur associe un compte. Vous devez répondre avec une charge utile JSON pour les appareils et leurs fonctionnalités.
• Un intent EXECUTE/QUERY qui se produit lorsque l'Assistant souhaite contrôler un appareil pour le compte d'un utilisateur. En réponse, vous devez fournir une charge utile JSON avec le statut d'exécution de chaque appareil demandé.

Dans cette section, vous allez mettre à jour les fonctions que vous avez précédemment déployées pour gérer ces intents.

Mettre à jour la réponse SYNC

1. Accédez au fichier functions/index.js. Il contient le code permettant de répondre aux requêtes de l'Assistant.
2. Modifiez l'intent SYNC pour renvoyer les métadonnées et les fonctionnalités de l'appareil:

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

Gérer l'intent EXECUTE

L'intent EXECUTE gère les commandes de mise à jour de l'état de l'appareil. La réponse renvoie le statut de chaque commande (SUCCESS, ERROR ou PENDING, par exemple) ainsi que le nouvel état de l'appareil.

• Pour gérer un intent EXECUTE, modifiez le point de terminaison EXECUTE pour renvoyer le point de terminaison signaling du projet Firebase dans le fichier 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],
    },
  };

Gérer le partage des ressources entre origines multiples (CORS)

• Pour gérer CORS en raison de l'utilisation de la méthode POST pour envoyer le SDP, ajoutez l'URL Firebase Hosting au tableau allowlist dans le fichier 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.

Pour en savoir plus sur le CORS, consultez la page Partage des ressources entre origines multiples (CORS).

Gérer la clôture du flux

• Pour gérer l'arrêt du flux WebRTC, ajoutez l'URL de la fonction Firebase "signaling" au fichier 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();

Déployer sur Firebase

• Pour déployer sur Firebase, déployez le traitement cloud mis à jour à l'aide de la CLI Firebase:

$ firebase deploy

Cette commande déploie une application Web et plusieurs fonctions Cloud Functions for Firebase:

...

✔ Deploy complete!

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

Activer l'association de comptes

Pour activer l'association de comptes après le déploiement de votre projet, procédez comme suit:

1. Dans la console Actions, sélectionnez Développer > Association de comptes.
2. Dans la section Informations sur le client OAuth, saisissez les informations suivantes dans les zones de texte correspondantes:

3. Cliquez sur Save > Test (Enregistrer > Tester).

5. Tester la caméra WebRTC virtuelle

1. Accédez à l'URL Hosting que vous avez vue lors du déploiement de votre projet Firebase. L'interface suivante s'affiche. Il s'agit de l'application cliente CameraStream:

2. Dans le panneau Résolution vidéo locale, sélectionnez la vidéo souhaitée.
3. Autorisez l'application cliente CameraStream à accéder à votre webcam et à votre micro. Un flux vidéo de votre webcam s'affiche sur le client.

Lien vers l'action CameraStream pour la maison connectée

1. Dans l'application Google Home, appuyez sur Ajouter > Fonctionne avec Google.

2. Recherchez l'action que vous avez créée, puis sélectionnez-la.

3. Notez le code alphanumérique unique à cinq caractères, car vous en aurez besoin ultérieurement.

4. Appuyez sur Revenir en arrière. La caméra WebRTC est ajoutée à votre structure dans l'application Google Home.

Démarrer un flux WebRTC

1. Sur la page Web de l'application cliente CameraStream, saisissez le code alphanumérique de la dernière section dans la zone de texte Valeur du jeton d'association du compte, puis cliquez sur Envoyer.

2. Pour démarrer une session WebRTC sur votre écran connecté Google, effectuez l'une des opérations suivantes:

• Dites "Hey Google, diffuse le flux de la caméra WebRTC".
• Sur votre écran connecté Google, appuyez sur Contrôle de la maison > Caméra > Caméra WebRTC.

Dans l'application cliente CameraStream pour maison connectée de Google, vous pouvez constater que le SDP de l'offre et le SDP "Réponse" ont bien été générés et échangés. L'image de votre webcam est diffusée sur votre appareil d'affichage connecté Google avec WebRTC.

6. Félicitations

Félicitations ! Vous avez appris à diffuser du contenu depuis votre webcam sur un écran Google Nest avec le protocole WebRTC.

En savoir plus

• Caractéristiques des appareils pour la maison connectée
• Actions on Google: exemple de maison connectée avec Node.js
• Tester et partager des actions de maison connectée