WebRTC ile CameraStream uygulama

1. Başlamadan önce

CameraStream özelliği, akıllı ekranlara, Chromecast cihazlara ve akıllı telefonlara video feed'leri yayınlama özelliğine sahip cihazlara aittir. WebRTC protokolü artık CameraStream özelliğinde destekleniyor. Bu sayede, bir kamera cihazından Google Nest ekran cihazına başlatma ve yayın gecikmesini büyük ölçüde azaltabilirsiniz.

Ön koşullar

• Buluttan buluta aktarma hakkında temel bilgiler başlıklı makaleyi inceleyin.

Neler öğreneceksiniz?

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

İhtiyacınız olanlar

• 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ı.
• Full 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ıza ve Firebase Hosting'e dağıtmanıza olanak tanır.

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

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

$ npm install -g firebase-tools

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

$ firebase --version

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

$ firebase login

Proje oluşturma

1. Google Home Developer Console'a gidin.
2. Proje Oluştur'u tıklayın, proje için bir ad girin ve Proje Oluştur'u tıklayın.

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

Bu codelab'in kaynak kodu, web kamerası ile Google akıllı ev ekranı cihazı arasında WebRTC oturumunu oluşturan, görüşen 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 kodu 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
  

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

• Üzerine geliştirme yapacağınız başlangıç kodunu içeren camerastream-start dizini.
• Tamamlanmış 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.
• functions alt dizini. Bu dizin, kamerayı Cloud Functions for Firebase ve Realtime Database ile yöneten, tam olarak uygulanmış bir bulut hizmeti içerir.

Başlangıç kodu, aşağıdaki örnekte olduğu gibi kodu nereye eklemeniz veya değiştirmeniz gerektiğini belirten TODO yorumları içerir:

// TODO: Implement full SYNC response.

Firebase'i Google Home Play Console projenize ekleme

1. yöntem: Firebase konsolu üzerinden

1. Firebase'e gidin.
2. Firebase projesi oluştur'u tıklayın.
   
3. Proje oluşturun ekranında Firebase'i Google Cloud projesine ekle'yi tıklayın.
   
4. Başlayın ekranında, Google Home Developer Console'da yeni oluşturduğunuz Google Cloud projesini seçin ve Devam'ı tıklayın.
   

2. yöntem: Firebase CLI aracılığıyla

firebase projects:addfirebase

Firebase'i eklemek için az önce oluşturduğunuz Google Home Play Console projesini seçin.

Firebase, Google Home Play Console projenize eklendiğinde Firebase konsolunda görünür. Firebase projesinin proje kimliği, Google Home Play Console proje kimliğinizle eşleşir.

Firebase'e bağlanma

1. camerastream-start dizinine gidin ve Firebase CLI'yı Actions projenizle kurun:

$ 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ıklar nedeniyle gösteriliyor. 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. Firebase projesi 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 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'ı 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 barındırmayı 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 Session Description Protocol (SDP) Messages

SDP mesajlarının değişimi, WebRTC akışının oluşturulmasında önemli bir adımdı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 eşler arası bağlantı parametrelerini görüşmek için kullanılır.

Realtime Database'i web kameranız ile akıllı ev CameraStream istemci uygulaması arasında SDP mesajları alışverişi için ana makine olarak kullanmak üzere aşağıdaki adımları uygulayın:

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

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

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

4. Kurulum iş akışını başlatmak için Firebase konsolunda Proje ayarları > Proje ayarları > Firebase'i web uygulamanıza ekleyin'i seçin.
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ını ekleyin bölümünde <script> etiketini kullan'ı seçin.
8. Değerleri firebasebaseConfig nesnesinden 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 git'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 artık 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 bir SYNC amaç. Bu, kullanıcı bir hesabı bağladığında hizmetinize gönderilir. Kullanıcının cihazlarının ve özelliklerinin JSON yüküyle yanıt vermelisiniz.
• Asistan, kullanıcı adına bir cihazı kontrol etmek istediğinde gerçekleşen EXECUTE/QUERY amaç. İstenen her cihazın yürütme durumuyla ilgili bir JSON yüküyle yanıt vermelisiniz.

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

SYNC yanıtını güncelleme

1. functions/index.js dosyasına gidin. Asistan'dan gelen isteklere yanıt verme kodu bulunur.
2. Cihazın meta verilerini ve özelliklerini döndürmek için SYNC amacını 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
      },
    }],
  },
};
});

3. USER_ID kodda tanımlanmamış. const _ = require('underscore'); bölümüne aşağıdakileri ekleyin:

// Hardcoded user ID
const USER_ID = '123';

EXECUTE amacını ele alma

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

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

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) işleme

SDP'yi göndermek için POST yöntemi kullanıldığından kaynaklar arası istek paylaşımı (CORS) sorununu çözmek için Firebase Hosting URL'sini functions/index.js dosyasındaki allowlist dizisine ekleyin:

index.js

'use strict';
.....

var allowList = ['https://www.gstatic.com','https://<project-id>.web.app']; //TODO Add Firebase hosting URL.

CORS hakkında daha fazla bilgi için Merkezler Arası Kaynak Paylaşımı (CORS) başlıklı makaleyi inceleyin.

Akış Sonlandırmayı İşleme

WebRTC akışının sonlandırılmasını 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ğıtmak için güncellenen bulut karşılama işlevini Firebase CLI ile dağıtın:

$ firebase deploy

Bu komut, bir web uygulamasını ve çeşitli 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

Play Console projenizi yapılandırma

1. Play Console'a gidin.
2. Proje Oluştur'u tıklayın, proje için bir ad girin ve Proje Oluştur'u tıklayın.

Buluttan buluta entegrasyonu seçin

Geliştirici Konsolu'ndaki Proje Ana Sayfası'nda, Cloud-to-cloud bölümünde Add cloud-to-cloud integration'ı (Buluttan buluta entegrasyonu ekle) seçin.

1. Entegrasyon adı girin ve Cihaz türü bölümünde Kamera'yı seçin. Bu ad, daha sonra Google Home uygulamasında kurulacak bir cihaz olduğunda gösterilir. Bu codelab için görünen ad olarak WebRTC Codelab'i girdik ancak farklı bir ad kullanabilirsiniz.

2. Uygulama markalama bölümünde, uygulama simgesi için 144 x 144 piksel boyutunda ve .png adlı bir png dosyası yükleyin.

Hesap bağlamayı etkinleştirme

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

1. Play Console'a gidip projeyi açın.
2. Buluttan Buluta bölümünde, entegrasyonun yanındaki Geliştir > Düzenle'yi tıklayın.
3. Kurulum ve yapılandırma sayfasında Hesap Bağlama bölümünü bulun ve ilgili metin kutularına aşağıdaki bilgileri girin:

4. Kaydet > Test'i tıklayın.

5. Sanal WebRTC kamerasını test etme

1. Firebase projenizi dağıtırken gördüğünüz barındırma 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şim izni verin. Web kameranızdan alınan video feed'i istemcide görünür.

Akıllı ev cihazına bağlantı CameraStream İşlem

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

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

3. Daha sonra ihtiyacınız olacağından benzersiz, beş karakterli alfanümerik kodu not edin.

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

WebRTC yayını başlatma

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

Google akıllı ev CameraStream istemci uygulamasında, Offer SPD ve Answer SDP'nin başarıyla oluşturulup değiştirildiğini görürsünüz. Web kameranızdaki görüntü, 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 oluşturulan akıllı ev örneği
• Akıllı ev işlemlerini test etme ve paylaşma