Triển khai CameraStream bằng WebRTC

1. Trước khi bắt đầu

Đặc điểm CameraStream thuộc về các thiết bị có khả năng phát trực tuyến nguồn cấp dữ liệu video đến màn hình thông minh, thiết bị Chromecast và điện thoại thông minh. Giao thức WebRTC hiện được hỗ trợ trong trait CameraStream. Điều này có nghĩa là bạn có thể giảm đáng kể độ trễ khi khởi động và phát trực tuyến từ thiết bị camera đến thiết bị hiển thị Google Nest.

Điều kiện tiên quyết

• Xem bài viết Giới thiệu về giải pháp đám mây với đám mây.

Kiến thức bạn sẽ học được

• Cách triển khai dịch vụ đám mây nhà thông minh.
• Cách kết nối dịch vụ của bạn với Trợ lý Google.
• Cách truyền trực tuyến đến thiết bị màn hình Google Nest bằng giao thức WebRTC.

Bạn cần có

• Một trình duyệt web, chẳng hạn như Google Chrome.
• Thiết bị iOS hoặc Android có ứng dụng Google Home.
• Node.js phiên bản 10.16 trở lên.
• Gói linh hoạt (trả tiền theo mức dùng) cho Firebase.
• Một thiết bị webcam tích hợp hoặc bên ngoài có thể hỗ trợ độ phân giải HD đầy đủ.
• Một thiết bị màn hình Google Nest.

2. Bắt đầu

Cài đặt Firebase CLI

Firebase CLI cho phép bạn phân phát cục bộ các ứng dụng web của mình và triển khai các ứng dụng đó đến tính năng Lưu trữ Firebase.

Để cài đặt Giao diện dòng lệnh (CLI) của Firebase, hãy làm theo các bước sau:

1. Trong thiết bị đầu cuối, hãy tải xuống và cài đặt Firebase CLI:

$ npm install -g firebase-tools

2. Xác minh rằng CLI đã được cài đặt chính xác:

$ firebase --version

3. Uỷ quyền Giao diện dòng lệnh (CLI) trong Firebase bằng Tài khoản Google của bạn:

$ firebase login

Tạo và định cấu hình dự án Actions

1. Chuyển đến Bảng điều khiển Actions rồi nhấp vào Dự án mới.
2. Trong hộp văn bản Project name (Tên dự án), hãy nhập tên cho dự án rồi nhấp vào Tạo dự án.

3. Trên trang Bạn muốn tạo loại hành động nào?, hãy nhấp vào Nhà thông minh > Bắt đầu tạo. Dự án sẽ mở trong bảng điều khiển Actions (Thao tác).

4. Nhấp vào Phát triển > Lời gọi.
5. Trong hộp văn bản Tên hiển thị, hãy nhập tên cho Hành động rồi nhấp vào Lưu. Tên này sẽ xuất hiện trong ứng dụng Google Home sau này khi có thiết bị để thiết lập. Đối với lớp học lập trình này, chúng ta đã nhập WebRTC Codelab làm tên hiển thị, nhưng bạn có thể sử dụng một tên khác.

6. Nhấp vào Hành động.
7. Trong hộp văn bản URL thực hiện, hãy nhập một URL giữ chỗ, chẳng hạn như https://example.com.

Chạy ứng dụng CameraStream

Mã nguồn cho lớp học lập trình này bao gồm một ứng dụng WebRTC có chức năng thiết lập, thương lượng và quản lý phiên WebRTC giữa webcam và thiết bị màn hình nhà thông minh của Google.

Để chạy ứng dụng khách CameraStream WebRTC, hãy làm theo một trong những cách sau:

• Nhấp vào nút sau để tải mã nguồn xuống máy phát triển của bạn:

file_downloadTải mã nguồn xuống

• Sao chép kho lưu trữ này trên GitHub:

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

Mã này chứa các thư mục sau:

• Thư mục camerastream-start chứa mã khởi đầu mà bạn sử dụng để tạo bản dựng.
• Thư mục camerastream-done chứa đoạn mã giải pháp cho lớp học lập trình đã kết thúc.

Thư mục camerastream-start chứa các thư mục con sau:

• Thư mục con public chứa một giao diện người dùng trên giao diện người dùng để dễ dàng kiểm soát và theo dõi trạng thái của thiết bị máy ảnh.
• Thư mục con functions chứa một dịch vụ đám mây được triển khai đầy đủ, giúp quản lý camera bằng các Chức năng đám mây cho Firebase và Cơ sở dữ liệu theo thời gian thực.

Mã khởi đầu chứa TODO nhận xét cho biết vị trí bạn cần thêm hoặc thay đổi mã, chẳng hạn như trong ví dụ sau:

