WebRTC के साथ CameraStream लागू करें

1. शुरू करने से पहले

CameraStream Trait उन डिवाइसों से जुड़ा है जिनमें स्मार्ट डिसप्ले, Chromecast डिवाइसों, और स्मार्टफ़ोन पर वीडियो फ़ीड स्ट्रीम करने की सुविधा मौजूद है. WebRTC प्रोटोकॉल अब CameraStream Trait में काम करता है. इसका मतलब है कि कैमरा डिवाइस के चालू होने और स्ट्रीम होने में लगने वाले समय को कम करने के लिए, Google Nest डिसप्ले डिवाइस का इस्तेमाल किया जा सकता है.

ज़रूरी शर्तें

• क्लाउड-टू-क्लाउड प्राइमर की समीक्षा करें.

आप इन चीज़ों के बारे में जानेंगे

• स्मार्ट होम क्लाउड सेवा को डिप्लॉय करने का तरीका.
• अपनी सेवा को Google Assistant से कैसे कनेक्ट करें.
• WebRTC प्रोटोकॉल की मदद से, Google Nest डिसप्ले डिवाइस पर स्ट्रीम करने का तरीका.

आपको इनकी ज़रूरत होगी

• कोई वेब ब्राउज़र, जैसे कि Google Chrome.
• आपके पास iOS या Android डिवाइस पर, Google Home ऐप्लिकेशन इंस्टॉल करने की सुविधा हो.
• Node.js का 10.16 या इसके बाद वाला वर्शन होना चाहिए.
• Firebase के लिए Blaze (इस्तेमाल के हिसाब से पैसे चुकाएं) प्लान.
• पहले से मौजूद या बाहरी वेबकैम डिवाइस, जिस पर फ़ुल एचडी रिज़ॉल्यूशन में काम किया जा सकता है.
• Google Nest डिसप्ले डिवाइस.

2. अपनी प्रोफ़ाइल बनाना शुरू करें

Firebase सीएलआई इंस्टॉल करें

Firebase सीएलआई की मदद से आप अपने वेब ऐप्लिकेशन स्थानीय तौर पर उपलब्ध करा सकते हैं और उन्हें Firebase होस्टिंग पर डिप्लॉय कर सकते हैं.

Firebase सीएलआई इंस्टॉल करने के लिए, यह तरीका अपनाएं:

1. अपने टर्मिनल में, Firebase सीएलआई डाउनलोड और इंस्टॉल करें:

$ npm install -g firebase-tools

2. पुष्टि करें कि सीएलआई सही तरीके से इंस्टॉल किया गया है:

$ firebase --version

3. अपने Google खाते से Firebase सीएलआई को अनुमति दें:

$ firebase login

Actions प्रोजेक्ट बनाना और कॉन्फ़िगर करना

1. कार्रवाइयां कंसोल पर जाएं और फिर नया प्रोजेक्ट पर क्लिक करें.
2. प्रोजेक्ट का नाम टेक्स्ट बॉक्स में, प्रोजेक्ट के लिए कोई नाम डालें. इसके बाद, प्रोजेक्ट बनाएं पर क्लिक करें.

3. आपको किस तरह की कार्रवाई बनानी है? पेज पर, स्मार्ट होम पर क्लिक करें > बनाना शुरू करें. प्रोजेक्ट, Actions कंसोल में खुलेगा.

4. डेवलप करें पर क्लिक करें > कॉल शुरू करना.
5. डिसप्ले नेम टेक्स्ट बॉक्स में, कार्रवाई के लिए कोई नाम डालें. इसके बाद, सेव करें पर क्लिक करें. जब भी डिवाइस सेट अप करना होगा, तब यह नाम Google Home ऐप्लिकेशन में दिखेगा. इस कोडलैब के लिए, हमने डिसप्ले नेम के तौर पर WebRTC Codelab डाला है. हालांकि, आपके पास किसी दूसरे नाम का इस्तेमाल करने का विकल्प है.

6. कार्रवाइयां पर क्लिक करें.
7. ग्राहक को आइटम भेजने का यूआरएल टेक्स्ट बॉक्स में, प्लेसहोल्डर का यूआरएल डालें, जैसे कि https://example.com.

CameraStream क्लाइंट ऐप्लिकेशन चलाएं

इस कोडलैब के सोर्स कोड में एक WebRTC क्लाइंट शामिल है जो वेबकैम और Google स्मार्ट होम डिसप्ले डिवाइस के बीच WebRTC सेशन को सेट करता है, मोल-भाव करता है, और उसे मैनेज करता है.

CameraStream WebRTC क्लाइंट ऐप्लिकेशन चलाने के लिए, इनमें से कोई एक काम करें:

