Implémenter CameraStream avec WebRTC

1. Avant de commencer

La caractéristique CameraStream appartient aux appareils pouvant diffuser des flux vidéo sur des écrans connectés, des appareils Chromecast et des smartphones. Le protocole WebRTC est désormais compatible avec la caractéristique CameraStream, ce qui signifie que vous pouvez considérablement réduire la latence du démarrage et du streaming entre une caméra et un écran Google Nest.

Prérequis

• Consultez la page Introduction Cloud à cloud.

Points abordés

• Déployer un service cloud pour la maison connectée
• Comment connecter votre service à l'Assistant Google.
• Diffuser du contenu sur un écran 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. Commencer

Installer la CLI Firebase

La CLI Firebase vous permet de diffuser vos applications Web localement 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 > Commencez à créer des applications. Le projet s'ouvre dans la console Actions.

4. Cliquez sur Développer > Appel.
5. Dans la zone de texte Nom à afficher, saisissez un nom pour l'action, puis cliquez sur Enregistrer. Ce nom apparaîtra plus tard dans l'application Google Home, lorsque vous aurez un appareil à configurer. Pour cet atelier de programmation, nous avons saisi WebRTC Codelab comme nom à afficher, mais vous pouvez en utiliser un autre.

6. Cliquez sur Actions.
7. Dans la zone de texte URL de traitement, saisissez une URL réservée, 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 de la maison connectée 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 le dépôt GitHub suivant :

$ 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 à partir duquel vous effectuez 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 interface utilisateur 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 l'appareil photo 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, comme dans l'exemple suivant:

// 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û à d'anciennes dépendances. 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 fonctionnalités et les API nécessaires à 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 et assurez-vous de 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 SDP (Exchange Session Description Protocol)

L'échange de messages SDP est une étape importante de l'établissement d'un flux WebRTC. SDP est un protocole textuel qui décrit les caractéristiques d'une session multimédia. Il est utilisé dans WebRTC pour 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 la maison connectée, procédez comme suit:

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

2. Dans le menu déroulant Emplacement de Realtime Database, sélectionnez l'emplacement approprié à 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 à partir de l'application cliente CameraStream.

4. Dans la console Firebase, sélectionnez Paramètres du projet > Paramètres du projet > Ajoutez 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 la plate-forme.
6. Saisissez un pseudo pour l'application, par exemple My web app, puis cliquez sur Enregistrer l'application.
7. Dans la section Add Firebase SDK (Ajouter le SDK Firebase), sélectionnez Use <script> (Utiliser <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. La nouvelle application Web 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:

• Intent SYNC qui se produit lorsque l'Assistant souhaite savoir quels appareils l'utilisateur a connectés. Cet intent est envoyé à votre service lorsque l'utilisateur associe un compte. Vous devez répondre avec une charge utile JSON des appareils de l'utilisateur et de leurs capacités.
• 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 déployées précédemment pour gérer ces intents.

Mettre à jour la réponse SYNC

1. Accédez au fichier functions/index.js. Elle 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 l'intent 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 le 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 fermeture d'une diffusion en direct

• Pour gérer l'arrêt du flux WebRTC, ajoutez le "signalement" Firebase l'URL de la fonction 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 Enregistrer > Test.

5. Tester la caméra virtuelle WebRTC

1. Accédez à l'URL Hosting que vous avez vue lorsque vous avez déployé votre projet Firebase. L'interface suivante, qui correspond à l'application cliente CameraStream, s'affiche:

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 provenant de votre webcam apparaît sur le client.

Associer à l'action CameraStream de 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 Retourner. 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 Account Linking token value, puis cliquez sur Envoyer.

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

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

Dans l'application cliente CameraStream pour la maison connectée Google, vous constatez que le SPD de l'offre et la réponse SDP ont bien été générés et échangés. L'image de votre webcam est diffusée sur votre écran connecté Google avec WebRTC.

6. Félicitations

Félicitations ! Vous avez appris à diffuser du contenu depuis votre webcam vers un écran Google Nest à l'aide du protocole WebRTC.

En savoir plus

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