1. Zanim zaczniesz
Atrybut CameraStream
należy do urządzeń z możliwością odtwarzania kanałów wideo na inteligentnych ekranach, urządzeniach Chromecast i smartfonach. Protokół WebRTC jest teraz obsługiwany w ramach cechy CameraStream
, co oznacza, że można znacznie skrócić czas uruchamiania i strumieniowego przesyłania danych z aparatu na urządzenie Google Nest.
Wymagania wstępne
- Zapoznaj się z omówieniem aplikacji chmurowych.
Czego się nauczysz
- Jak wdrożyć usługę inteligentnego domu w chmurze.
- Jak połączyć usługę z Asystentem Google
- Przesyłanie strumieniowe na urządzenie wyświetlające Google Nest za pomocą protokołu WebRTC
Czego potrzebujesz
- Przeglądarkę, na przykład Google Chrome.
- urządzenie z iOS lub Androidem z aplikacją Google Home,
- Node.js w wersji 10.16 lub nowszej.
- Abonament Blaze (płatność według wykorzystania) w Firebase.
- Wbudowane lub zewnętrzne urządzenie z kamerą internetową, które może obsługiwać rozdzielczość HD.
- Ekran Google Nest.
2. Rozpocznij
Instalowanie wiersza poleceń Firebase
Interfejs wiersza poleceń Firebase umożliwia lokalne udostępnianie aplikacji internetowych i wdrażanie ich w Hostingu Firebase.
Aby zainstalować wiersz poleceń Firebase, wykonaj te czynności:
- W terminalu pobierz i zainstaluj interfejs wiersza poleceń Firebase:
$ npm install -g firebase-tools
- Sprawdź, czy interfejs wiersza poleceń jest poprawnie zainstalowany:
$ firebase --version
- Autoryzuj wiersz poleceń Firebase za pomocą konta Google:
$ firebase login
Tworzenie i konfigurowanie projektu w Actions
- Otwórz konsolę Actions i kliknij New project (Nowy projekt).
- W polu tekstowym Nazwa projektu wpisz nazwę projektu i kliknij Utwórz projekt.
- Na stronie Jakiego działania chcesz utworzyć? kliknij Inteligentny dom > Rozpocznij tworzenie. Projekt zostanie otwarty w konsoli Actions.
- Kliknij Develop > Wywołanie.
- W polu tekstowym Nazwa wyświetlana wpisz nazwę działania, a następnie kliknij Zapisz. Ta nazwa pojawi się w aplikacji Google Home, gdy będzie można skonfigurować urządzenie. Na potrzeby tego ćwiczenia jako nazwę wyświetlaną wpisaliśmy
WebRTC Codelab
, ale możesz użyć innej.
- Kliknij Czynności.
- W polu tekstowym URL realizacji wpisz zastępczy adres URL, np.
https://example.com
.
Uruchamianie aplikacji klienckiej CameraStream
Kod źródłowy tego ćwiczenia z programowania obejmuje klienta WebRTC, który ustanawia i negocjuje sesję WebRTC oraz zarządza nią między kamerą internetową a inteligentnym inteligentnym ekranem Google.
Aby uruchomić aplikację kliencką WebRTC Streaming WebRTC, wykonaj jedną z tych czynności:
- Kliknij ten przycisk, aby pobrać kod źródłowy do swojego komputera programisty:
- Skopiuj to repozytorium GitHub:
$ git clone https://github.com/google-home/smarthome-camerastream-webrtc.git
Kod zawiera te katalogi:
- Katalog
camerastream-start
, który zawiera kod początkowy, na którym tworzysz kompilację. - Katalog
camerastream-done
, który zawiera kod rozwiązania gotowego ćwiczenia z programowania.
Katalog camerastream-start
zawiera te podkatalogi:
- Podkatalog
public
zawierający interfejs frontendu umożliwiający łatwe sterowanie i monitorowanie stanu urządzenia kamery. - Podkatalog
functions
zawierający w pełni zaimplementowaną usługę chmurową, która zarządza kamerą z funkcjami Cloud Functions dla Firebase i Bazy danych czasu rzeczywistego.
Kod początkowy zawiera komentarze (TODO
) wskazujące, gdzie trzeba dodać lub zmienić kod, na przykład taki:
// TODO: Implement full SYNC response.
Łączenie Analytics z Firebase
- Przejdź do katalogu
camerastream-start
, a potem skonfiguruj wiersz poleceń Firebase w projekcie Actions:
$ cd camerastream-start $ firebase use PROJECT_ID
- W katalogu
camerastream-start
przejdź do folderufunctions
i zainstaluj wszystkie niezbędne zależności:
$ cd functions $ npm install
- Jeśli widzisz ten komunikat, zignoruj go. To ostrzeżenie jest spowodowane starszymi zależnościami. Więcej informacji znajdziesz w artykule Ten problem na GitHubie.
found 5 high severity vulnerabilities run `npm audit fix` to fix them, or `npm audit` for details
- Inicjowanie projektu Firebase:
$ firebase init
- Wybierz Funkcje i Hosting. Inicjuje niezbędne interfejsy API i funkcje dla Twojego projektu.
? 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
- Skonfiguruj w Cloud Functions domyślne pliki i sprawdź, czy nie zastąpisz istniejących plików
index.js
ipackage.json
w przykładowym projekcie:
? 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
- Skonfiguruj Hosting za pomocą katalogu
public
w kodzie projektu i użyj istniejącego plikuindex.html
:
? 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. Komunikaty SDP (Exchange Session Description Protocol)
Wymiana wiadomości SDP jest ważnym krokiem podczas tworzenia strumienia WebRTC. SDP to protokół tekstowy opisujący cechy sesji multimedialnej. Służy on do negocjowania parametrów połączenia peer-to-peer, takich jak używane kodeki, adresy IP uczestników i porty używane do przesyłania multimediów.
Aby używać Bazy danych czasu rzeczywistego jako hosta do wymiany wiadomości SDP między kamerą internetową a aplikacją kliencką inteligentnego domu, wykonaj te czynności:
- W konsoli Firebase kliknij Kompilacja > Baza danych czasu rzeczywistego > Utwórz bazę danych.
- W menu Lokalizacja bazy danych w czasie rzeczywistym wybierz odpowiednią lokalizację, z której chcesz przechowywać bazę danych.
- Kliknij kolejno Uruchom w trybie testowym i Włącz. Po włączeniu Bazy danych czasu rzeczywistego musisz mieć możliwość odwoływania się do niej z aplikacji klienckiej CameraStream.
- W konsoli Firebase wybierz
Ustawienia projektu > Ustawienia projektu >
Dodaj Firebase do swojej aplikacji internetowej, aby uruchomić proces konfiguracji.
- Jeśli w projekcie Firebase masz już dodaną aplikację, kliknij Dodaj aplikację, aby wyświetlić opcje platformy.
- Wpisz pseudonim aplikacji, np.
My web app
, a potem kliknij Zarejestruj aplikację. - W sekcji Dodaj pakiet SDK Firebase wybierz Użyj tagu <script>.
- Skopiuj wartości z obiektu
firebasebaseConfig
, a następnie wklej je do plikucamaerastream-start/public/webrtc_generator.js
.
const firebaseConfig = {
apiKey: "XXXXX",
authDomain: "XXXXX",
projectId: "XXXXX",
storageBucket: "XXXXX",
messagingSenderId: "XXXXX",
appId: "XXXXX",
measurementId: "XXXXX"
};
- Kliknij Przejdź do konsoli, aby zakończyć proces. Nowo utworzoną aplikację internetową zobaczysz na stronie Ustawienia projektu.
4. Tworzenie kamery WebRTC
Po skonfigurowaniu działania, usługa w chmurze musi obsługiwać te intencje:
- Intencja
SYNC
, która występuje, gdy Asystent chce wiedzieć, z jakimi urządzeniami połączył się użytkownik. Ta opcja jest wysyłana do usługi, gdy użytkownik połączy konto. W odpowiedzi podaj ładunek JSON z informacjami o urządzeniach użytkownika i ich możliwościach. - Intencja
EXECUTE/QUERY
, która występuje, gdy Asystent chce sterować urządzeniem w imieniu użytkownika. Otrzymasz odpowiedź z ładunkiem JSON zawierającym stan wykonania każdego żądanego urządzenia.
W tej sekcji zaktualizujesz funkcje, które wcześniej zostały wdrożone w celu obsługi tych intencji.
Zaktualizuj odpowiedź SYNC
- Przejdź do pliku
functions/index.js
. Zawiera kod służący do odpowiadania na prośby Asystenta. - Edytuj intencję
SYNC
, aby zwrócić metadane i możliwości urządzenia:
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
},
}],
},
};
});
Obsługa intencji EXECUTE
Intencja EXECUTE
obsługuje polecenia aktualizowania stanu urządzenia. Odpowiedź zwraca stan każdego polecenia, na przykład SUCCESS
, ERROR
lub PENDING
, a także nowy stan urządzenia.
- Aby obsłużyć intencję
EXECUTE
, zmień intencjęEXECUTE
w celu zwrócenia punktu końcowegosignaling
projektu Firebase w plikufunctions/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],
},
};
Obsługa udostępniania zasobów z innych domen (CORS)
- Aby obsługiwać CORS ze względu na użycie metody
POST
do wysyłania SDP, dodaj URL Hostingu Firebase do tablicyallowlist
w plikufunctions/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.
Więcej informacji na temat CORS znajdziesz w artykule CORS.
Zakończenie transmisji
- Aby obsługiwać zamykanie strumienia WebRTC, dodaj do pliku
public/webrtc_generator.js
adres URL funkcji „sygnału” Firebase:
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();
Wdróż w Firebase
- Aby wdrożyć Firebase w Firebase, wdróż zaktualizowaną realizację w chmurze za pomocą interfejsu wiersza poleceń Firebase:
$ firebase deploy
To polecenie wdraża aplikację internetową i kilka funkcji Cloud Functions dla Firebase:
... ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/<project-id>/overview Hosting URL: https://<project-id>.web.app
Włącz łączenie kont
Aby włączyć wdrożenie konta po wdrożeniu projektu, wykonaj te czynności:
- W konsoli Actions wybierz Programowanie > Łączenie kont.
- W sekcji Informacje o kliencie OAuth wpisz te informacje w odpowiednich polach tekstowych:
Client-ID |
|
Tajny klucz klienta |
|
URL autoryzacji |
|
Adres URL tokena |
|
- Kliknij Zapisz > Test.
5. Testowanie wirtualnej kamery WebRTC
- Otwórz URL Hostingu wyświetlany podczas wdrażania projektu Firebase. Zobaczysz ten interfejs, który jest aplikacją kliencką Aparatu:
- W panelu Lokalna rozdzielczość wideo wybierz odpowiedni film.
- Przyznaj aplikacji klienckiej CameraStream dostęp do kamery internetowej i mikrofonu. Kanał wideo z kamery internetowej wyświetli się klientowi.
Połącz z działaniem inteligentnego domu CameraStream
- W aplikacji Google Home kliknij Dodaj > Współpracuje z Google.
- Wyszukaj utworzone działanie, a potem je wybierz.
- Zanotuj unikalny pięcioznakowy kod alfanumeryczny, ponieważ będzie potrzebny później.
- Kliknij Przenieś. Kamera WebRTC zostanie dodana do struktury w aplikacji Google Home.
Rozpoczynanie strumienia WebRTC
- Na stronie internetowej aplikacji klienckiej CameraStream wpisz kod alfanumeryczny z ostatniej sekcji w polu tekstowym Wartość tokena połączenia konta i kliknij Prześlij.
- Aby rozpocząć sesję WebRTC na inteligentnym ekranie Google, wykonaj jedną z tych czynności:
- Powiedz „OK Google, odtwarzam kamerę WebRTC”.
- Na inteligentnym ekranie Google kliknij Sterowanie domem > Aparat > Aparat WebRTC.
W aplikacji klienckiej inteligentnego kamery Google Home widzisz, że karta SPD i odpowiedź SDP Oferta została wygenerowana i wymieniona. Obraz z kamery internetowej jest przesyłany strumieniowo na Twoje inteligentne urządzenie Google z WebRTC.
6. Gratulacje
Gratulacje! Nauczyłeś się, jak przesyłać obraz z kamery internetowej na urządzenie wyświetlające Google Nest za pomocą protokołu WebRTC.