• अपनी डेवलपमेंट मशीन में सोर्स कोड डाउनलोड करने के लिए, नीचे दिए गए बटन पर क्लिक करें:

file_downloadसोर्स कोड डाउनलोड करें

• GitHub के इस डेटा स्टोर करने की जगह का क्लोन बनाएं:

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

कोड में ये डायरेक्ट्री शामिल होती हैं:

• camerastream-start डायरेक्ट्री, जिसमें वह स्टार्टर कोड होता है जिसका इस्तेमाल करके आपने उसे बनाया है.
• camerastream-done डायरेक्ट्री, जिसमें तैयार हो चुके कोडलैब का समाधान कोड शामिल है.

camerastream-start डायरेक्ट्री में ये सबडायरेक्ट्री शामिल हैं:

• public सबडायरेक्ट्री, जिसमें आपके कैमरा डिवाइस की स्थिति को आसानी से कंट्रोल करने और उसकी निगरानी करने के लिए फ़्रंटएंड यूज़र इंटरफ़ेस (यूआई) मौजूद होता है.
• functions सबडायरेक्ट्री, जिसमें पूरी तरह से लागू की गई क्लाउड सेवा होती है. यह कैमरे को 'Firebase के लिए Cloud Functions' और रीयल टाइम डेटाबेस की मदद से मैनेज करती है.

स्टार्टर कोड में 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) मैसेज

WebRTC स्ट्रीम बनाने के लिए, एसडीपी मैसेज का एक्सचेंज होना एक अहम कदम है. SDP, टेक्स्ट पर आधारित प्रोटोकॉल है. यह एक मल्टीमीडिया सेशन की विशेषताओं के बारे में बताता है. WebRTC में पीयर-टू-पीयर कनेक्शन के पैरामीटर, जैसे कि इस्तेमाल किए गए कोडेक, मीटिंग में हिस्सा लेने वाले लोगों के आईपी पते, और मीडिया ट्रांसपोर्ट के लिए इस्तेमाल होने वाले पोर्ट में मोल-भाव करने के लिए, इसका इस्तेमाल किया जाता है.

अपने वेबकैम और स्मार्ट होम CameraStream क्लाइंट ऐप्लिकेशन के बीच एसडीपी मैसेज का एक्सचेंज करने के लिए, रीयल टाइम डेटाबेस का इस्तेमाल होस्ट के तौर पर करने के लिए, यह तरीका अपनाएं:

1. Firebase कंसोल में, बिल्ड > पर क्लिक करें रीयलटाइम डेटाबेस > डेटाबेस बनाएं.

2. रीयल टाइम डेटाबेस की लोकेशन ड्रॉप-डाउन मेन्यू में, वह जगह चुनें जहां से अपना डेटाबेस होस्ट करना है.

3. टेस्ट मोड में चालू करें को चुनें. इसके बाद, चालू करें पर क्लिक करें. रीयलटाइम डेटाबेस चालू होने पर, आपको CameraStream क्लाइंट ऐप्लिकेशन से इसका रेफ़रंस लेने की सुविधा की ज़रूरत होती है.

4. Firebase कंसोल में, प्रोजेक्ट सेटिंग > प्रोजेक्ट की सेटिंग > सेटअप वर्कफ़्लो लॉन्च करने के लिए, अपने वेब ऐप्लिकेशन में Firebase जोड़ें.
5. अगर आपने पहले से ही अपने Firebase प्रोजेक्ट में कोई ऐप्लिकेशन जोड़ा हुआ है, तो प्लैटफ़ॉर्म के विकल्प देखने के लिए ऐप्लिकेशन जोड़ें पर क्लिक करें.
6. ऐप्लिकेशन का कोई दूसरा नाम डालें, जैसे कि My web app. इसके बाद, ऐप्लिकेशन रजिस्टर करें पर क्लिक करें.
7. Firebase 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. प्रोसेस पूरी करने के लिए, कंसोल पर जारी रखें पर क्लिक करें. आपको प्रोजेक्ट सेटिंग पेज पर, नया वेब ऐप्लिकेशन दिखता है.

4. WebRTC कैमरा बनाएं

आपने Action को कॉन्फ़िगर कर लिया है. इसलिए, अब आपकी क्लाउड सेवा को ये इंटेंट मैनेज करने होंगे:

• SYNC इंटेंट तब होता है, जब Assistant यह जानना चाहती है कि उपयोगकर्ता ने किन डिवाइसों से कनेक्ट किया है. जब उपयोगकर्ता किसी खाते को लिंक करता है, तो इसे आपकी सेवा को भेजा जाता है. आपको उपयोगकर्ता के डिवाइसों और उनकी क्षमताओं के JSON पेलोड के साथ जवाब देना चाहिए.
• EXECUTE/QUERY इंटेंट तब होता है, जब Assistant किसी उपयोगकर्ता की ओर से किसी डिवाइस को कंट्रोल करना चाहती है. आपको अनुरोध किए गए हर डिवाइस के एक्ज़ीक्यूशन के स्टेटस के साथ, JSON पेलोड के साथ जवाब देना चाहिए.

