Mengimplementasikan CameraStream dengan WebRTC

1. Sebelum memulai

Atribut CameraStream dimiliki oleh perangkat yang memiliki kemampuan untuk menstreaming feed video ke layar smart, perangkat Chromecast, dan smartphone. Protokol WebRTC kini didukung dalam karakteristik CameraStream, yang berarti Anda dapat sangat mengurangi latensi startup dan streaming dari perangkat kamera ke perangkat layar Google Nest.

Prasyarat

• Tinjau Panduan Cloud-to-cloud.

Yang akan Anda pelajari

• Cara men-deploy layanan cloud smart home.
• Cara menghubungkan layanan ke Asisten Google.
• Cara melakukan streaming ke perangkat layar Google Nest dengan protokol WebRTC.

Yang Anda butuhkan

• Browser web, seperti Google Chrome.
• Perangkat iOS atau Android dengan aplikasi Google Home.
• Node.js versi 10.16 atau yang lebih baru.
• Paket Blaze (bayar sesuai penggunaan) untuk Firebase.
• Perangkat webcam bawaan atau eksternal yang dapat mendukung resolusi full HD.
• Perangkat layar Google Nest.

2. Mulai

Menginstal Firebase CLI

Firebase CLI memungkinkan Anda menyalurkan aplikasi web secara lokal dan men-deploynya ke Firebase Hosting.

Untuk menginstal Firebase CLI, ikuti langkah-langkah berikut:

1. Di terminal, download dan instal Firebase CLI:

$ npm install -g firebase-tools

2. Pastikan CLI diinstal dengan benar:

$ firebase --version

3. Beri otorisasi Firebase CLI dengan Akun Google Anda:

$ firebase login

Membuat project

1. Buka Konsol Developer Google Home.
2. Klik Create Project, masukkan nama untuk project, lalu klik Create Project.

Menjalankan aplikasi klien CameraStream

Kode sumber untuk codelab ini mencakup klien WebRTC yang membuat, menegosiasikan, dan mengelola sesi WebRTC antara webcam dan perangkat layar smart home Google.

Untuk menjalankan aplikasi klien WebRTC CameraStream, lakukan salah satu hal berikut:

• Klik tombol berikut untuk mendownload kode sumber ke mesin pengembangan Anda:

file_downloadDownload kode sumber

• Clone repositori GitHub ini:

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

Kode ini berisi direktori berikut:

• Direktori camerastream-start, yang berisi kode awal yang Anda build.
• Direktori camerastream-done, yang berisi kode solusi untuk codelab yang telah selesai.

Direktori camerastream-start berisi subdirektori berikut:

• Subdirektori public, yang berisi UI frontend untuk mengontrol dan memantau status perangkat kamera dengan mudah.
• Subdirektori functions, yang berisi layanan cloud yang diterapkan sepenuhnya untuk mengelola kamera dengan Cloud Functions for Firebase dan Realtime Database.

Kode awal berisi komentar TODO yang menunjukkan tempat Anda perlu menambahkan atau mengubah kode, seperti contoh berikut:

// TODO: Implement full SYNC response.

Membuat project Firebase

1. Buka Firebase.
2. Klik Buat project dan masukkan nama project Anda.
3. Centang kotak perjanjian, lalu klik Lanjutkan. Jika tidak ada kotak centang persetujuan, Anda dapat melewati langkah ini.
   
4. Setelah project Firebase dibuat, temukan project ID. Buka Ringkasan Project, lalu klik ikon setelan > Setelan Project.
   
5. Project Anda tercantum di tab General.
   

Menghubungkan ke Firebase

1. Buka direktori camerastream-start, lalu siapkan Firebase CLI dengan project Actions Anda:

$ cd camerastream-start
$ firebase use <firebase-project-id>

2. Di direktori camerastream-start, buka folder functions, lalu instal semua dependensi yang diperlukan:

$ cd functions
$ npm install

3. Jika Anda melihat pesan berikut, abaikan. Peringatan ini disebabkan oleh dependensi yang lebih lama. Untuk mengetahui informasi selengkapnya, lihat masalah GitHub ini.

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

