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 सबडायरेक्ट्री में, पूरी तरह से लागू की गई क्लाउड सेवा होती है. यह सेवा, Cloud Functions for Firebase और Realtime Database की मदद से कैमरे को मैनेज करती है.

स्टार्टर कोड में TODO टिप्पणियां शामिल होती हैं. इनसे पता चलता है कि आपको कोड कहां जोड़ना है या बदलना है. उदाहरण के लिए:

// TODO: Implement full SYNC response.

Firebase को Google Home Developer Console प्रोजेक्ट से जोड़ना

पहला तरीका: Firebase कंसोल के ज़रिए

1. Firebase पर जाएं.
2. Firebase प्रोजेक्ट बनाएं पर क्लिक करें.
   
3. प्रोजेक्ट बनाएं स्क्रीन पर, Google Cloud प्रोजेक्ट में Firebase जोड़ें पर क्लिक करें.
   
4. शुरू करें स्क्रीन पर, Google Home Developer console में अभी-अभी बनाया गया Google Cloud प्रोजेक्ट चुनें. इसके बाद, जारी रखें पर क्लिक करें.
   

दूसरा तरीका: Firebase CLI के ज़रिए

firebase projects:addfirebase

Firebase जोड़ने के लिए, Google Home Developer Console का वह प्रोजेक्ट चुनें जिसे आपने अभी बनाया है.

Firebase को Google Home Developer Console प्रोजेक्ट में जोड़ने पर, यह Firebase Console में दिखेगा. Firebase प्रोजेक्ट का आईडी, Google Home Developer Console प्रोजेक्ट के आईडी से मैच करेगा.

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

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

$ 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. Functions और Hosting को चुनें. इससे आपके प्रोजेक्ट के लिए ज़रूरी एपीआई और सुविधाएं शुरू हो जाती हैं.

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter
 to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
 proceed)
>( ) Data Connect: Set up a Firebase Data Connect service
 ( ) Firestore: Configure security rules and indexes files for Firestore
 ( ) Genkit: Setup a new Genkit project with Firebase
 (*) Functions: Configure a Cloud Functions directory and its files
 ( ) App Hosting: Configure an apphosting.yaml file for App Hosting
 (*) Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
 ( ) Storage: Configure a security rules file for Cloud Storage
 ( ) Emulators: Set up local emulators for Firebase products
 ( ) Remote Config: Configure a template file for Remote Config
 ( ) Extensions: Set up an empty Extensions manifest
 (*) Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision
default instance
 ( ) Data Connect: Set up a Firebase Data Connect service
 ( ) Firestore: Configure security rules and indexes files for Firestore

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 क्लाइंट ऐप्लिकेशन के बीच एसडीपी मैसेज शेयर करने के लिए, Realtime Database को होस्ट के तौर पर इस्तेमाल करने के लिए, यह तरीका अपनाएं:

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

2. Realtime Database की जगह ड्रॉप-डाउन मेन्यू में, डेटाबेस को होस्ट करने के लिए कोई सही जगह चुनें.

3. टेस्ट मोड में शुरू करें को चुनें. इसके बाद, चालू करें पर क्लिक करें. Realtime Database चालू होने पर, आपको 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],
    },
  };
});

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

एसडीपी भेजने के लिए POST तरीके का इस्तेमाल करने की वजह से होने वाली CORS की समस्या को ठीक करने के लिए, functions/index.js फ़ाइल में मौजूद allowlist ऐरे में Firebase Hosting का यूआरएल जोड़ें:

index.js

'use strict';
.....

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 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 क्लाइंट ऐप्लिकेशन में, आपको दिखेगा कि Offer SDP और Answer SDP जनरेट हो गए हैं और उन्हें एक्सचेंज कर लिया गया है. WebRTC की मदद से, आपके वेबकैम से ली गई इमेज को Google स्मार्ट डिसप्ले डिवाइस पर स्ट्रीम किया जाता है.

6. बधाई हो

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

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

• स्मार्ट होम डिवाइस की खासियतें
• Actions on Google: Node.js का इस्तेमाल करके स्मार्ट होम का सैंपल
• स्मार्ट होम डिवाइसों के लिए उपलब्ध कार्रवाइयों को टेस्ट करना और शेयर करना