Triển khai CameraStream bằng WebRTC

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

Đặc điểm CameraStream thuộc về những thiết bị có khả năng truyền 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ễ khởi động và phát trực tuyến từ thiết bị camera sang thiết bị màn hình Google Nest.

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

• Xem lại bài viết Hướng dẫn chuyển đổi từ đám mây sang đám mây.

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

• Cách triển khai dịch vụ đám mây cho nhà thông minh.
• Cách kết nối dịch vụ của bạn với Trợ lý Google.
• Cách phát 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.
• Một 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 bên ngoài hoặc tích hợp sẵn 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 Giao diện dòng lệnh (CLI) của Firebase

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

Để cài đặt Firebase CLI, hãy làm theo các bước sau:

1. Trong dòng lệnh, hãy tải xuống và cài đặt Giao diện dòng lệnh (CLI) của Firebase:

$ npm install -g firebase-tools

2. Xác minh rằng CLI được cài đặt đúng cách:

$ firebase --version

3. Uỷ quyền Firebase CLI bằng Tài khoản Google của bạn:

$ firebase login

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

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 Create project (Tạo dự án).

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

4. Nhấp vào Phát triển > Gọi điện.
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 vào lúc khác khi có thiết bị cần thiết lập. Đối với lớp học lập trình này, chúng tôi đã 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 Thao tác.
7. Trong hộp văn bản URL thực hiện nhiệm vụ, hãy nhập một URL phần giữ chỗ, chẳng hạn như https://example.com.

Chạy ứng dụng CameraStream

Mã nguồn dành cho lớp học lập trình này bao gồm ứng dụng WebRTC giúp 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 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 có chứa các thư mục sau:

• Thư mục camerastream-start chứa mã khởi đầu mà bạn dùng để xây dựng.
• Thư mục camerastream-done chứa mã giải pháp cho lớp học lập trình đã hoàn tất.

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

• Thư mục con public chứa 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 dịch vụ đám mây được triển khai đầy đủ giúp quản lý máy ảnh 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 có chứa các nhận xét TODO cho biết nơi bạn cần thêm hoặc thay đổi mã, chẳng hạn như ví dụ sau:

// TODO: Implement full SYNC response.

Kết nối với Firebase

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

$ 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 tất cả 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, 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 và Hosting (Hàm). 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 để thiết lập luồng WebRTC. SDP là giao thức dựa trên văn bản mô tả đặc điểm của phiên đa phương tiện. Mã này được dùng trong WebRTC để thương lượng các tham 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 làm máy chủ lưu trữ nhằm trao đổi tin nhắn SDP giữa webcam của bạn và ứng dụng CameraStream 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 rồi 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 đến cơ sở dữ liệu đó từ ứng dụng 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 của bạn để 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 của mình, hãy nhấp vào Thêm ứng dụng để hiển thị các lựa chọn nền tảng.
6. Nhập biệt hiệu cho ứng dụng, chẳng hạn như My web app, sau đó nhấp vào Đăng ký ứng dụng.
7. Trong mục Thêm Firebase SDK, hãy chọn Sử dụng thẻ <script>.
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 đến bảng điều khiển để hoàn tất quá trình này. Bạn sẽ thấy ứng dụng web mới tạo trên trang Cài đặt dự án.

4. Tạo camera WebRTC

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

• Ý định SYNC xảy ra khi Trợ lý muốn biết người dùng đã kết nối với những thiết bị nào. Thông tin này đượ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 trọng tải JSON về thiết bị của người dùng và khả năng của họ.
• Ý định EXECUTE/QUERY xảy ra khi Trợ lý muốn thay người dùng điều khiển một thiết bị. Bạn nên phản hồi bằng một 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 cập nhật các hàm mà mình đã triển khai trước đây để xử lý các ý định này.

Cập nhật câu trả lời SYNC

1. Chuyển đến tệp functions/index.js. Tệp 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à 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ý hoạt động 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 URL chức năng "tín hiệu" của Firebase 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ố Chức năng đám mây 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, hãy nhập thông tin sau đây vào các hộp văn bản tương ứng:

3. Nhấp vào Lưu > Kiểm tra.

5. Kiểm thử 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 Local Video Definition (Độ 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 CameraStream để truy cập vào webcam và micrô của bạn. Một nguồn cấp dữ liệu video từ webcam của bạn sẽ xuất hiện trên ứng dụng.

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

1. Trong ứng dụng Google Home, hãy nhấn vào Add > Works with Google (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 5 ký tự bao gồm chữ và số vì bạn sẽ cần đến mã này sau này.

4. Nhấn vào Đưa tôi quay 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 dành cho ứng dụng CameraStream, hãy nhập mã bao gồm chữ và số của phần cuối cùng vào 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ị màn hình thông minh của Google, hãy làm theo một trong những cách sau:

• Nói "Ok Google, phát trực tuyến Camera 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à > Camera > Camera WebRTC.

Trên ứng dụng CameraStream dành cho nhà thông minh của Google, bạn sẽ thấy rằng Gói dịch vụ SPD và Trả lời SDP đã được tạo và trao đổi thành công. Hình ảnh từ webcam của bạn sẽ được truyền trực tuyến đến thiết bị màn hình thông minh của Google bằng WebRTC.

6. Xin chúc mừng

Xin chúc mừng! Bạn đã tìm hiểu cách phát trực tiếp 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ẻ Hành động trong nhà thông minh