4. Lakukan inisialisasi project Firebase:

$ firebase init

5. Pilih Functions dan Hosting. Tindakan ini akan menginisialisasi API dan fitur yang diperlukan untuk project Anda.

? 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. Konfigurasikan Cloud Functions dengan file default, dan pastikan Anda tidak menimpa file index.js dan package.json yang ada dalam contoh project:

? 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. Konfigurasikan Hosting dengan direktori public dalam kode project dan gunakan file index.html yang ada:

? 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. Mengirim Pesan Session Description Protocol (SDP)

Pertukaran pesan SDP adalah langkah penting dalam pembuatan streaming WebRTC. SDP adalah protokol berbasis teks yang menjelaskan karakteristik sesi multimedia. Protokol ini digunakan di WebRTC untuk menegosiasikan parameter koneksi peer-to-peer, seperti codec yang digunakan, alamat IP peserta, dan port yang digunakan untuk transpor media.

Untuk menggunakan Realtime Database sebagai host untuk bertukar pesan SDP antara webcam dan aplikasi klien CameraStream smart home, ikuti langkah-langkah berikut:

1. Di Firebase console, klik Build > Realtime Database > Create database.

2. Di menu drop-down Realtime Database location, pilih lokasi yang sesuai untuk menghosting database Anda.

3. Pilih Mulai dalam mode uji, lalu klik Aktifkan. Dengan mengaktifkan Realtime Database, Anda memerlukan kemampuan untuk mereferensikannya dari aplikasi klien CameraStream.

4. Di Firebase console, pilih Project settings > Project settings > Add Firebase to your Web App untuk meluncurkan alur kerja penyiapan.
5. Jika Anda sudah menambahkan aplikasi ke project Firebase, klik Tambahkan aplikasi untuk menampilkan opsi platform.
6. Masukkan nama panggilan untuk aplikasi, seperti My web app, lalu klik Daftarkan aplikasi.
7. Di bagian Tambahkan Firebase SDK, pilih Gunakan tag <script>.
8. Salin nilai dari objek firebasebaseConfig, lalu tempelkan ke dalam file camaerastream-start/public/webrtc_generator.js.

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

9. Klik Lanjutkan ke konsol untuk menyelesaikan proses. Anda akan melihat aplikasi web yang baru dibuat di halaman Setelan project.

4. Membuat kamera WebRTC

Setelah mengonfigurasi Action, layanan cloud Anda perlu menangani intent berikut:

• Intent SYNC yang terjadi saat Asisten ingin mengetahui perangkat apa saja yang telah dihubungkan oleh pengguna. Ini akan dikirim ke layanan saat pengguna menautkan akun. Anda harus merespons dengan payload JSON dari perangkat pengguna dan kemampuannya.
• Intent EXECUTE/QUERY yang terjadi saat Asisten ingin mengontrol perangkat atas nama pengguna. Anda harus menanggapi dengan payload JSON dengan status eksekusi setiap perangkat yang diminta.

Di bagian ini, Anda akan memperbarui fungsi yang sebelumnya di-deploy untuk menangani intent ini.

Memperbarui respons SYNC

1. Buka file functions/index.js. File ini berisi kode untuk merespons permintaan dari Asisten.
2. Edit intent SYNC untuk menampilkan metadata dan kemampuan perangkat:

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

3. USER_ID tidak ditentukan dalam kode. Tambahkan kode berikut di bagian const _ = require('underscore');:

// Hardcoded user ID
const USER_ID = '123';

Menangani intent EXECUTE

Intent EXECUTE menangani perintah untuk mengupdate status perangkat. Respons akan menampilkan status setiap perintah—misalnya, SUCCESS, ERROR, atau PENDING—dan status perangkat baru.

Untuk menangani intent EXECUTE, edit intent EXECUTE untuk menampilkan endpoint signaling project Firebase dalam 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],
    },
  };
});

Menangani Cross-origin resource sharing (CORS)

Untuk menangani CORS karena penggunaan metode POST untuk mengirim SDP, tambahkan URL Firebase Hosting ke array allowlist dalam file functions/index.js:

