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

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

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

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

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

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

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

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

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

2. शुरू करें

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

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

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

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

$ npm install -g firebase-tools

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

$ firebase --version

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

$ firebase login

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

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

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

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. क्लाउड फ़ंक्शन को डिफ़ॉल्ट फ़ाइलों के साथ कॉन्फ़िगर करें. साथ ही, पक्का करें कि आप प्रोजेक्ट के सैंपल में मौजूदा 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 सेशन की जानकारी का प्रोटोकॉल (एसडीपी) मैसेज

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

EXECUTE इंटेंट को हैंडल करें

EXECUTE इंटेंट, निर्देश की मदद से डिवाइस की स्थिति अपडेट करता है. जवाब आपको हर निर्देश की स्थिति दिखाता है—उदाहरण के लिए, SUCCESS, ERROR या PENDING—और नए डिवाइस की स्थिति.

• EXECUTE इंटेंट को हैंडल करने के लिए, functions/index.js फ़ाइल में Firebase प्रोजेक्ट का signaling एंडपॉइंट दिखाने के लिए, EXECUTE इंटेंट में बदलाव करें:

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 स्ट्रीम को खत्म करने के लिए, 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 सीएलआई के साथ डिप्लॉय करें:

$ 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. Actions कंसोल में, डेवलप करें > खाता लिंक करना चुनें.
2. OAuth क्लाइंट की जानकारी सेक्शन में, इससे जुड़े टेक्स्ट बॉक्स में यह जानकारी डालें:

3. सेव करें > जांच करें पर क्लिक करें.

5. वर्चुअल WebRTC कैमरे की जांच करें

1. उस Firebase यूआरएल पर जाएं जो आपको अपने Firebase प्रोजेक्ट को डिप्लॉय करते समय दिखा था. आपको नीचे दिया गया इंटरफ़ेस दिखता है, जो CameraStream क्लाइंट ऐप्लिकेशन है:

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

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

1. Google Home ऐप्लिकेशन में, Add > Works with Google पर टैप करें.

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

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

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

WebRTC की स्ट्रीम शुरू करना

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

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

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

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

6. बधाई हो

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

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

• स्मार्ट होम डिवाइस से जुड़ी अहम बातें
• Actions on Google: Node.js का इस्तेमाल करके स्मार्ट होम सैंपल
• स्मार्ट होम ऐक्शन की जांच करना और उन्हें शेयर करना