WebRTC ile CameraStream uygulama

1. Başlamadan önce

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

Ön koşullar

• Buluttan buluta çalışma yardımını inceleyin.

Neler öğreneceksiniz?

• Akıllı ev bulut hizmeti dağıtma.
• 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 10.16 veya sonraki bir sürümü.
• Firebase için Blaze (kullandıkça öde) planı.
• Tam HD çözünürlüğü destekleyebilen dahili veya harici web kamerası cihazı.
• Google Nest ekran cihazı.

2. Başlayın

Firebase CLI'ı yükleme

Firebase CLI, web uygulamalarınızı yerel olarak sunmanızı ve Firebase Hosting'e dağıtmanızı sağlar.

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

1. Terminalinizde Firebase CLI'ı 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'ı Google Hesabınızla yetkilendirin:

$ firebase login

Actions projesi oluşturma ve yapılandırma

1. Actions Console'a gidin ve 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 İşlem oluşturmak istiyorsunuz? sayfasında Akıllı ana sayfa'yı tıklayın > Derlemeye başlayın. Proje, Actions konsolunda açılır.

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

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

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

Bu codelab'in kaynak kodu, web kamerası ile Google akıllı ev ekranı cihazı arasındaki WebRTC oturumunu oluşturan, bu oturumla ilgili pazarlık yapan ve bu oturumu yöneten 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 indir

• Bu GitHub deposunu klonlayın:

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

Bu kod aşağıdaki dizinleri içerir:

• Derlemenizde kullanacağınız başlangıç kodunu içeren camerastream-start dizini.
• Tamamlanmış codelab'in çözüm kodunu içeren camerastream-done dizini.

camerastream-start dizini şu alt dizinleri içerir:

• Kamera cihazınızın durumunu kolayca kontrol etmenizi ve izlemenizi sağlayan bir ön uç kullanıcı arayüzü içeren public alt dizini.
• Kamerayı Firebase için Cloud Functions ve Realtime Database ile yöneten tümüyle uygulanmış bir bulut hizmetini içeren functions alt dizini.

Başlangıç kodu, aşağıdaki örnekte gösterildiği gibi, kodu eklemeniz veya değiştirmeniz gereken yeri belirten TODO yorumları içerir:

// 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 gidin ve gerekli tüm bağımlılıkları yükleyin:

$ cd functions
$ npm install

3. Aşağıdaki mesajı görürseniz yoksayın. Bu uyarı, eski bağımlılıklardan kaynaklanır. Daha fazla bilgi için bu GitHub sorununa bakın.

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

4. Bir Firebase projesini başlatın:

$ firebase init

5. İşlevler'i 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. Proje kodundaki public diziniyle Hosting'i 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 Oturumu Açıklama Protokolü (SDP) Mesajları

SDP mesajı alışverişi, WebRTC akışı oluşturmada önemli bir adımdır. SDP, bir multimedya oturumunun özelliklerini açıklayan metin tabanlı bir protokoldür. WebRTC'de eşler arası bağlantının parametrelerini (ör. kullanılan codec'ler, katılımcıların IP adresleri ve medya aktarımı için kullanılan bağlantı noktaları) belirlemek için kullanılır.

Web kameranız ve akıllı evinizin CameraStream istemcisi uygulaması arasında SDP mesajları alışverişi yapmak üzere ana makine olarak Realtime Database'i kullanmak için aşağıdaki adımları uygulayın:

1. Firebase konsolunda Oluştur > Gerçek Zamanlı Veritabanı > Veritabanı oluşturun.

2. Realtime Database konumu açılır menüsünden, veritabanınızı barındıracağınız uygun konumu seçin.

3. Test modunda başlat'ı seçin ve ardından Etkinleştir'i tıklayın. Realtime Database etkinken CameraStream istemci uygulamasından referans verebilmeniz gerekir.

