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

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

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

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

• क्लाउड-टू-क्लाउड प्राइमर पढ़ें.

आपको क्या सीखने को मिलेगा

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

आपको किन चीज़ों की ज़रूरत होगी

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

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

Firebase CLI इंस्टॉल करना

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

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

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

$ npm install -g firebase-tools

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

$ firebase --version

3. अपने Google खाते से Firebase CLI को अनुमति दें:

$ firebase login

प्रोजेक्ट बनाना

1. Google Home Developer Console पर जाएं.
2. प्रोजेक्ट बनाएं पर क्लिक करें. इसके बाद, प्रोजेक्ट का नाम डालें और प्रोजेक्ट बनाएं पर क्लिक करें.

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. Firebase पर जाएं.
2. प्रोजेक्ट बनाएं पर क्लिक करें और अपने प्रोजेक्ट का नाम डालें.
3. कानूनी समझौते वाले चेकबॉक्स को चुनें और जारी रखें पर क्लिक करें. अगर समझौते का चेकबॉक्स नहीं है, तो इस चरण को छोड़ा जा सकता है.
   
4. Firebase प्रोजेक्ट बन जाने के बाद, प्रोजेक्ट आईडी ढूंढें. प्रोजेक्ट की खास जानकारी पर जाएं और सेटिंग आइकॉन > प्रोजेक्ट सेटिंग पर क्लिक करें.
   
5. आपका प्रोजेक्ट, सामान्य टैब में दिखेगा.
   

Firebase से कनेक्ट करें

1. camerastream-start डायरेक्ट्री पर जाएं. इसके बाद, अपने Actions प्रोजेक्ट के साथ Firebase CLI सेट अप करें:

$ cd camerastream-start
$ firebase use <firebase-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. एक्सचेंज सेशन डिस्क्रिप्शन प्रोटोकॉल (एसडीपी) मैसेज

WebRTC स्ट्रीम सेट अप करने के लिए, एसडीपी मैसेज का आदान-प्रदान करना ज़रूरी है. एसडीपी, टेक्स्ट पर आधारित प्रोटोकॉल है. इसमें मल्टीमीडिया सेशन की विशेषताओं के बारे में बताया जाता है. इसका इस्तेमाल 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 कैमरा बनाना

ऐक्शन कॉन्फ़िगर करने के बाद, आपकी क्लाउड सेवा को इन इंटेंट को मैनेज करना होगा:

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

3. कोड में USER_ID के बारे में नहीं बताया गया है. const _ = require('underscore'); में यह जानकारी जोड़ें:

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

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

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

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

index.js

'use strict';
.....

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

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

स्ट्रीम खत्म होने की स्थिति को मैनेज करना

WebRTC स्ट्रीम को बंद करने के लिए, public/webrtc_generator.js फ़ाइल में Firebase के 'सिग्नलिंग' फ़ंक्शन का यूआरएल जोड़ें:

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 CLI की मदद से अपडेट किया गया क्लाउड फ़ुलफ़िलमेंट डिप्लॉय करें:

$ 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

Developer Console प्रोजेक्ट को कॉन्फ़िगर करना

1. Developer Console पर जाएं.
2. प्रोजेक्ट बनाएं पर क्लिक करें. इसके बाद, प्रोजेक्ट का नाम डालें और प्रोजेक्ट बनाएं पर क्लिक करें.

क्लाउड-टू-क्लाउड इंटिग्रेशन चुनना

Developer Console में प्रोजेक्ट होम पर, क्लाउड-टू-क्लाउड में जाकर, क्लाउड-टू-क्लाउड इंटिग्रेशन जोड़ें को चुनें.

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

2. ऐप्लिकेशन ब्रैंडिंग में जाकर, ऐप्लिकेशन आइकॉन के लिए png फ़ाइल अपलोड करें. यह फ़ाइल 144 x 144 पिक्सल की होनी चाहिए और इसका नाम .png होना चाहिए.

खाता जोड़ने की सुविधा चालू करना

प्रोजेक्ट डिप्लॉय होने के बाद, खाता लिंक करने की सुविधा चालू करने के लिए, यह तरीका अपनाएं:

1. Developer Console पर जाएं और प्रोजेक्ट खोलें.
2. क्लाउड-टू-क्लाउड सेक्शन में, इंटिग्रेशन के बगल में मौजूद, डिवेलप करें > बदलाव करें पर क्लिक करें.
3. सेटअप और कॉन्फ़िगरेशन पेज पर, खाता लिंक करना सेक्शन ढूंढें. इसके बाद, उससे जुड़े टेक्स्ट बॉक्स में यह जानकारी डालें:

4. सेव करें > टेस्ट करें पर क्लिक करें.

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 का इस्तेमाल करके स्मार्ट होम का सैंपल
• स्मार्ट होम ऐक्शन को टेस्ट करना और शेयर करना