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. Böylece bir kamera cihazından Google Nest ekran cihazına başlatma ve akış gecikmesini önemli ölçüde azaltabilirsiniz.

Ön koşullar

• Cloud-to-cloud primer sayfasını inceleyin.

Neler öğreneceksiniz?

• Akıllı ev bulut hizmeti nasıl dağıtılır?
• Hizmetinizi Google Asistan'a bağlama
• WebRTC protokolüyle bir Google Nest görüntülü cihazda yayın yapma.

Gerekenler

• Google Chrome gibi bir web tarayıcısı.
• Google Home uygulamasının yüklü olduğu 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 yerleşik veya harici bir 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ızı ve Firebase Hosting'e dağıtmanızı sağlar.

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

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

$ npm install -g firebase-tools

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

$ firebase --version

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

$ firebase login

Actions projesi oluşturma ve yapılandırma

1. Actions Console'a 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ı ev > 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 İşlem için bir ad girin ve ardından Kaydet'i tıklayın. Bu ad, daha sonra kurulacak bir cihaz olduğunda Google Home uygulamasında görünür. Bu codelab'de görünen ad olarak WebRTC Codelab değerini girdik 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'si girin.

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

Bu codelab'in kaynak kodu, web kamerası ile Google akıllı ev görüntüleme cihazı arasında WebRTC oturumu oluşturan, WebRTC oturumunu oluşturan, bu oturumun müzakeresini yapan ve yöneten 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

• Şu GitHub deposunu klonlayın:

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

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

• Derleme sırasında, başlangıç kodunu içeren camerastream-start dizini.
• Tamamlanan 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 etmenizi ve izlemenizi sağlayan bir ön uç kullanıcı arayüzü içeren public alt dizini.
• Kamerayı Cloud Functions for Firebase ve Realtime Database ile yöneten eksiksiz bir bulut hizmetini içeren functions alt dizini.

Başlangıç kodunda, kodu nereye eklemeniz veya değiştirmeniz gerektiğini belirten TODO yorum bulunur. Örnek:

// 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ı eski bağımlılıklardan kaynaklanıyor. Daha fazla bilgi için bu GitHub sorununa göz atın.

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

4. Bir Firebase projesini başlatma:

$ 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. 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 mesajlarının değişimi, WebRTC akışı oluşturmada önemli bir adımdır. SDP, multimedya oturumunun özelliklerini açıklayan metin tabanlı bir protokoldür. WebRTC'de eşler arası bağlantının parametreleri (ör. kullanılan codec'ler, katılımcıların IP adresleri ve medya aktarımı için kullanılan bağlantı noktaları) üzerinde anlaşmak için kullanılır.

Web kameranızla akıllı ev CameraStream istemci uygulaması arasında SDP mesajları alışverişi yapmak üzere Realtime Database'i ana makine olarak kullanmak için şu adımları uygulayın:

1. Firebase konsolunda, Derleme > Realtime Database > Veritabanı oluştur'u tıklayın.

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, ardından Etkinleştir'i tıklayın. Realtime Database etkin durumdayken CameraStream istemci uygulamasından buna başvuruda bulunabilmeniz gerekir.

4. Firebase konsolunda Proje ayarları > Proje ayarları > Firebase'i Web Uygulamanıza ekleyin'i seçerek kurulum iş akışını başlatın.
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 girin ve Uygulamayı kaydet'i tıklayın.
7. Firebase SDK'sı ekle bölümünde <script> etiketi kullan'ı seçin.
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ş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ı bilmek istediğinde gerçekleşen SYNC amacıdır. Bu, kullanıcı bir hesap bağladığında hizmetinize gönderilir. Kullanıcının cihazlarını ve özelliklerini içeren bir JSON yüküyle yanıt vermelisiniz.
• Asistan, bir cihazı kullanıcı adına kontrol etmek istediğinde gerçekleşen EXECUTE/QUERY amacıdır. İstenen her cihazın yürütme durumunu içeren bir JSON yüküyle yanıt vermelisiniz.

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

SYNC yanıtını güncelle

1. functions/index.js dosyasına gidin. Asistan'dan gelen isteklere yanıt vermek için gereken kodu içerir.
2. SYNC amacını, cihazın meta verilerini ve özelliklerini döndürecek şekilde 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

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

• Bir EXECUTE amacını işlemek için EXECUTE amacını, functions/index.js dosyasında Firebase projesinin signaling uç noktasını döndürecek şekilde 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],
    },
  };

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

• SDP'yi gönderirken POST yönteminin kullanılması nedeniyle CORS'yi işlemek için Firebase Hosting 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) başlıklı makaleyi inceleyin.

Yayının Sonlandırılmasını Yönetme

• WebRTC akışı sonlandırma işlemini işlemek için Firebase "sinyal" işlevi URL'sini public/webrtc_generator.js dosyasına 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ğıtım yapmak için, güncellenmiş bulut istek karşılama isteğini Firebase CLI ile dağıtın:

$ firebase deploy

Bu komut bir web uygulamasını ve birkaç Cloud Functions for Firebase'i 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ştirme > 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ğıttığınızda gördüğünüz Hosting URL'sine gidin. CameraStream 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österilir.

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

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

2. Oluşturduğunuz Action'ı bulup seçin.

3. Daha sonra ihtiyacınız olacağından beş karakterli benzersiz alfasayısal koda dikkat 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 jetonu değeri metin kutusunun son bölümünde bulunan alfasayısal 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, akış WebRTC Kamerası" deyin.
• Google akıllı ekran cihazınızda Ev kontrolü > Kamera > WebRTC kamerası'na dokunun.

Google akıllı ev CameraStream istemci uygulamasında, Offer SPD ve Answer SDP'nin başarıyla oluşturulduğunu ve takas edildiğini görüyorsunuz. Web kameranızdan alınan görüntü, WebRTC ile Google akıllı ekran cihazınıza aktarılır.

6. Tebrikler

Tebrikler! Web kameranızdan WebRTC protokolüyle bir Google Nest ekran cihazına yayın yapmayı öğrendiniz.

Daha fazla bilgi

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