// TODO: Implement full SYNC response.

Kết nối với Firebase

1. Chuyển đến thư mục camerastream-start, sau đó thiết lập Giao diện dòng lệnh (CLI) của Firebase bằng dự án Actions (Hành động):

$ cd camerastream-start
$ firebase use PROJECT_ID

2. Trong thư mục camerastream-start, hãy chuyển đến thư mục functions rồi cài đặt mọi phần phụ thuộc cần thiết:

$ cd functions
$ npm install

3. Nếu bạn thấy thông báo sau đây, hãy bỏ qua thông báo đó. Cảnh báo này là do các phần phụ thuộc cũ hơn. Để biết thêm thông tin, hãy xem vấn đề này trên GitHub.

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

4. Khởi chạy dự án Firebase:

$ firebase init

5. Chọn Function (Hàm) và Hosting (Lưu trữ). Thao tác này sẽ khởi chạy các API và tính năng cần thiết cho dự án của bạn.

? 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. Định cấu hình Cloud Functions bằng các tệp mặc định và đảm bảo rằng bạn không ghi đè các tệp index.js và package.json hiện có trong mẫu dự án:

? 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. Định cấu hình dịch vụ Lưu trữ bằng thư mục public trong mã dự án và sử dụng tệp index.html hiện có:

? 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. Thông báo Giao thức mô tả phiên trao đổi (SDP)

Trao đổi thông báo SDP là một bước quan trọng trong quá trình thiết lập luồng WebRTC. SDP là một giao thức dựa trên văn bản mô tả các đặc điểm của một phiên đa phương tiện. Dữ liệu này được sử dụng trong WebRTC để thương lượng các thông số của kết nối ngang hàng, chẳng hạn như bộ mã hoá và giải mã được sử dụng, địa chỉ IP của người tham gia và các cổng dùng để truyền tải nội dung nghe nhìn.

Để dùng Cơ sở dữ liệu theo thời gian thực với vai trò là máy chủ lưu trữ trao đổi các thông báo SDP giữa webcam của bạn và ứng dụng khách CameraStream trong nhà thông minh, hãy làm theo các bước sau:

1. Trong bảng điều khiển của Firebase, hãy nhấp vào Tạo > Cơ sở dữ liệu theo thời gian thực > Tạo cơ sở dữ liệu.

2. Trong trình đơn thả xuống Vị trí của cơ sở dữ liệu theo thời gian thực, hãy chọn một vị trí thích hợp để lưu trữ cơ sở dữ liệu của bạn.

3. Chọn Bắt đầu ở chế độ thử nghiệm, sau đó nhấp vào Bật. Khi bật Cơ sở dữ liệu theo thời gian thực, bạn cần có khả năng tham chiếu cơ sở dữ liệu từ ứng dụng khách CameraStream.

4. Trong bảng điều khiển của Firebase, hãy chọn Cài đặt dự án > Cài đặt dự án > Thêm Firebase vào Ứng dụng web để bắt đầu quy trình thiết lập.
5. Nếu bạn đã thêm một ứng dụng vào dự án Firebase, hãy nhấp vào Thêm ứng dụng để hiển thị các lựa chọn về nền tảng.
6. Nhập biệt hiệu cho ứng dụng (chẳng hạn như My web app) rồi nhấp vào Đăng ký ứng dụng.
7. Trong mục Add Firebase SDK (Thêm SDK Firebase), hãy chọn Use <script> thẻ.
8. Sao chép các giá trị từ đối tượng firebasebaseConfig rồi dán vào tệp camaerastream-start/public/webrtc_generator.js.

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

9. Nhấp vào Tiếp tục chuyển đến bảng điều khiển để hoàn tất quy trình này. Bạn sẽ thấy ứng dụng web mới tạo trên trang Project settings (Cài đặt dự án).

4. Tạo máy ảnh WebRTC

Hiện bạn đã định cấu hình Hành động của mình, nên dịch vụ đám mây của bạn cần xử lý các ý định sau:

• Một ý định SYNC xảy ra khi Trợ lý muốn biết người dùng đã kết nối những thiết bị nào. Thông tin này sẽ được gửi đến dịch vụ của bạn khi người dùng liên kết một tài khoản. Bạn nên phản hồi bằng tải trọng JSON trên thiết bị của người dùng và khả năng của thiết bị.
• Một ý định EXECUTE/QUERY xảy ra khi Trợ lý muốn thay mặt người dùng điều khiển một thiết bị. Bạn nên phản hồi bằng tải trọng JSON kèm theo trạng thái thực thi của từng thiết bị được yêu cầu.

Trong phần này, bạn sẽ cập nhật các hàm mà mình đã triển khai trước đây để xử lý những ý định này.

