Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Capturing Images from Browser to Azure Blob Storage via Azure Functions
<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>
<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>
<script>
(function ($) {
$(document).ready(function() {
$("#screenshot img").on("load", function() {
$.ajax({
type: "POST",
url: "/api/faces/register",
data: $(this).attr("src")
});
});
});
})(jQuery);
</script>
[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;
}
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAYAAAA10dzkAAAgAElEQVR4Xry9iZfmV3keeKuqq7qru9UtJI...
[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];
...
}
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.