تنفيذ CameraStream باستخدام WebRTC

1. قبل البدء

تنتمي السمة CameraStream إلى الأجهزة التي يمكنها بث خلاصات الفيديو إلى الشاشات الذكية وأجهزة Chromecast والهواتف الذكية. أصبح بروتوكول WebRTC متوافقًا الآن مع السمة CameraStream، ما يعني أنّه يمكنك تقليل وقت استجابة بدء التشغيل والبث بشكل كبير من جهاز كاميرا إلى جهاز عرض Google Nest.

المتطلبات الأساسية

• يمكنك الاطّلاع على المستند الأوّلي من السحابة الإلكترونية إلى السحابة الإلكترونية.

ما ستتعرَّف عليه

• كيفية نشر خدمة سحابية للمنزل المزوّد بأجهزة ذكية
• كيفية ربط خدمتك بخدمة "مساعد Google"
• كيفية البث إلى جهاز عرض Google Nest باستخدام بروتوكول WebRTC

المتطلبات

• متصفِّح ويب، مثل Google Chrome
• جهاز iOS أو Android مثبَّت عليه تطبيق Google Home
• Node.js بالإصدار 10.16 أو إصدار أحدث.
• خطة Blaze (الدفع حسب الاستخدام) في Firebase
• جهاز كاميرا ويب مُدمَج أو خارجي يمكنه توفير دقة فائقة الدقة.
• شاشة Google Nest

2. البدء

تثبيت واجهة سطر الأوامر في Firebase

يتيح لك واجهة سطر الأوامر في Firebase عرض تطبيقات الويب محليًا ونشرها في استضافة Firebase.

لتثبيت واجهة سطر الأوامر في Firebase، اتّبِع الخطوات التالية:

1. في الوحدة الطرفية، نزِّل واجهة سطر الأوامر لمنصّة Firebase وثبِّتها:

$ npm install -g firebase-tools

2. تحقَّق من تثبيت واجهة سطر الأوامر بشكل صحيح:

$ firebase --version

3. تفويض واجهة سطر الأوامر في Firebase باستخدام حسابك على Google:

$ firebase login

إنشاء مشروع على المهام وإعداده

1. انتقِل إلى وحدة تحكُّم الإجراءات، ثم انقر على مشروع جديد.
2. في مربّع النص اسم المشروع، أدخِل اسمًا للمشروع، ثم انقر على إنشاء مشروع.

3. في صفحة ما نوع الإجراء الذي تريد تنفيذه؟، انقر على منزل مزوّد بأجهزة ذكية > بدء البناء يتم فتح المشروع في وحدة تحكّم "المهام".

4. انقر على التطوير >. الاستدعاء:
5. في مربّع النص الاسم المعروض، أدخِل اسمًا للإجراء، ثم انقر على حفظ. يظهر هذا الاسم لاحقًا في تطبيق Google Home عند توفُّر جهاز تم إعداده. لقد أدخلنا WebRTC Codelab كاسم معروض في هذا الدرس التطبيقي، ولكن يمكنك استخدام اسم مختلف.

6. انقر على الإجراءات.
7. في مربّع النص عنوان URL لتوصيل الطلبات، أدخِل عنوان URL للعنصر النائب، مثل https://example.com.

تشغيل تطبيق عميل CameraStream

يتضمّن رمز المصدر لهذا الدرس التطبيقي عن الترميز برنامج WebRTC الذي ينشئ جلسة WebRTC ويتفاوض بشأنها ويديرها بين كاميرا الويب وجهاز عرض الشاشة المنزلية الذكية من Google.

لتشغيل تطبيق عميل CameraStream WebRTC، يمكنك تنفيذ أحد الإجراءات التالية:

• انقر على الزر التالي لتنزيل رمز المصدر على جهاز التطوير:

file_downloadتنزيل رمز المصدر

• استنسِخ مستودع GitHub هذا:

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

يحتوي الرمز على الأدلة التالية:

• دليل camerastream-start، الذي يحتوي على رمز التفعيل الذي أنشأتَ استنادًا إليه
• يشير هذا المصطلح إلى دليل camerastream-done الذي يحتوي على رمز الحلّ الخاص بالدرس التطبيقي حول الترميز.

يحتوي الدليل camerastream-start على الأدلة الفرعية التالية:

• الدليل الفرعي public الذي يحتوي على واجهة مستخدم واجهة أمامية للتحكم في حالة جهاز الكاميرا ومراقبتها بسهولة.
• الدليل الفرعي functions الذي يحتوي على خدمة سحابية منفَّذة بالكامل لإدارة الكاميرا باستخدام دوال Cloud في Firebase وقاعدة بيانات الوقت الفعلي

يتضمّن رمز التفعيل تعليقات TODO تشير إلى وجوب إضافة الرمز أو تغييره، مثل المثال التالي:

// TODO: Implement full SYNC response.

الربط مع Firebase

1. انتقِل إلى دليل camerastream-start، ثم أعِدّ واجهة سطر الأوامر في Firebase باستخدام مشروع الإجراءات:

$ cd camerastream-start
$ firebase use PROJECT_ID

2. في دليل camerastream-start، انتقِل إلى مجلد functions ثم ثبِّت جميع الاعتماديات اللازمة:

$ cd functions
$ npm install

3. إذا ظهرت لك الرسالة التالية، فتجاهلها. يرجع سبب هذا التحذير إلى برامج تابعة قديمة. لمزيد من المعلومات، يُرجى الاطّلاع على مشكلة GitHub هذه.

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

4. إعداد مشروع Firebase:

$ firebase init

5. اختَر الدوالّ والاستضافة. يؤدي هذا إلى تهيئة واجهات برمجة التطبيقات والميزات اللازمة لمشروعك.

? 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. عليك ضبط Cloud Functions باستخدام الملفات التلقائية والتأكّد من عدم استبدال ملفات 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

3- رسائل بروتوكول وصف جلسة Exchange (SDP)

يُعد تبادل رسائل SDP خطوة مهمة في إنشاء بث WebRTC. SDP هو بروتوكول مستند إلى النص يصف خصائص جلسة الوسائط المتعددة. يتم استخدام البيانات في WebRTC لإجراء التفاوض على معلَمات الاتصال من نظير إلى نظير، مثل برامج الترميز المُستخدَمة وعناوين IP للمشاركين والمنافذ المستخدَمة لنقل الوسائط.

لاستخدام Realtime Database كمضيف لتبادل رسائل SDP بين كاميرا الويب وتطبيق عميل CameraStream في المنزل الذكي، اتّبِع الخطوات التالية:

1. في وحدة تحكُّم Firebase، انقر على إنشاء > قاعدة بيانات الوقت الفعلي > إنشاء قاعدة بيانات

2. في القائمة المنسدلة موقع قاعدة البيانات في الوقت الفعلي، اختَر موقعًا مناسبًا لاستضافة قاعدة البيانات منه.

3. اختَر البدء في وضع الاختبار، ثم انقر على تفعيل. عند تفعيل "قاعدة البيانات في الوقت الفعلي"، ستحتاج إلى القدرة على الرجوع إليها من تطبيق عميل CameraStream.

4. في وحدة تحكُّم Firebase، اختر إعدادات المشروع >. إعدادات المشروع > أضِف Firebase إلى تطبيق الويب لبدء عملية الإعداد.
5. إذا سبق لك إضافة تطبيق إلى مشروعك على Firebase، انقر على إضافة تطبيق لعرض خيارات النظام الأساسي.
6. أدخِل لقبًا للتطبيق، مثل My web app، ثم انقر على تسجيل التطبيق.
7. في القسم إضافة حزمة تطوير البرامج (SDK) لمنصّة Firebase، اختَر استخدام <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. انقر على متابعة إلى وحدة التحكّم لإكمال العملية. سيظهر لك تطبيق الويب الذي تم إنشاؤه حديثًا في صفحة إعدادات المشروع.