इस सेक्शन में, उन फ़ंक्शन को अपडेट किया जाता है जिन्हें आपने इन इंटेंट को मैनेज करने के लिए पहले डिप्लॉय किया था.

SYNC के जवाब को अपडेट करें

1. functions/index.js फ़ाइल पर जाएं. इसमें Assistant के अनुरोधों का जवाब देने का कोड शामिल होता है.
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 इंटेंट में बदलाव करें, ताकि functions/index.js फ़ाइल में Firebase प्रोजेक्ट के signaling एंडपॉइंट को दिखाया जा सके:

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

क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग (सीओआरएस) को मैनेज करना

• एसडीपी भेजने के लिए POST तरीके के इस्तेमाल की वजह से सीओआरएस को मैनेज करने के लिए, functions/index.js फ़ाइल में allowlist कलेक्शन में Firebase होस्टिंग यूआरएल जोड़ें:

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.

सीओआरएस के बारे में ज़्यादा जानकारी के लिए, क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग (सीओआरएस) लेख पढ़ें.

स्ट्रीम बंद होने से जुड़ी समस्याओं को मैनेज करना

• WebRTC स्ट्रीम बंद करने की प्रक्रिया को मैनेज करने के लिए, 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 के लिए Cloud Functions को डिप्लॉय करता है:

...

✔ 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. उस होस्टिंग यूआरएल पर जाएं जो आपको Firebase प्रोजेक्ट डिप्लॉय करते समय दिखा था. आपको नीचे दिया गया इंटरफ़ेस दिख रहा है, जो CameraStream क्लाइंट ऐप्लिकेशन है:

2. लोकल वीडियो का रिज़ॉल्यूशन पैनल में, अपनी पसंद का वीडियो चुनें.
3. CameraStream क्लाइंट ऐप्लिकेशन को आपका वेबकैम और माइक्रोफ़ोन ऐक्सेस करने की अनुमति दें. क्लाइंट को आपके वेबकैम से एक वीडियो फ़ीड दिखेगा.

स्मार्ट होम CameraStream कार्रवाई से लिंक करें

1. Google Home ऐप्लिकेशन में, जोड़ें > पर टैप करें Google के साथ काम करता है.

2. आपने जो कार्रवाई बनाई है उसे खोजें और फिर उसे चुनें.

3. अक्षरों और अंकों से बना, पांच वर्णों वाला यूनीक कोड नोट करें, क्योंकि आपको बाद में इसकी ज़रूरत है.

4. मुझे वापस ले जाएं पर टैप करें. WebRTC कैमरे को आपके Google Home ऐप्लिकेशन के स्ट्रक्चर में जोड़ दिया गया है.

WebRTC स्ट्रीम शुरू करें

1. CameraStream क्लाइंट ऐप्लिकेशन के वेब पेज पर, खाता लिंक करने के टोकन की वैल्यू टेक्स्ट बॉक्स में, आखिरी सेक्शन में मौजूद अक्षरों और अंकों से बना कोड डालें. इसके बाद, सबमिट करें पर क्लिक करें.

2. अपने Google स्मार्ट डिसप्ले डिवाइस से WebRTC सेशन शुरू करने के लिए, इनमें से कोई एक काम करें:

• "Ok Google, WebRTC कैमरा स्ट्रीम करो" कहें.
• अपने Google स्मार्ट डिसप्ले डिवाइस पर, होम कंट्रोल > कैमरा > WebRTC कैमरा.

Google के स्मार्ट होम CameraStream क्लाइंट ऐप्लिकेशन में, आपको दिखता है कि ऑफ़र एसपीडी और जवाब वाला एसडीपी जनरेट और एक्सचेंज हो गया है. आपके वेबकैम से इमेज, WebRTC की मदद से आपके Google स्मार्ट डिसप्ले डिवाइस पर स्ट्रीम की जाती है.

6. बधाई हो

बधाई हो! आपने WebRTC प्रोटोकॉल की मदद से, वेबकैम से Google Nest के डिसप्ले डिवाइस पर स्ट्रीम करने का तरीका सीखा.

ज़्यादा जानें

• स्मार्ट होम डिवाइस की विशेषताएं
• Actions on Google: Node.js का इस्तेमाल करके स्मार्ट होम का नमूना
• स्मार्ट होम कार्रवाइयों की जांच करना और उन्हें शेयर करना