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 réduire considérablement la latence de démarrage et de diffusion entre une caméra et un écran Google Nest.

Caméras diffusant des contenus sur un écran Google Nest

Prérequis

Points abordés

  • Déployer un service cloud pour la maison connectée
  • Connecter votre service à l'Assistant Google
  • Diffuser un contenu en streaming 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.
  • Écran Google Nest

2. Premiers pas

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
  1. Vérifiez que la CLI est correctement installée:
$ firebase --version
  1. 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.

Boîte de dialogue "Nouveau projet" dans la console Actions

  1. 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.

Onglet "Présentation" de la console Actions

  1. Cliquez sur Développer > Appel.
  2. Dans la zone de texte Display name (Nom à afficher), saisissez un nom pour l'action, puis cliquez sur Save (Enregistrer). Ce nom apparaîtra plus tard dans l'application Google Home, lorsqu'il y aura un appareil à configurer. Pour cet atelier de programmation, nous avons saisi WebRTC Codelab comme nom à afficher, mais vous pouvez en utiliser un autre.

Panneau "Appel" de la console Actions

  1. Cliquez sur Actions.
  2. Dans la zone de texte Fulfillment URL (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 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:

  • 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 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 interface utilisateur permettant de contrôler et de 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 le 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
  1. Dans le répertoire camerastream-start, accédez au dossier functions, puis installez toutes les dépendances nécessaires:
$ cd functions
$ npm install
  1. 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
  1. Initialisez un projet Firebase:
$ firebase init
  1. Sélectionnez Functions (Fonctions) et Hosting (Hébergement). Cette action initialise les API et les fonctionnalités 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
  1. 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
  1. 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 dans 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 de la maison connectée, procédez comme suit:

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

Page Realtime Database dans la console Firebase

  1. Dans le menu déroulant Emplacement Realtime Database, sélectionnez l'emplacement approprié pour héberger votre base de données.

Menu déroulant de l'emplacement Realtime Database dans la boîte de dialogue "Configurer une base de données"

  1. Sélectionnez Commencer 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.
  1. Dans la console Firebase, sélectionnez 513f2be95dcd7896.png Paramètres du projet > Paramètres du projet > e584a9026e2b407f.pngAjouter Firebase à votre application Web pour lancer le processus de configuration.
  2. Si vous avez déjà ajouté une application à votre projet Firebase, cliquez sur Ajouter une application pour afficher les options de la plate-forme.
  3. Saisissez un pseudo pour l'application, tel que My web app, puis cliquez sur Register app (Enregistrer l'application).
  4. Dans la section Ajouter le SDK Firebase, sélectionnez Utiliser la balise <script>.
  5. 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"
};
  1. 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:

  • 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 fonctionnalités.
  • Intent EXECUTE/QUERY qui se produit lorsque l'Assistant souhaite contrôler un appareil au nom 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. Il contient le code permettant de répondre aux demandes 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 afin qu'il renvoie 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 l'arrêt d'un 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 une fois votre projet déployé, 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:

Client-ID

ABC123

Code secret du client

DEF456

URL d'autorisation

https://us-central1-{project-id}.cloudfunctions.net/fakeauth

URL du jeton

https://us-central1-{project-id}.cloudfunctions.net/faketoken

Page d&#39;association de comptes dans la console Actions

  1. Cliquez sur Enregistrer > Tester.

5. Tester la caméra WebRTC virtuelle

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

Interface de l&#39;application cliente CameraStream

  1. Dans le panneau Résolution vidéo locale, sélectionnez la vidéo de votre choix.
  2. Autorisez l'application cliente CameraStream à accéder à votre webcam et à votre micro. Un flux vidéo de votre webcam s'affiche sur le client.
  1. Dans l'application Google Home, appuyez sur Ajouter > Fonctionne avec Google.

Page &quot;Configurer un appareil&quot; dans l&#39;application Google Home

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

Action pour maison connectée dans l&#39;application Google Home

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

Code alphanumérique unique à cinq chiffres

  1. 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 de la zone de texte Valeur du jeton d'association de comptes, puis cliquez sur Envoyer.

Zone de texte &quot;Valeur du jeton d&#39;association de comptes&quot;

  1. Pour démarrer une session WebRTC à partir de votre écran connecté Google, effectuez l'une des opérations suivantes:
  • Dites "Hey Google, diffuse la caméra WebRTC en streaming".
  • Sur votre écran connecté Google, appuyez sur Contrôle de la maison > Caméra > Caméra WebRTC.

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

6. Félicitations

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

Plus d'infos