CameraStream را با WebRTC پیاده سازی کنید

1. قبل از شروع

ویژگی CameraStream متعلق به دستگاه‌هایی است که می‌توانند فیدهای ویدیویی را به نمایشگرهای هوشمند، دستگاه‌های Chromecast و گوشی‌های هوشمند پخش کنند. پروتکل WebRTC اکنون در ویژگی CameraStream پشتیبانی می‌شود، به این معنی که می‌توانید تأخیر راه‌اندازی و پخش جریانی را از یک دستگاه دوربین به یک دستگاه نمایشگر Google Nest تا حد زیادی کاهش دهید.

دستگاه‌های دوربین به یک دستگاه نمایشگر Google Nest جریان می‌یابند

پیش نیازها

چیزی که یاد خواهید گرفت

  • نحوه استقرار یک سرویس ابری خانه هوشمند
  • چگونه سرویس خود را به Google Assistant متصل کنیم.
  • نحوه پخش جریانی به دستگاه نمایشگر Google Nest با پروتکل WebRTC.

آنچه شما نیاز دارید

  • یک مرورگر وب، مانند Google Chrome .
  • یک دستگاه iOS یا Android با برنامه Google Home .
  • Node.js نسخه 10.16 یا بالاتر.
  • برنامه Blaze (پرداخت در زمان خرید) برای Firebase .
  • یک دستگاه وب کم داخلی یا خارجی که می تواند وضوح فول اچ دی را پشتیبانی کند.
  • یک دستگاه نمایشگر Google Nest.

2. شروع کنید

Firebase CLI را نصب کنید

Firebase CLI به شما امکان می دهد برنامه های وب خود را به صورت محلی ارائه دهید و آنها را در میزبانی Firebase مستقر کنید.

برای نصب Firebase CLI، مراحل زیر را دنبال کنید:

  1. در ترمینال خود، Firebase CLI را دانلود و نصب کنید:
$ npm install -g firebase-tools
  1. بررسی کنید که CLI به درستی نصب شده است:
$ firebase --version
  1. Firebase CLI را با حساب Google خود مجاز کنید:
$ firebase login

یک پروژه Actions ایجاد و پیکربندی کنید

  1. به کنسول Actions بروید و سپس روی New project کلیک کنید.
  2. در کادر متنی نام پروژه ، نامی برای پروژه وارد کنید و سپس روی ایجاد پروژه کلیک کنید.

گفتگوی پروژه جدید در کنسول Actions

  1. بر روی چه نوع اکشنی می خواهید بسازید؟ صفحه، روی خانه هوشمند > شروع ساخت کلیک کنید. پروژه در کنسول Actions باز می شود.

تب Overview در کنسول Actions

  1. روی Develop > Invocation کلیک کنید.
  2. در کادر متن نمایش نام ، یک نام برای Action وارد کنید و سپس روی Save کلیک کنید. بعداً وقتی دستگاهی برای راه‌اندازی وجود دارد، این نام در برنامه Google Home ظاهر می‌شود. برای این کد لبه، ما WebRTC Codelab به عنوان نام نمایشی وارد کردیم، اما می توانید از نام دیگری استفاده کنید.

پانل Invocation در کنسول Actions

  1. روی Actions کلیک کنید.
  2. در کادر متنی URL تحقق ، نشانی وب نگهدارنده مکان، مانند https://example.com را وارد کنید.

برنامه مشتری CameraStream را اجرا کنید

کد منبع این کد لبه شامل یک سرویس گیرنده WebRTC است که جلسه WebRTC را بین وب کم و دستگاه نمایش خانه هوشمند Google ایجاد، مذاکره و مدیریت می کند.

برای اجرای برنامه مشتری CameraStream WebRTC، یکی از موارد زیر را انجام دهید:

  • برای دانلود کد منبع در دستگاه توسعه خود، روی دکمه زیر کلیک کنید:

  • این مخزن GitHub را شبیه سازی کنید:
$ git clone https://github.com/google-home/smarthome-camerastream-webrtc.git

کد شامل دایرکتوری های زیر است:

  • دایرکتوری camerastream-start که حاوی کد شروعی است که بر اساس آن می سازید.
  • دایرکتوری camerastream-done که حاوی کد راه حل برای Codelab تمام شده است.

دایرکتوری camerastream-start شامل زیر شاخه های زیر است:

  • زیر شاخه public ، که شامل یک رابط کاربری frontend است تا به راحتی وضعیت دستگاه دوربین شما را کنترل و نظارت کند.
  • دایرکتوری functions ، که شامل یک سرویس ابری کاملاً پیاده‌سازی شده است که دوربین را با توابع ابری برای Firebase و پایگاه داده Realtime مدیریت می‌کند.

کد شروع حاوی نظرات TODO است که نشان می دهد کجا باید کد اضافه یا تغییر دهید، مانند مثال زیر:

// TODO: Implement full SYNC response.

به Firebase متصل شوید

  1. به دایرکتوری camerastream-start بروید و سپس Firebase CLI را با پروژه Actions خود راه اندازی کنید:
$ cd camerastream-start
$ firebase use PROJECT_ID
  1. در دایرکتوری camerastream-start ، به پوشه functions بروید و سپس تمام وابستگی های لازم را نصب کنید:
$ cd functions
$ npm install
  1. اگر پیام زیر را مشاهده کردید، آن را نادیده بگیرید. این هشدار به دلیل وابستگی های قدیمی تر است. برای اطلاعات بیشتر، این مشکل GitHub را ببینید.
found 5 high severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
  1. راه اندازی یک پروژه Firebase:
$ firebase init
  1. توابع و میزبانی را انتخاب کنید. این API ها و ویژگی های لازم برای پروژه شما را مقداردهی اولیه می کند.
? 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. توابع Cloud را با فایل‌های پیش‌فرض پیکربندی کنید و اطمینان حاصل کنید که فایل‌های index.js و package.json موجود را در نمونه پروژه بازنویسی نکنید:
? 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. هاست را با دایرکتوری public در کد پروژه پیکربندی کنید و از فایل index.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. تبادل پیام های پروتکل شرح جلسه (SDP).

تبادل پیام های SDP گام مهمی در ایجاد یک جریان WebRTC است. SDP یک پروتکل مبتنی بر متن است که ویژگی های یک جلسه چند رسانه ای را توصیف می کند. در WebRTC برای مذاکره با پارامترهای یک اتصال همتا به همتا، مانند کدک‌های مورد استفاده، آدرس‌های IP شرکت‌کنندگان و پورت‌های مورد استفاده برای انتقال رسانه استفاده می‌شود.

برای استفاده از پایگاه داده Realtime به عنوان میزبان برای تبادل پیام های SDP بین وب کم خود و برنامه مشتری CameraStream خانه هوشمند، این مراحل را دنبال کنید:

  1. در کنسول Firebase ، روی ساخت > پایگاه داده بیدرنگ > ایجاد پایگاه داده کلیک کنید.

صفحه Realtime Database در کنسول Firebase

  1. در منوی کشویی موقعیت پایگاه داده بیدرنگ ، مکان مناسبی را برای میزبانی پایگاه داده خود انتخاب کنید.

منوی کشویی مکان پایگاه داده بیدرنگ در گفتگوی تنظیم پایگاه داده

  1. Start in test mode را انتخاب کنید و سپس روی Enable کلیک کنید. با فعال بودن پایگاه داده بیدرنگ، به توانایی ارجاع به آن از برنامه مشتری CameraStream نیاز دارید.
  1. در کنسول Firebase، را انتخاب کنید 513f2be95dcd7896.png تنظیمات پروژه > تنظیمات پروژه > e584a9026e2b407f.png Firebase را به برنامه وب خود اضافه کنید تا گردش کار راه اندازی شود.
  2. اگر قبلاً برنامه‌ای را به پروژه Firebase خود اضافه کرده‌اید، روی افزودن برنامه کلیک کنید تا گزینه‌های پلتفرم نمایش داده شود.
  3. یک نام مستعار برای برنامه وارد کنید، مانند My web app ، و سپس روی ثبت برنامه کلیک کنید.
  4. در بخش Add Firebase SDK ، Use <script> tag را انتخاب کنید.
  5. مقادیر را از شی firebasebaseConfig کپی کنید و سپس آنها را در فایل camaerastream-start/public/webrtc_generator.js قرار دهید.
const firebaseConfig = {
  apiKey: "XXXXX",
  authDomain: "XXXXX",
  projectId: "XXXXX",
  storageBucket: "XXXXX",
  messagingSenderId: "XXXXX",
  appId: "XXXXX",
  measurementId: "XXXXX"
};
  1. برای تکمیل فرآیند روی Continue to console کلیک کنید. برنامه وب تازه ایجاد شده را در صفحه تنظیمات پروژه مشاهده می کنید.

4. یک دوربین WebRTC ایجاد کنید

اکنون که Action خود را پیکربندی کردید، سرویس ابری شما باید اهداف زیر را مدیریت کند:

  • یک هدف SYNC که زمانی رخ می‌دهد که دستیار بخواهد بداند کاربر چه دستگاه‌هایی را متصل کرده است. زمانی که کاربر یک حساب کاربری را پیوند می دهد، به سرویس شما ارسال می شود. شما باید با یک بار JSON از دستگاه های کاربر و قابلیت های آنها پاسخ دهید.
  • یک هدف EXECUTE/QUERY که زمانی اتفاق می‌افتد که دستیار بخواهد دستگاهی را از طرف یک کاربر کنترل کند. شما باید با یک بار JSON با وضعیت اجرای هر دستگاه درخواستی پاسخ دهید.

