WebRTC ile CameraStream'i uygulama

1. Başlamadan önce

CameraStream özelliği akıllı ekranlara, Chromecast cihazlarına ve akıllı telefonlara video feed'i akışı olan cihazlara aittir. WebRTC protokolü artık CameraStream özelliğinde desteklenmektedir. Böylece, bir kamera cihazından Google Nest ekran cihazına başlatma ve akış gecikmesini büyük ölçüde azaltabilirsiniz.

Ön koşullar

• Bulut-bulut primerini inceleyin.

Neler öğreneceksiniz?

• Akıllı ev bulut hizmeti nasıl dağıtılır?
• Hizmetinizi Google Asistan'a bağlama.
• WebRTC protokolüyle Google Nest ekran cihazına yayın yapma.

Gerekenler

• Google Chrome gibi bir web tarayıcısı.
• Google Home uygulamasına sahip bir iOS veya Android cihaz.
• Node.js sürüm 10.16 veya sonraki sürümler.
• Firebase için Blaze (kullandıkça öde) planı.
• Tam HD çözünürlüğü destekleyen dahili ya da harici web kamerası cihazı.
• Google Nest ekran cihazı.

2. Başlayın

Firebase CLI'yı yükleme

Firebase CLI, web uygulamalarınızı yerel olarak sunmanıza ve Firebase Hosting'e dağıtmanıza olanak tanır.

Firebase CLI'yı yüklemek için şu adımları uygulayın:

1. Terminalinizde Firebase CLI'yı indirip yükleyin:

$ npm install -g firebase-tools

2. KSA'nın doğru şekilde yüklendiğini doğrulayın:

$ firebase --version

3. Firebase CLI'yı Google Hesabınızla yetkilendirin:

$ firebase login

Actions projesi oluşturma ve yapılandırma

1. İşlemler konsoluna gidin ve ardından Yeni proje'yi tıklayın.
2. Proje adı metin kutusuna proje için bir ad girin ve ardından Proje oluştur'u tıklayın.

3. Ne tür bir işlem oluşturmak istiyorsunuz? sayfasında Akıllı ana sayfa > Derlemeye başla'yı tıklayın. Proje, Actions konsolunda açılır.

4. Geliştir > Çağrı'yı tıklayın.
5. Görünen ad metin kutusuna işlem için bir ad girin ve Kaydet'i tıklayın. Bu ad, daha sonra kurulum yapılacak bir cihaz olduğunda Google Home uygulamasında görünür. Bu codelab için görünen ad olarak WebRTC Codelab değerini girdik ancak farklı bir ad kullanabilirsiniz.

6. İşlemler'i tıklayın.
7. Karşılama URL'si metin kutusuna https://example.com gibi bir yer tutucu URL girin.

CameraStream istemci uygulamasını çalıştırın

Bu codelab'in kaynak kodu, web kamerası ile Google akıllı ev ekran cihazı arasında WebRTC oturumu oluşturan, pazarlık yapan ve WebRTC oturumunu düzenleyen bir WebRTC istemcisi içerir.

CameraStream WebRTC istemci uygulamasını çalıştırmak için aşağıdakilerden birini yapın:

• Kaynak kodunu geliştirme makinenize indirmek için aşağıdaki düğmeyi tıklayın:

file_downloadKaynak kodu indirme

• Bu GitHub deposunu klonlayın:

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

Kod, aşağıdaki dizinleri içerir:

• Derlediğiniz başlangıç kodunu içeren camerastream-start dizini.
• Bitmiş codelab'in çözüm kodunu içeren camerastream-done dizini.

camerastream-start dizini aşağıdaki alt dizinleri içerir:

• Kamera cihazınızın durumunu kolayca kontrol etmek ve izlemek için ön uç kullanıcı arayüzü içeren public alt dizini.
• Kamerayı Firebase için Cloud Functions ve Realtime Database ile yöneten ve tamamen uygulanan bir bulut hizmeti içeren functions alt dizini.

Başlangıç kodu, kodu eklemeniz veya değiştirmeniz gereken yeri belirten TODO yorumu içerir. Örneğin:

// TODO: Implement full SYNC response.

Firebase'e bağlanma

1. camerastream-start dizinine gidin ve ardından Actions projenizle Firebase CLI'ı ayarlayın:

$ cd camerastream-start
$ firebase use PROJECT_ID

2. camerastream-start dizininde functions klasörüne gidip gerekli tüm bağımlılıkları yükleyin:

$ cd functions
$ npm install

3. Aşağıdaki mesajı görürseniz görmezden gelin. Bu uyarı, daha eski bağımlılıklardan kaynaklanır. Daha fazla bilgi için bu GitHub sorununu inceleyin.

found 5 high severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

4. Firebase projesini başlatın:

$ firebase init

5. İşlevler ve Barındırma'yı seçin. Bu işlem, projeniz için gerekli API'leri ve özellikleri başlatır.

? 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'ı varsayılan dosyalarla yapılandırın ve proje örneğindeki mevcut index.js ve package.json dosyalarının üzerine yazmadığınızdan emin olun:

? 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. Hosting'i proje kodundaki public dizini ile yapılandırın ve mevcut index.html dosyasını kullanın:

? 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 Oturum Açıklama Protokolü (SDP) Mesajları

SDP mesaj alışverişi, WebRTC akışı kurmanın önemli bir adımıdır. SDP, bir multimedya oturumunun özelliklerini açıklayan metin tabanlı bir protokoldür. WebRTC'de kullanılan codec'ler, katılımcıların IP adresleri ve medya aktarımı için kullanılan bağlantı noktaları gibi P2P direkt bağlantı parametreleri için pazarlık yapar.

Web kameranız ile akıllı ev CameraStream istemci uygulaması arasında SDP mesajları alışverişi yapmak için gerçek zamanlı veritabanını ana makine olarak kullanmak için şu adımları uygulayın:

1. Firebase konsolunda Derleme > Gerçek Zamanlı Veritabanı > Veritabanı oluştur'u tıklayın.

2. Gerçek zamanlı veritabanı konumu açılır menüsünden veritabanınızı barındıracağınız uygun bir konum seçin.

3. Test modunda başlat'ı seçip Etkinleştir'i tıklayın. Realtime Database etkinleştirildiğinde, CameraStream istemci uygulamasından veritabanına referans verebilmeniz gerekir.

4. Kurulum iş akışını başlatmak için Firebase konsolunda Proje ayarları > Proje ayarları > Web Uygulamanıza Firebase'i ekleyin seçeneğini belirleyin.
5. Firebase projenize zaten bir uygulama eklediyseniz platform seçeneklerini görüntülemek için Uygulama ekle'yi tıklayın.
6. Uygulama için My web app gibi bir takma ad girip Uygulamayı kaydet'i tıklayın.
7. Firebase SDK'sı ekleyin bölümünde <script> etiketi kullan'ı seçin.
8. firebasebaseConfig nesnesindeki değerleri kopyalayın ve camaerastream-start/public/webrtc_generator.js dosyasına yapıştırın.

const firebaseConfig = {
  apiKey: "XXXXX",
  authDomain: "XXXXX",
  projectId: "XXXXX",
  storageBucket: "XXXXX",
  messagingSenderId: "XXXXX",
  appId: "XXXXX",
  measurementId: "XXXXX"
};

9. İşlemi tamamlamak için Konsola devam et'i tıklayın. Yeni oluşturulan web uygulamasını Proje ayarları sayfasında görebilirsiniz.

4. WebRTC kamerası oluşturma

İşleminizi yapılandırdığınıza göre bulut hizmetinizin aşağıdaki amaçları işlemesi gerekir:

• Asistan, kullanıcının hangi cihazları bağladığını öğrenmek istediğinde oluşan SYNC amacı. Kullanıcı bir hesabı bağladığında hizmetinize gönderilir. Kullanıcının cihazları ve sağladıkları JSON yüküyle yanıt vermelisiniz.
• Asistan, bir cihazı kullanıcı adına kontrol etmek istediğinde gerçekleşen EXECUTE/QUERY niyeti. İstenen her cihazın yürütme durumuyla birlikte bir JSON yüküyle yanıt vermeniz gerekir.

Bu bölümde, bu amaçları gerçekleştirmek için daha önce dağıttığınız işlevleri güncellersiniz.

SYNC yanıtını güncelle

