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

1- قبل البدء

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

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

• راجِع البيانات التمهيدية من السحابة الإلكترونية إلى السحابة الإلكترونية.

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

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

المتطلبات

• متصفِّح ويب، مثل Google Chrome.
• جهاز iOS أو Android يتضمّن تطبيق Google Home
• الإصدار 10.16 من Node.js أو إصدار أحدث.
• خطة 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تنزيل رمز المصدر

• استنسِخ مستودع جيت هب هذا:

$ 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 باستخدام الملفات التلقائية وتأكَّد من عدم استبدال ملفَّي 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 للمشاركين والمنافذ المستخدَمة لنقل الوسائط.

لاستخدام قاعدة بيانات الوقت الفعلي كمضيف لتبادل رسائل بروتوكول وصف الجلسة (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 لعرض البيانات الوصفية والإمكانات للجهاز:

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 لوظيفة "الإشارات" في 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:

$ 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 وAnswer SDP بنجاح. يتم بث الصورة من كاميرا الويب إلى جهاز العرض الذكي من Google باستخدام WebRTC.

6- تهانينا

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

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

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