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

۱. قبل از شروع

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

پیش‌نیازها

• مرور مبانی ابر به ابر .

آنچه یاد خواهید گرفت

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

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

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

۲. شروع کنید

نصب رابط خط فرمان فایربیس

رابط خط فرمان فایربیس (Firebase CLI) به شما امکان می‌دهد برنامه‌های وب خود را به صورت محلی ارائه دهید و آنها را در هاستینگ فایربیس مستقر کنید.

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

1. در ترمینال خود، Firebase CLI را دانلود و نصب کنید:

$ npm install -g firebase-tools

2. تأیید کنید که CLI به درستی نصب شده است:

$ firebase --version

3. با استفاده از حساب گوگل خود، Firebase CLI را مجاز کنید:

$ firebase login

ایجاد یک پروژه

1. به کنسول توسعه‌دهندگان گوگل هوم بروید.
2. روی «ایجاد پروژه» کلیک کنید، یک نام برای پروژه وارد کنید و روی «ایجاد پروژه» کلیک کنید.

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

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

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

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

file_download سورس کد (source code)

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

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

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

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

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

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

کد آغازین شامل کامنت‌های TODO است که نشان می‌دهد کجا باید کد را اضافه یا تغییر دهید، مانند مثال زیر:

// TODO: Implement full SYNC response.

فایربیس را به پروژه کنسول توسعه‌دهندگان گوگل هوم خود اضافه کنید

روش اول: از طریق کنسول فایربیس

1. به فایربیس بروید.
2. روی ایجاد یک پروژه Firebase کلیک کنید.
   
3. در صفحه ایجاد پروژه ، روی افزودن Firebase به پروژه Google Cloud کلیک کنید.
   
4. در صفحه شروع ، پروژه Google Cloud که اخیراً در کنسول توسعه‌دهنده Google Home ایجاد کرده‌اید را انتخاب کنید و سپس روی ادامه کلیک کنید.
   

روش دوم: از طریق رابط خط فرمان فایربیس

firebase projects:addfirebase

پروژه کنسول توسعه‌دهندگان گوگل هوم که برای افزودن فایربیس ایجاد کرده‌اید را انتخاب کنید.

وقتی Firebase به پروژه Google Home Developer Console شما اضافه می‌شود، در Firebase Console ظاهر می‌شود. شناسه پروژه Firebase با شناسه پروژه Google Home Developer Console شما هماهنگ خواهد شد.

اتصال به فایربیس

1. به دایرکتوری camerastream-start بروید و سپس Firebase CLI را با پروژه Actions خود تنظیم کنید:

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

2. در پوشه camerastream-start ، به پوشه functions بروید و سپس تمام وابستگی‌های لازم را نصب کنید:

$ cd functions
$ npm install

3. اگر پیام زیر را مشاهده کردید، آن را نادیده بگیرید. این هشدار به دلیل وابستگی‌های قدیمی‌تر است. برای اطلاعات بیشتر، به این مشکل گیت‌هاب مراجعه کنید.

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

4. یک پروژه Firebase را مقداردهی اولیه کنید:

$ firebase init

5. گزینه Functions and Hosting را انتخاب کنید. این گزینه APIها و ویژگی‌های لازم برای پروژه شما را مقداردهی اولیه می‌کند.

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter
 to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
 proceed)
>( ) Data Connect: Set up a Firebase Data Connect service
 ( ) Firestore: Configure security rules and indexes files for Firestore
 ( ) Genkit: Setup a new Genkit project with Firebase
 (*) Functions: Configure a Cloud Functions directory and its files
 ( ) App Hosting: Configure an apphosting.yaml file for App Hosting
 (*) Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
 ( ) Storage: Configure a security rules file for Cloud Storage
 ( ) Emulators: Set up local emulators for Firebase products
 ( ) Remote Config: Configure a template file for Remote Config
 ( ) Extensions: Set up an empty Extensions manifest
 (*) Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision
default instance
 ( ) Data Connect: Set up a Firebase Data Connect service
 ( ) Firestore: Configure security rules and indexes files for Firestore

6. توابع ابری را با فایل‌های پیش‌فرض پیکربندی کنید و مطمئن شوید که فایل‌های 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

7. میزبانی را با دایرکتوری 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

۳. پیام‌های پروتکل توصیف جلسه تبادل (SDP)

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

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

1. در کنسول Firebase ، روی Build > Realtime Database > Create database کلیک کنید.

2. در منوی کشویی Realtime Database location ، مکان مناسبی را برای میزبانی پایگاه داده خود انتخاب کنید.

3. در حالت آزمایشی، گزینه «شروع» را انتخاب کنید و سپس روی «فعال کردن» کلیک کنید. با فعال بودن پایگاه داده بی‌درنگ، باید بتوانید از طریق برنامه کلاینت CameraStream به آن ارجاع دهید.