در این بخش، توابعی را که قبلاً برای مدیریت این مقاصد مستقر کرده بودید، به روز می کنید.

پاسخ SYNC را به روز کنید

  1. به فایل functions/index.js بروید. حاوی کد پاسخ به درخواست‌های دستیار است.
  2. ویرایش قصد SYNC برای بازگرداندن فراداده ها و قابلیت های دستگاه:

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

هدف EXECUTE را مدیریت کنید

هدف EXECUTE دستورات را برای به‌روزرسانی وضعیت دستگاه کنترل می‌کند. پاسخ وضعیت هر فرمان - به عنوان مثال، SUCCESS ، ERROR یا PENDING - و وضعیت دستگاه جدید را برمی‌گرداند.

  • برای مدیریت یک هدف EXECUTE ، قصد EXECUTE را ویرایش کنید تا نقطه پایانی signaling پروژه Firebase را در فایل 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],
    },
  };

مدیریت اشتراک‌گذاری منابع متقاطع (CORS)

  • برای مدیریت CORS به دلیل استفاده از روش POST برای ارسال SDP، URL میزبانی Firebase را به آرایه لیست allowlist در فایل 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.

برای اطلاعات بیشتر در مورد CORS، به اشتراک گذاری منابع متقاطع (CORS) مراجعه کنید.

پایان دادن به جریان

  • برای مدیریت خاتمه جریان WebRTC، URL تابع 'signaling' Firebase را به فایل 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();

در Firebase مستقر شوید

  • برای استقرار در Firebase، اجرای ابر به روز شده را با Firebase CLI اجرا کنید:
$ firebase deploy

این دستور یک برنامه وب و چندین تابع Cloud را برای Firebase مستقر می کند:

...

✔ Deploy complete!

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

فعال کردن پیوند حساب

برای فعال کردن پیوند حساب پس از استقرار پروژه، مراحل زیر را دنبال کنید:

  1. در کنسول Actions ، Develop > Account linking را انتخاب کنید.
  2. در بخش اطلاعات مشتری OAuth ، اطلاعات زیر را در کادرهای متنی مربوطه وارد کنید:

شناسه مشتری

ABC123

راز مشتری

DEF456

URL مجوز

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

نشانی اینترنتی رمز

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

صفحه پیوند دادن حساب در کنسول Actions

  1. روی ذخیره > تست کلیک کنید.

5. دوربین مجازی WebRTC را تست کنید

  1. به URL میزبانی که هنگام استقرار پروژه Firebase خود مشاهده کردید، بروید. رابط زیر را مشاهده می کنید که برنامه مشتری CameraStream است:

رابط برنامه مشتری CameraStream

  1. در پانل Local Video Resolution ، فیلم مورد نظر را انتخاب کنید.
  2. به برنامه مشتری CameraStream اجازه دهید تا به وب‌کم و میکروفون شما دسترسی داشته باشد. یک فید ویدیویی از وب کم شما روی کلاینت ظاهر می شود.
  1. در برنامه Google Home، روی Add > Works with Google ضربه بزنید.

صفحه تنظیم دستگاه در برنامه Google Home

  1. اکشنی که ایجاد کردید را جستجو کنید و سپس آن را انتخاب کنید.

اقدام خانه هوشمند در برنامه Google Home

  1. به کد الفبایی پنج کاراکتری منحصربفرد توجه کنید زیرا بعداً به آن نیاز خواهید داشت.

کد منحصر به فرد، پنج رقمی، الفبایی

  1. روی Take me back ضربه بزنید. دوربین WebRTC در برنامه Google Home به ساختار شما اضافه شده است.

یک جریان WebRTC را شروع کنید

  1. در صفحه وب برنامه مشتری CameraStream، کد الفبای عددی آخرین بخش را در کادر متنی مقدار رمز پیوند حساب وارد کنید و سپس روی ارسال کلیک کنید.

کادر متنی مقدار رمز پیوند حساب

  1. برای شروع یک جلسه WebRTC از دستگاه نمایشگر هوشمند Google خود، یکی از موارد زیر را انجام دهید:
  • بگویید «Hey Google, stream WebRTC Camera».
  • در دستگاه نمایشگر هوشمند Google خود، روی کنترل صفحه اصلی > دوربین > دوربین WebRTC ضربه بزنید.

از برنامه سرویس گیرنده خانه هوشمند Google CameraStream، می‌بینید که Offer SPD و Answer SDP با موفقیت تولید و مبادله شد. تصویر از وب کم شما با WebRTC به دستگاه نمایشگر هوشمند Google شما پخش می شود.

6. تبریک می گویم

تبریک می گویم! شما یاد گرفتید که چگونه با پروتکل WebRTC از وب کم خود به دستگاه نمایشگر Google Nest استریم کنید.

بیشتر بدانید