Capturing Images from Browser to Azure Blob Storage via Azure Functions

01-photo-capture-1.html

<div id="screenshot">
  <video autoplay></video>
  <img src="">
  <canvas style="display:none;"></canvas>
  <div>
      <button class="capture-button">Capture video</button>
      <button id="screenshot-button">Take screenshot</button>
  </div>
</div>

02-photo-capture-2.html

<script>
  const constraints = {
    video: { width: 640, height: 480 }
  };

  const captureVideoButton = document.querySelector('#screenshot .capture-button');
  const screenshotButton = document.querySelector('#screenshot-button');
  const img = document.querySelector('#screenshot img');
  const video = document.querySelector('#screenshot video');

  const canvas = document.createElement('canvas');

  captureVideoButton.onclick = function () {
    navigator.mediaDevices
             .getUserMedia(constraints)
             .then(handleSuccess)
             .catch(handleError);
  };

  screenshotButton.onclick = video.onclick = function () {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);

    img.src = canvas.toDataURL('image/png');
  };

  function handleSuccess(stream) {
    screenshotButton.disabled = false;
    video.srcObject = stream;
  }

  function handleError(error) {
    console.error('Error: ', error);
  }
</script>

03-photo-capture-3.html

<script>
  (function ($) {
    $(document).ready(function() {
      $("#screenshot img").on("load", function() {
        $.ajax({
          type: "POST",
          url: "/api/faces/register",
          data: $(this).attr("src")
        });
      });
    });
  })(jQuery);
</script>

04-render-page-trigger.cs

[FunctionName("RenderPageHttpTrigger")]
public async Task<IActionResult> Run(
    [HttpTrigger(AuthorizationLevel.Function, "get", Route = "pages/capture")] HttpRequest req,
    ExecutionContext context)
{
    this._logger.LogInformation("C# HTTP trigger function processed a request.");

    var filepath = $"{context.FunctionAppDirectory}/photo-capture.html";
    var file = await File.ReadAllTextAsync(filepath, Encoding.UTF8).ConfigureAwait(false);
    var result = new ContentResult()
    {
        Content = file,
        StatusCode = 200,
        ContentType = "text/html"
    };

    return result;
}

05-embedded-image.txt

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAYAAAA10dzkAAAgAElEQVR4Xry9iZfmV3keeKuqq7qru9UtJI...

06-photo-capture-trigger.cs

[FunctionName("PhotoCaptureHttpTrigger")]
public async Task<IActionResult> Run(
    [HttpTrigger(AuthorizationLevel.Function, "post", Route = "api/faces/register")] HttpRequest req)
{
    ...

    var body = default(string);
    using (var reader = new StreamReader(req.Body))
    {
        body = await reader.ReadToEndAsync().ConfigureAwait(false);
    }

    var segments = body.Split(new[] { "," }, StringSplitOptions.RemoveEmptyEntries);
    var contentType = segments[0].Split(new[] { ":", ";" }, StringSplitOptions.RemoveEmptyEntries)[1];
    var encoded = segments[1];

    ...
}

07-blob-upload.cs

var bytes = Convert.FromBase64String(encoded);

var client = new CloudBlobClient();
var container = client.GetContainerReference("faces");
await container.CreateIfNotExistsAsync().ConfigureAwait(false);

var blob = await container.GetBlockBlobReference("filename.png")
                          .SetContentType("image/png")
                          .UploadByteArrayAsync(bytes, 0, bytes.Length)
                          .ConfigureAwait(false);