Cập nhật phản hồi SYNC

1. Chuyển đến tệp functions/index.js. Thư viện này chứa mã để phản hồi các yêu cầu của Trợ lý.
2. Chỉnh sửa ý định SYNC để trả về siêu dữ liệu và các chức năng của thiết bị:

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

Xử lý ý định EXECUTE

Ý định EXECUTE xử lý các lệnh cập nhật trạng thái thiết bị. Phản hồi trả về trạng thái của từng lệnh (ví dụ: SUCCESS, ERROR hoặc PENDING) và trạng thái mới của thiết bị.

• Để xử lý ý định EXECUTE, hãy chỉnh sửa ý định EXECUTE để trả về điểm cuối signaling của dự án Firebase trong tệp 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],
    },
  };

Xử lý việc chia sẻ tài nguyên trên nhiều nguồn gốc (CORS)

• Để xử lý CORS do sử dụng phương thức POST để gửi SDP, hãy thêm URL lưu trữ Firebase vào mảng allowlist trong tệp 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.

Để biết thêm thông tin về CORS, hãy xem bài viết Chia sẻ tài nguyên trên nhiều nguồn gốc (CORS).

Xử lý việc chấm dứt luồng

• Để xử lý việc chấm dứt luồng WebRTC, hãy thêm "tín hiệu" Firebase URL hàm vào tệp 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();

Triển khai cho Firebase

• Để triển khai cho Firebase, hãy triển khai phương thức thực hiện trên đám mây đã cập nhật bằng Giao diện dòng lệnh (CLI) của Firebase:

$ firebase deploy

Lệnh này triển khai một ứng dụng web và một số Cloud Functions cho Firebase:

...

✔ Deploy complete!

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

Bật tính năng liên kết tài khoản

Để bật tính năng liên kết tài khoản sau khi triển khai dự án, hãy làm theo các bước sau:

1. Trong Bảng điều khiển Actions, hãy chọn Phát triển > Liên kết tài khoản.
2. Trong phần Thông tin ứng dụng OAuth, nhập thông tin sau vào các hộp văn bản tương ứng:

3. Nhấp vào Lưu > Thử nghiệm.

5. Kiểm tra máy ảnh WebRTC ảo

1. Chuyển đến URL lưu trữ mà bạn đã thấy khi triển khai dự án Firebase. Bạn sẽ thấy giao diện sau đây, đó là ứng dụng CameraStream:

2. Trong bảng điều khiển Local Video1 (Độ phân giải video cục bộ), hãy chọn video mong muốn.
3. Cấp quyền cho ứng dụng máy khách CameraStream để truy cập webcam và micrô của bạn. Nguồn cấp dữ liệu video từ webcam của bạn sẽ xuất hiện trên máy khách.

Liên kết với nhà thông minh CameraStream Hành động

1. Trong ứng dụng Google Home, hãy nhấn vào Thêm > Hoạt động với Google.

2. Tìm Hành động mà bạn đã tạo rồi chọn Hành động đó.

3. Hãy ghi lại mã duy nhất gồm năm ký tự gồm chữ và số vì sau này bạn sẽ cần đến.

4. Nhấn vào Đưa tôi trở lại. Camera WebRTC được thêm vào cấu trúc của bạn trong ứng dụng Google Home.

Bắt đầu luồng WebRTC

1. Trên trang web cho ứng dụng CameraStream, hãy nhập mã bao gồm chữ và số từ phần cuối cùng trong hộp văn bản Giá trị mã thông báo liên kết tài khoản, sau đó nhấp vào Gửi.

2. Để bắt đầu phiên WebRTC từ thiết bị hiển thị thông minh của Google, hãy thực hiện một trong những thao tác sau:

• Nói "Ok Google, phát trực tuyến Máy ảnh WebRTC."
• Trên thiết bị màn hình thông minh của Google, hãy nhấn vào Điều khiển nhà > Máy ảnh > Máy ảnh WebRTC.

Trong ứng dụng CameraStream của nhà thông minh của Google, bạn có thể thấy rằng SPD và SDP ưu đãi đã được tạo và trao đổi thành công. Hình ảnh từ webcam của bạn được truyền trực tuyến đến thiết bị hiển thị thông minh của Google qua WebRTC.

6. Xin chúc mừng

Xin chúc mừng! Bạn đã tìm hiểu cách truyền trực tuyến từ webcam đến thiết bị màn hình Google Nest bằng giao thức WebRTC.

Tìm hiểu thêm

• Đặc điểm của thiết bị nhà thông minh
• Hành động trên Google: Mẫu nhà thông minh bằng Node.js
• Thử nghiệm và chia sẻ các Hành động trong nhà thông minh