4. Firebase konsolunda Proje ayarları > Proje ayarları > Kurulum iş akışını başlatmak için Firebase'i web uygulamanıza ekleyin.
5. Firebase projenize daha önce 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 girin ve ardından Uygulamayı kaydet'i tıklayın.
7. Firebase SDK'sı ekleyin bölümünde <script> etiketi kullanın.
8. firebasebaseConfig nesnesindeki değerleri kopyalayıp 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örürsünüz.

4. WebRTC kamerası oluştur

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

• Asistan, kullanıcının hangi cihazları bağladığını öğrenmek istediğinde gerçekleşen SYNC niyetidir. Bu mesaj, kullanıcı bir hesap bağladığında hizmetinize gönderilir. Kullanıcının cihazlarının JSON yükü ve yetenekleriyle yanıt vermelisiniz.
• Asistan, bir cihazı kullanıcı adına kontrol etmek istediğinde gerçekleşen EXECUTE/QUERY niyetidir. İstenen her cihazın yürütme durumunu içeren bir JSON yüküyle yanıt vermeniz gerekir.

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

SYNC yanıtını güncelle

1. functions/index.js dosyasına gidin. Bu kod, Asistan'dan gelen isteklere yanıt verecek kodu içerir.
2. Cihazın meta verilerini ve özelliklerini döndürmek için SYNC intent'ini düzenleyin:

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 amacını yerine getirin

EXECUTE intent, cihaz durumunu güncelleme komutlarını işler. Yanıt, her komutun durumunu (örneğin, SUCCESS, ERROR veya PENDING) ve yeni cihaz durumunu döndürür.

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

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

Kaynaklar arası kaynak paylaşımını (CORS) yönetme

• SDP'yi gönderirken POST yönteminin kullanıldığı CORS'yi işlemek için Firebase Barındırma URL'sini functions/index.js dosyasındaki allowlist dizisine ekleyin:

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.

CORS hakkında daha fazla bilgi için Kaynaklar Arası Kaynak Paylaşımı (CORS) bölümüne bakın.

Yayının Sonlandırılmasını İşleme

• WebRTC akışının sonlandırılma işlemini gerçekleştirmek için Firebase "sinyal" özelliğini ekleyin public/webrtc_generator.js dosyasının işlev URL'si:

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ğıtım yapmak için, güncellenmiş bulut karşılamayı Firebase CLI ile dağıtın:

$ firebase deploy

Bu komut bir web uygulaması ile çeşitli Firebase için Cloud Functions işlevlerini 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 şu adımları uygulayın:

1. Actions Console'da Geliştir'i seçin > Hesap bağlama.
2. OAuth istemci bilgileri bölümünde ilgili metin kutularına aşağıdaki bilgileri girin:

3. Kaydet > Test edin.

5. Sanal WebRTC kamerayı test etme

1. Firebase projenizi dağıttığınızda gördüğünüz Hosting URL'sine gidin. KameraStream istemci uygulaması olan aşağıdaki arayüzü görürsünüz:

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

Akıllı ev CameraStream işleminin bağlantısı

1. Google Home uygulamasında Ekle > Google ile çalışır.

2. Oluşturduğunuz işlemi arayın ve ardından işlemi seçin.

3. Daha sonra ihtiyaç duyacağınız için beş karakterli, alfanümerik kodu not edin.

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

WebRTC akışı başlatma

1. CameraStream istemci uygulamasının web sayfasında, Hesap bağlama jetonunun değeri metin kutusuna son bölümdeki alfanümerik kodu girin ve 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ı aktar" deyin.
• Google akıllı ekran cihazınızda Ev kontrolü > Kamera > WebRTC kamera.

Google akıllı ev CameraStream istemci uygulamasında Teklif SPD'si ve Yanıt SDP'sinin başarıyla oluşturulup 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 yayın yapmayı öğrendiniz.

Daha fazla bilgi

• Akıllı ev cihazı özellikleri
• Actions on Google: Node.js kullanan akıllı ev örneği
• Akıllı ev işlemlerini test etme ve paylaşma