4. در کنسول Firebase، انتخاب کنید تنظیمات پروژه > تنظیمات پروژه > برای شروع گردش کار تنظیمات ، Firebase را به برنامه وب خود اضافه کنید .
5. اگر قبلاً برنامه‌ای به پروژه Firebase خود اضافه کرده‌اید، برای نمایش گزینه‌های پلتفرم، روی افزودن برنامه کلیک کنید.
6. یک نام مستعار برای برنامه وارد کنید، مانند My web app )، و سپس روی ثبت برنامه (Register app) کلیک کنید.
7. در بخش افزودن SDK فایربیس ، گزینه‌ی «استفاده از تگ <script>» را انتخاب کنید.
8. مقادیر را از شیء firebasebaseConfig کپی کرده و سپس آنها را در فایل camaerastream-start/public/webrtc_generator.js قرار دهید.

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

9. برای تکمیل فرآیند ، روی ادامه کلیک کنید تا به کنسول بروید . برنامه وب تازه ایجاد شده را در صفحه تنظیمات پروژه مشاهده خواهید کرد.

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

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

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

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

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

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

ایندکس.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 در کد تعریف نشده است. کد زیر را در زیر const _ = require('underscore'); اضافه کنید:

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

مدیریت قصد اجرا EXECUTE )

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

برای مدیریت یک هدف EXECUTE ، هدف EXECUTE را برای بازگرداندن نقطه پایانی signaling پروژه Firebase در فایل functions/index.js ویرایش کنید:

ایندکس.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، آدرس میزبانی Firebase را به آرایه allowlist در فایل functions/index.js اضافه کنید:

ایندکس.js

'use strict';
.....

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

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

خاتمه جریان را مدیریت کنید

برای مدیریت خاتمه جریان WebRTC، URL تابع 'signaling' فایربیس را به فایل 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 CLI مستقر کنید:

$ firebase deploy

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

...

✔ Deploy complete!

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

پروژه کنسول توسعه‌دهنده خود را پیکربندی کنید

1. به کنسول توسعه‌دهندگان بروید.
2. روی «ایجاد پروژه» کلیک کنید، یک نام برای پروژه وارد کنید و روی «ایجاد پروژه» کلیک کنید.

ادغام ابر به ابر را انتخاب کنید

در صفحه اصلی پروژه در کنسول توسعه‌دهندگان، گزینه «افزودن ادغام ابر به ابر» را در زیر «ابر به ابر» انتخاب کنید.

1. یک نام برای یکپارچه‌سازی وارد کنید و در قسمت نوع دستگاه ، دوربین را انتخاب کنید. این نام بعداً در برنامه Google Home، زمانی که دستگاهی برای راه‌اندازی وجود دارد، ظاهر می‌شود. برای این codelab، ما WebRTC Codelab را به عنوان نام نمایشی وارد کردیم، اما شما می‌توانید از نام دیگری استفاده کنید.

2. در قسمت App branding ، یک فایل png برای آیکون برنامه، با اندازه ۱۴۴ در ۱۴۴ پیکسل و نام دلخواه آپلود کنید. .png .

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

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

1. به کنسول توسعه‌دهندگان بروید و پروژه را باز کنید.
2. در بخش «ابر به ابر» ، روی «توسعه» > «ویرایش» در کنار ادغام کلیک کنید.
3. در صفحه تنظیمات و پیکربندی ، بخش پیوند حساب را پیدا کنید و اطلاعات زیر را در کادرهای متنی مربوطه وارد کنید:

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

۵. دوربین مجازی WebRTC را آزمایش کنید

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

2. در پنل Local Video Resolution ، ویدیوی مورد نظر را انتخاب کنید.
3. به برنامه کلاینت CameraStream اجازه دسترسی به وب‌کم و میکروفون خود را بدهید. یک فید ویدیویی از وب‌کم شما در کلاینت ظاهر می‌شود.

اتصال به خانه هوشمند CameraStream Action

1. در برنامه Google Home، روی افزودن > همکاری با گوگل بزنید.

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

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

4. روی « من را برگردان» ضربه بزنید. دوربین WebRTC به ساختار شما در برنامه Google Home اضافه می‌شود.

شروع یک استریم WebRTC

1. در صفحه وب مربوط به برنامه کلاینت CameraStream، کد الفبایی-عددی بخش آخر را در کادر متنی Account linking token value وارد کنید و سپس روی ارسال کلیک کنید.

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

• بگویید «هی گوگل، دوربین WebRTC را پخش کن.»
• در دستگاه نمایشگر هوشمند گوگل خود، روی کنترل خانه > دوربین > دوربین WebRTC بزنید.

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

۶. تبریک

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

بیشتر بدانید

• ویژگی‌های دستگاه‌های خانه هوشمند
• اقدامات در گوگل: نمونه خانه هوشمند با استفاده از Node.js
• اقدامات خانه هوشمند را آزمایش و به اشتراک بگذارید