Azure Blob UWP

Um Bilder in der Cloud zu speichern, ist Azure Blob Storage die günstigste Möglichkeit. Konkret schwirrt ein Preis von 1Cent pro GB und Monat durchs Internet. In diesem Artikel wird ein Bild von der Webcam nach Azure hochgeladen. Das Bild ändert sich nicht mehr und ist deswegen laut Microsoft prädestiniert für den Discount Service.

Als Plattform kommt UWP von Windows 10 zum Einsatz. Doch zunächst wird im Azure Portal per Storage (Speicherkonten) ein neues Speicherkonto angelegt, hier xamarindevimages.

Ein Speicherkonto benötigt einen oder mehrere Container vom Typ Blob. Hier einfach “img” genannt.

Die Kombination mit dem letztendlich hinterlegten Dokument, hier myblob.jpg ergibt dann die eindeutige Zugriffsurl.

https://xamarindevimages.blob.core.windows.net/img/myblob.jpg

image

Für die Entwicklung einer Software die den Azure Dienst nutzen kann, wird zur Authentifizierung ein Connection String verwendet. Diesen Zugriffsschlüssel erhält man ebenso übers Azure Portal. Am Besten auf den drei Punkten rechts im Bild den kompletten Zugriffsschlüssel anzeigen und kopieren.

image

DefaultEndpointsProtocol=https;AccountName=xamarindevimages;AccountKey=Gdol……u7==

Eigentlich sollte man die Blobs auch aus Visual Studio anlegen und verwalten können. Dazu dienen die identen Key Werte.

image

In meinen Fall konnte ich so nur einen klassischen Blob von Visual Studio aus anlegen aber den neuen Cool Blob, der per Azure Portal erzeugt wurde, zwar attachen aber nicht managen.

Die UWP App

Die Universal Windows Platform hat ein eigenes einfaches und sicheres API, UWP genannt (früher WinRT). Um eine Webcam nutzen zu können muss der Entwickler zwei Rechte einfordern, die der Anwender aber entziehen kann. Zu finden ist dies im Manifest des Visual Studio Universal Projektes.

image

Das XAML Userinterface benötigt zumindest einen Button und eine Capture Preview Element.

image

Es wird die Kamera initialisiert und der Preview im Control angezeigt.

   1:   MediaCapture captureManager;
   2:   
   3:          async private void startcam()
   4:          {
   5:              captureManager = new MediaCapture();
   6:              await captureManager.InitializeAsync();
   7:              capturePreview.Source = captureManager;
   8:              await captureManager.StartPreviewAsync();
   9:          }

 

Man könnte nun das Bild erfassen (capture) und im Speicher weiter bearbeiten. Fürs testen ist es ganz praktisch das Bild im Temp Ordner der App abzulegen. Format und Größe lassen sich komfortabel einstellen.

   1:  private async void button_Click(object sender, RoutedEventArgs e)
   2:          {
   3:              CameraCaptureUI captureUI = new CameraCaptureUI();
   4:              captureUI.PhotoSettings.Format = CameraCaptureUIPhotoFormat.Jpeg;
   5:              captureUI.PhotoSettings.CroppedSizeInPixels = new Size(200, 200);
   6:   
   7:              var media = await ApplicationData.Current.LocalFolder
   8:             .CreateFileAsync("capture.jpg", CreationCollisionOption.ReplaceExisting);
   9:              await captureManager.CapturePhotoToStorageFileAsync(
  10:               ImageEncodingProperties.CreateJpeg(), media);

 

Um Azure komfortabel nutzen zu können, installiert man sich per Nuget das Paket WindowsAzure.Storage. Mit dem identen Kombi der Keys wird der Connectionstring (hier gekürzt) verwendet um den Zugriffsclient zu erhalten. Dann wird der Container ausgegwählt und eine Referenz auf das zu erstellende Blob Objekt (hannes.jpg) erzeugt. Ab Zeile 7 gehts dann um das schreiben des Streams, der noch offen ist vom speichern des Bildes.

   1:  CloudStorageAccount storageAccount =
   2: CloudStorageAccount.Parse("DefaultEndpointsProtocol=https;AccountName=xAccountKey=Gd==");
   3:              CloudBlobClient Client = storageAccount.CreateCloudBlobClient();
   4:              CloudBlobContainer container = Client.GetContainerReference("img");
   5:              CloudBlockBlob blockBlob = container.GetBlockBlobReference("hannes.jpg");
   6:   
   7:              using (var inputStream = await media.OpenReadAsync())
   8:              {
   9:                  await blockBlob.UploadFromStreamAsync(inputStream.AsStreamForRead());
  10:              }
Kommentare sind geschlossen