index.js

'use strict';
.....

var allowList = ['https://www.gstatic.com','https://<firebase-project-id>.web.app']; //TODO Add Firebase hosting URL.

Untuk mengetahui informasi selengkapnya tentang CORS, lihat Cross-Origin Resource Sharing (CORS).

Menangani Penghentian Streaming

Untuk menangani penghentian streaming WebRTC, tambahkan URL fungsi 'sinyal' Firebase ke 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();

Men-deploy ke Firebase

Untuk men-deploy ke Firebase, deploy fulfillment cloud yang telah diupdate dengan Firebase CLI:

$ firebase deploy

Perintah ini men-deploy aplikasi web dan beberapa Cloud Functions for Firebase:

...

✔ Deploy complete!

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

Mengonfigurasi project Developer Console

1. Buka Konsol Play.
2. Klik Create Project, masukkan nama untuk project, lalu klik Create Project.

Pilih Integrasi Cloud-ke-cloud

Di Beranda Project di Konsol Developer, pilih Tambahkan integrasi cloud-to-cloud di bagian Cloud-to-cloud.

1. Masukkan nama integrasi, lalu pilih Kamera di bagian Jenis perangkat. Nama ini akan muncul di aplikasi Google Home nanti saat ada perangkat yang akan disiapkan. Untuk codelab ini, kita memasukkan WebRTC Codelab sebagai nama tampilan, tetapi Anda dapat menggunakan nama yang berbeda.

2. Di bagian Branding aplikasi, upload file png untuk ikon aplikasi, berukuran 144x144 piksel, dan beri nama .png.

Mengaktifkan penautan akun

Untuk mengaktifkan penautan akun setelah project di-deploy, ikuti langkah-langkah berikut:

1. Buka Konsol Developer dan buka project.
2. Di bagian Cloud-to-Cloud, klik Develop > Edit di samping integrasi.
3. Di halaman Penyiapan & konfigurasi, temukan bagian Penautan Akun dan masukkan informasi berikut di kotak teks yang sesuai:

4. Klik Save > Test.

5. Menguji kamera WebRTC virtual

1. Buka URL Hosting yang Anda lihat saat men-deploy project Firebase. Anda akan melihat antarmuka berikut, yang merupakan aplikasi klien CameraStream:

2. Di panel Resolusi Video Lokal, pilih video yang diinginkan.
3. Berikan izin ke aplikasi klien CameraStream untuk mengakses webcam dan mikrofon Anda. Feed video dari webcam Anda akan muncul di klien.

Menautkan ke Action CameraStream smart home

1. Di aplikasi Google Home, ketuk Tambahkan > Kompatibel dengan Google.

2. Telusuri Action yang Anda buat, lalu pilih Action tersebut.

3. Catat kode alfanumerik unik yang terdiri dari lima karakter karena Anda akan memerlukannya nanti.

4. Ketuk Kembali. Kamera WebRTC ditambahkan ke struktur Anda di aplikasi Google Home.

Memulai streaming WebRTC

1. Di halaman web untuk aplikasi klien CameraStream, masukkan kode alfanumerik dari bagian terakhir di kotak teks Nilai token penautan akun, lalu klik Kirim.

2. Untuk memulai sesi WebRTC dari perangkat layar smart Google, lakukan salah satu tindakan berikut:

• Ucapkan "Ok Google, streaming Kamera WebRTC".
• Di perangkat smart display Google, ketuk Kontrol rumah > Kamera > Kamera WebRTC.

Dari aplikasi klien CameraStream smart home Google, Anda melihat bahwa SPD Penawaran dan SDP Jawaban berhasil dibuat dan dipertukarkan. Gambar dari webcam Anda di-streaming ke perangkat layar smart Google dengan WebRTC.

6. Selamat

Selamat! Anda telah mempelajari cara melakukan streaming dari webcam ke perangkat layar Google Nest dengan protokol WebRTC.

Pelajari lebih lanjut

• Atribut perangkat smart home
• Actions on Google: Contoh smart home menggunakan Node.js
• Menguji dan membagikan Action smart home