WebRTC ile CameraStream uygulama

1. Başlamadan önce

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

Ön koşullar

• Buluttan buluta taşımayla ilgili başlangıç kılavuzunu inceleyin.

Neler öğreneceksiniz?

• Akıllı ev bulut hizmeti dağıtma.
• Hizmetinizi Google Asistan'a bağlama
• WebRTC protokolü ile Google Nest ekran cihazına içerik aktarma.

İ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üğü destekleyebilecek yerleşik veya harici bir web kamerası cihazı.
• Google Nest ekran cihazı.

2. Başlayın

Firebase CLI'yi yükleme

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

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'nin doğru şekilde yüklendiğini doğrulayın:

$ firebase --version

3. Firebase CLI'yi 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 kod laboratuvarının kaynak kodu, web kamerası ile Google akıllı ev ekran cihazı arasında WebRTC oturumunu kuran, pazarlık 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 indir

• Bu GitHub deposunu kopyalayı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 edip izlemek için ön uç kullanıcı arayüzü içeren public alt dizini.
• functions alt dizini: Firebase ve Realtime Database için Cloud Functions ile kamerayı yöneten, tamamen uygulanmış bir bulut hizmeti içerir.

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

// TODO: Implement full SYNC response.

Firebase projesi oluşturma

1. Firebase'e gidin.
2. Proje oluştur'u tıklayın ve projenizin adını girin.
3. Sözleşme onay kutusunu işaretleyin ve Devam'ı tıklayın. Sözleşme onay kutusu yoksa bu adımı atlayabilirsiniz.
   
4. Firebase projeniz oluşturulduktan sonra proje kimliğini bulun. Projeye Genel Bakış'a gidin ve ayarlar simgesini > Proje Ayarları'nı tıklayın.
   
5. Projeniz Genel sekmesinde listelenir.
   

Firebase'e bağlanma

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

$ cd camerastream-start
$ firebase use <firebase-project-id>

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

$ cd functions
$ npm install

3. Aşağıdaki mesajı görürseniz yoksayabilirsiniz. Bu uyarı, eski bağımlılıklardan kaynaklanmaktadı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'i 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 Session Description Protocol (SDP) Mesajları

SDP mesajlarının alışverişi, 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ının parametrelerini görüşmek için kullanılır.

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

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

2. Realtime Database konumu açılır menüsünden, veritabanınızı barındırmak için 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 bu veritabanına referans vermeniz 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 daha önce 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ı ekle bölümünde <script> etiketini kullan'ı seçin.
8. firebasebaseConfig nesnesinden kopyaladığınız değerleri 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 Konsol'a 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

Action'ınızı 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 gerçekleşen bir SYNC intent'i. 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ü ile yanıt vermeniz gerekir.
• Asistan bir cihazı kullanıcı adına kontrol etmek istediğinde oluşan bir EXECUTE/QUERY intent'i. İstekte bulunulan her cihazın yürütme durumunu içeren bir JSON yükü ile yanıt vermeniz gerekir.

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

SYNC yanıtını güncelleme

1. functions/index.js dosyasına gidin. 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
      },
    }],
  },
};
});

3. USER_ID, kodda tanımlanmamış. const _ = require('underscore'); alanına aşağıdakileri ekleyin:

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

EXECUTE niyetini işleme

EXECUTE intent, 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 intent'i işlemek için EXECUTE intent'i, 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) işleme

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

index.js

'use strict';
.....

var allowList = ['https://www.gstatic.com','https://<firebase-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ırma işlemini işleme

WebRTC yayını sonlandırma işlemini işlemek için public/webrtc_generator.js dosyasına Firebase "sinyal verme" işlevi 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üncellenmiş bulut karşılama hizmetini 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

Geliştirici Konsolu projenizi yapılandırma

1. 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.

Buluttan buluta entegrasyonu seçin

Geliştirici Konsolu'ndaki Proje Ana Sayfası'nda Buluttan buluta bölümünde Buluttan buluta entegrasyon ekle'yi seçin.

1. Bir entegrasyon adı girin ve Cihaz türü bölümünde Kamera'yı seçin. 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'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. Developer 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ğlantısı 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 kamerayı 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şmesi için izin verin. İstemcide web kameranızdan gelen bir video feed'i görünür.

Akıllı eve bağlantı CameraStream işlemi

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

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

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

4. Geri dön'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 kamerasını yayınla" deyin.
• Google akıllı ekran cihazınızda Ev kontrolü > Kamera > WebRTC kamerası'na dokunun.

Google akıllı ev CameraStream istemci uygulamasında, Teklif SPD'sinin ve Yanıt SDP'sinin başarıyla oluşturulduğunu ve paylaşıldığını görürsünüz. Web kameranızdan gelen görüntü, WebRTC ile Google akıllı ekran cihazınıza aktarılır.

6. Tebrikler

Tebrikler! WebRTC protokolünü kullanarak 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 kullanan akıllı ev örneği
• Akıllı ev işlemlerini test etme ve paylaşma