4. إنشاء كاميرا WebRTC

الآن بعد أن ضبطت الإجراء، يجب أن تعالج خدمة السحابة الإلكترونية الأهداف التالية:

• هدف SYNC يحدث عندما يريد "مساعد Google" معرفة الأجهزة التي اتصل بها المستخدم. يتم إرسال هذه المعلومات إلى خدمتك عندما يربط المستخدم حسابًا. يجب أن تستجيب باستخدام حمولة JSON لأجهزة المستخدم وإمكانياتها.
• هدف EXECUTE/QUERY يحدث عندما يريد "مساعد Google" التحكّم في الجهاز نيابةً عن المستخدم من المفترض أن تستجيب باستخدام حمولة JSON مع حالة التنفيذ لكل جهاز مطلوب.

في هذا القسم، يمكنك تعديل الدوال التي سبق لك نشرها للتعامل مع هذه الأهداف.

تعديل ردّ "SYNC"

1. انتقِل إلى ملف functions/index.js. يحتوي على رمز للردّ على الطلبات الواردة من "مساعد Google".
2. عدِّل SYNC intent لعرض البيانات الوصفية والإمكانات للجهاز:

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 intent الأوامر لتعديل حالة الجهاز. تعرض الاستجابة حالة كل طلب، مثل 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، أضِف "إشارات" Firebase. عنوان URL الخاص بالدالة إلى ملف 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:

$ 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. في القسم معلومات عميل OAuth، أدخِل المعلومات التالية في مربّعات النص المقابلة:

3. انقر على حفظ >. اختبار:

5- اختبار كاميرا WebRTC الافتراضية

1. انتقِل إلى عنوان URL للاستضافة الذي رأيته عند نشر مشروع Firebase. ستظهر لك الواجهة التالية، وهي تطبيق عميل CameraStream:

2. في لوحة درجة دقة الفيديو المحلي، اختَر الفيديو المطلوب.
3. امنح تطبيق عميل CameraStream الإذن بالوصول إلى كاميرا الويب والميكروفون. ستظهر خلاصة فيديو من كاميرا الويب على جهاز العميل.

إجراء CameraStream في المنزل المزوّد بأجهزة ذكية

1. في تطبيق Google Home، انقر على إضافة >. يعمل مع Google:

2. ابحث عن الإجراء الذي أنشأته ثم اختَره.

3. لاحظ الرمز الأبجدي الرقمي الفريد المكون من خمسة أحرف لأنك ستحتاج إليه لاحقًا.

4. انقر على الرجوع إلى الصفحة السابقة. تمت إضافة كاميرا WebRTC إلى البنية في تطبيق Google Home.

بدء بث WebRTC

1. في صفحة الويب لتطبيق عميل CameraStream، أدخِل الرمز الأبجدي الرقمي من القسم الأخير في مربع النص قيمة الرمز المميّز لربط الحساب، ثم انقر على إرسال.

2. لبدء جلسة WebRTC من جهاز شاشة Google الذكي، نفِّذ أحد الإجراءات التالية:

• قُل "Ok Google، أريد بث كاميرا WebRTC".
• على شاشة Google الذكية، انقر على الإدارة الآلية للمنزل >. الكاميرا > كاميرا WebRTC.

من خلال تطبيق عميل CameraStream من Google للمنزل المزوّد بأجهزة ذكية، ستلاحظ أنّه تم إنشاء عرض SPD والإجابة على سؤال SDP بنجاح وتبادلهما. يتم بث الصورة من كاميرا الويب إلى شاشة Google الذكية باستخدام WebRTC.

6- تهانينا

تهانينا! لقد تعرّفت على كيفية بث المحتوى من كاميرا الويب إلى جهاز عرض Google Nest باستخدام بروتوكول WebRTC.

مزيد من المعلومات

• سمات الأجهزة المنزلية الذكية
• المهام مع مساعد Google: نموذج للمنزل المزوّد بأجهزة ذكية باستخدام Node.js
• اختبار الإجراءات المنزلية الذكية ومشاركتها