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، يُرجى اتّباع الخطوات التالية:
- في الوحدة الطرفية، نزِّل واجهة سطر الأوامر لمنصة Firebase وثبِّتها:
$ npm install -g firebase-tools
- تحقَّق من تثبيت واجهة سطر الأوامر بشكل صحيح:
$ firebase --version
- تفويض واجهة سطر الأوامر في Firebase باستخدام حسابك على Google:
$ firebase login
إنشاء مشروع "المهام" وإعداده
- انتقِل إلى وحدة تحكُّم الإجراءات ثم انقر على مشروع جديد.
- في مربّع النص اسم المشروع، أدخِل اسمًا للمشروع، ثم انقر على إنشاء مشروع.
- في صفحة ما نوع الإجراء الذي تريد إنشاءه؟، انقر على منزل مزوّد بأجهزة ذكية > بدء البناء. سيتم فتح المشروع في وحدة تحكُّم الإجراءات.
- انقر على تطوير > الاستدعاء.
- في مربع النص الاسم المعروض، أدخِل اسمًا للإجراء، ثمّ انقر على حفظ. يظهر هذا الاسم في تطبيق Google Home لاحقًا عندما يكون هناك جهاز يمكن إعداده. في هذا الدرس التطبيقي حول الترميز، أدخلنا
WebRTC Codelab
كاسم معروض، ولكن يمكنك استخدام اسم مختلف.
- انقر على الإجراءات.
- في مربّع النص عنوان URL للتنفيذ، أدخِل عنوان URL للعنصر النائب، مثل
https://example.com
.
تشغيل تطبيق عميل CameraStream
يتضمّن رمز المصدر الخاص بهذا الدرس التطبيقي حول الترميز برنامج WebRTC، حيث ينشئ جلسة WebRTC بين كاميرا الويب وجهاز العرض المنزلي المزوّد بأجهزة Google، ويتفاوض بشأنها ويديرها.
لتشغيل تطبيق عميل CameraStream WebRTC، نفِّذ أحد الإجراءات التالية:
- انقر على الزر التالي لتنزيل رمز المصدر على جهاز التطوير:
- استنسِخ مستودع جيت هب هذا:
$ 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
- انتقِل إلى دليل
camerastream-start
ثم اضبط واجهة سطر الأوامر في Firebase باستخدام مشروع الإجراءات:
$ cd camerastream-start $ firebase use PROJECT_ID
- في دليل
camerastream-start
، انتقِل إلى المجلدfunctions
ثم ثبِّت جميع التبعيات اللازمة:
$ cd functions $ npm install
- إذا ظهرت لك الرسالة التالية، يُرجى تجاهلها. يرجع هذا التحذير إلى تبعيات قديمة. لمزيد من المعلومات، يُرجى الاطّلاع على مشكلة GitHub هذه.
found 5 high severity vulnerabilities run `npm audit fix` to fix them, or `npm audit` for details
- إعداد مشروع Firebase:
$ firebase init
- اختَر الدوالّ والاستضافة. يؤدي ذلك إلى تهيئة واجهات برمجة التطبيقات والميزات اللازمة لمشروعك.
? 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
- اضبط دوال 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
- اضبط ميزة "الاستضافة" باستخدام دليل
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 في المنزل الذكي، اتّبِع الخطوات التالية:
- في وحدة تحكُّم Firebase، انقر على إنشاء > قاعدة بيانات الوقت الفعلي > إنشاء قاعدة بيانات.
- في القائمة المنسدلة موقع قاعدة البيانات في الوقت الفعلي، حدد موقعًا مناسبًا لاستضافة قاعدة البيانات منه.
- اختَر البدء في وضع الاختبار ثم انقر على تفعيل. عند تفعيل قاعدة بيانات الوقت الفعلي، تحتاج إلى إمكانية الرجوع إليها من تطبيق عميل CameraStream.
- في وحدة تحكُّم Firebase، اختَر إعدادات المشروع > إعدادات المشروع > إضافة Firebase إلى تطبيق الويب لبدء عملية الإعداد.
- إذا سبق لك إضافة تطبيق إلى مشروعك على Firebase، انقر على إضافة تطبيق لعرض خيارات النظام الأساسي.
- أدخِل لقبًا للتطبيق، مثل
My web app
، ثم انقر على تسجيل التطبيق. - في القسم إضافة حزمة تطوير البرامج (SDK) لمنصّة Firebase، اختَر استخدام علامة <script>.
- انسخ القيم من الكائن
firebasebaseConfig
ثم الصقها في ملفcamaerastream-start/public/webrtc_generator.js
.
const firebaseConfig = {
apiKey: "XXXXX",
authDomain: "XXXXX",
projectId: "XXXXX",
storageBucket: "XXXXX",
messagingSenderId: "XXXXX",
appId: "XXXXX",
measurementId: "XXXXX"
};
- انقر على متابعة إلى وحدة التحكّم لإكمال العملية. سيظهر لك تطبيق الويب الذي تم إنشاؤه حديثًا في صفحة إعدادات المشروع.
4- إنشاء كاميرا WebRTC
الآن وبعد ضبط الإجراء، يجب أن تعالج الخدمة السحابية الأهداف التالية:
- هدف "
SYNC
" يحدث عندما يريد "مساعد Google" معرفة الأجهزة التي اتصل بها المستخدم. يتم إرسال هذه المعلومات إلى خدمتك عندما يربط المستخدم حسابًا. يجب الاستجابة باستخدام حمولة JSON لأجهزة المستخدم وإمكاناته. - هدف "
EXECUTE/QUERY
" يحدث عندما يريد "مساعد Google" التحكّم في جهاز نيابةً عن المستخدم يجب الاستجابة باستخدام حمولة JSON مع حالة التنفيذ لكل جهاز مطلوب.
في هذا القسم، ستُعدِّل الدوال التي نشرتها سابقًا للتعامل مع هذه الأغراض.
تعديل ردّ SYNC
- انتقِل إلى ملف
functions/index.js
. يحتوي المستند على رمز الاستجابة للطلبات الواردة من "مساعد Google". - تعديل النية
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
تفعيل ربط الحساب
لتفعيل ميزة ربط الحسابات بعد نشر مشروعك، اتّبِع الخطوات التالية:
- في وحدة تحكّم الإجراءات، اختَر تطوير > ربط الحساب.
- في قسم معلومات عميل OAuth، أدخِل المعلومات التالية في مربّعات النص المقابلة:
رقم تعريف العميل |
|
سر العميل |
|
عنوان URL للتفويض |
|
عنوان URL للرمز المميّز |
|
- انقر على حفظ > اختبار.
5- اختبار كاميرا WebRTC الافتراضية
- انتقِل إلى عنوان URL للاستضافة الذي ظهر لك عند نشر مشروع Firebase. ستظهر لك الواجهة التالية، وهي تطبيق عميل CameraStream:
- اختَر الفيديو المطلوب في لوحة درجة دقة الفيديو على الجهاز.
- امنح تطبيق برنامج CameraStream إذنًا بالوصول إلى كاميرا الويب والميكروفون. تظهر خلاصة فيديو من كاميرا الويب على البرنامج.
إجراء CameraStream
للمنزل المزوّد بأجهزة ذكية
- في تطبيق Google Home، انقر على إضافة > يعمل مع Google.
- ابحث عن الإجراء الذي أنشأته ثم اختَره.
- لاحظ الرمز الفريد المكون من خمسة أحرف أبجدية رقمية لأنك ستحتاج إليه لاحقًا.
- انقر على إعادةني. تتم إضافة كاميرا WebRTC إلى البنية في تطبيق Google Home.
بدء بث WebRTC
- في صفحة الويب لتطبيق برنامج CameraStream، أدخِل الرمز الأبجدي الرقمي من القسم الأخير في مربّع النص قيمة الرمز المميّز لربط الحساب، ثم انقر على إرسال.
- لبدء جلسة WebRTC من جهاز العرض الذكي من Google، نفِّذ أحد الإجراءات التالية:
- قُل "Ok Google، أريد بث محتوى كاميرا WebRTC".
- على جهاز العرض الذكي من Google، انقر على الإدارة الآلية للمنزل > الكاميرا > كاميرا WebRTC.
من تطبيق عميل CameraStream من Google للأجهزة المنزلية الذكية، تلاحظ أنّه تم إنشاء واستبدال SPD وAnswer SDP بنجاح. يتم بث الصورة من كاميرا الويب إلى جهاز العرض الذكي من Google باستخدام WebRTC.
6- تهانينا
تهانينا! لقد اطّلعت على كيفية البث من كاميرا الويب إلى جهاز عرض من Google Nest باستخدام بروتوكول WebRTC.