1. functions/index.js dosyasına gidin. Asistan'dan gelen isteklere yanıt vermek için kullanılacak kodu içerir.
2. Cihazın meta verilerini ve özelliklerini döndürmek için SYNC amacını düzenleyin:

dizin.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 amacını işleme

EXECUTE amacı, cihaz durumunu güncellemek için komutları işler. Yanıt, her bir komutu (ör. SUCCESS, ERROR veya PENDING) ve yeni cihaz durumunu döndürür.

• Bir EXECUTE amacını işlemek için functions/index.js dosyasında Firebase projesinin signaling uç noktasını döndürmek üzere EXECUTE amacını düzenleyin:

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

Kaynaklar arası kaynak paylaşımını (CORS) işleme

• SDP'yi göndermek için POST yönteminin kullanılması nedeniyle CORS'u işlemek için Firebase Hosting URL'sini functions/index.js dosyasındaki allowlist dizisine ekleyin:

dizin.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 hakkında daha fazla bilgi için Kaynaklar Arası Kaynak Paylaşımı (CORS) bölümüne bakın.

Akışın Feshi

• WebRTC akış sonlandırma işlemini gerçekleştirmek için public/webrtc_generator.js dosyasına Firebase "sinyal" işlev URL'sini ekleyin:

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'e dağıtma

• Firebase'e dağıtmak için, güncel bulut karşılama isteğini Firebase CLI ile dağıtın:

$ firebase deploy

Bu komut, bir web uygulaması ve birkaç Cloud Functions for Firebase dağıtır:

...

✔ Deploy complete!

Project Console: https://console.firebase.google.com/project/<project-id>/overview
Hosting URL: https://<project-id>.web.app

Hesap bağlamayı etkinleştir

Projeniz dağıtıldıktan sonra hesap bağlamayı etkinleştirmek için aşağıdaki adımları uygulayın:

1. İşlemler konsolunda, Geliştir > Hesap bağlama'yı seçin.
2. OAuth istemci bilgileri bölümünde, ilgili metin kutularına aşağıdaki bilgileri girin:

3. Kaydet > Test Et'i tıklayın.

5. Sanal WebRTC kamerasını test etme

1. Firebase projenizi dağıtırken gördüğünüz Hosting URL'sine gidin. Aşağıdaki CameraStream istemci uygulaması arayüzüdür:

2. Yerel Video Çözünürlüğü panelinde istediğiniz videoyu seçin.
3. Web kameranıza ve mikrofonunuza erişmesi için CameraStream istemci uygulamasına izin verin. İstemcide web kameranızdan bir video feed'i gösterilir.

Akıllı ev bağlantısı CameraStream İşlemi

1. Google Home uygulamasında, Ekle > Google ile çalışır'a dokunun.

2. Oluşturduğunuz İşlemi arayın ve seçin.

3. Daha sonra ihtiyaç duyduğunuz için benzersiz, beş karakterli alfanümerik koda dikkat edin.

4. Beni geri götür'e dokunun. WebRTC kamerası, Google Home uygulamasında yapınıza eklenir.

WebRTC akışı başlatma

1. CameraStream istemci uygulamasının web sayfasında, Hesap bağlama jetonu değeri metin kutusuna son bölümdeki alfanümerik kodu girin ve ardından Gönder'i tıklayın.

2. Google akıllı ekran cihazınızdan WebRTC oturumu başlatmak için aşağıdakilerden birini yapın:

• "Ok Google, WebRTC Kamera'yı canlı oynat" deyin.
• Google akıllı ekran cihazınızda Ev kontrolü > Kamera > WebRTC kamerası'na dokunun.

Google akıllı ev CameraStream istemci uygulamasından, SPD Teklifi ve Yanıt SDP'sinin başarıyla oluşturulduğunu ve değiştirildiğini görüyorsunuz. Web kameranızdaki resim, WebRTC ile Google akıllı ekran cihazınıza aktarılır.

6. Tebrikler

Tebrikler! WebRTC protokolüyle web kameranızdan Google Nest ekran cihazına nasıl yayın yapacağınızı öğrendiniz.

Daha fazla bilgi

• Akıllı ev cihazı özellikleri
• Actions on Google: Node.js kullanılarak yapılan akıllı ev örneği
• Akıllı ev Actions'ı test etme ve paylaşma