How can I upload my blob image to azure storage? - php

Question

I am passing my blob url through ajax request, I am trying to save this blob image to azure storage.
it seems I am doing it wrong and can't find any solution on how to do this right.
here is my code:
function identity_verification() {
navigator.getMedia = (navigator.getUserMedia || // use the proper vendor prefix
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.getMedia({
video: true
}, function() {
console.log("webcam is available");
$('.modal .modal-content').addClass('modal-large');
var player = document.getElementById('player');
var snapshotCanvas = document.getElementById('snapshot');
var captureButton = document.getElementById('capture');
var handleSuccess = function(stream) {
// Attach the video stream to the video element and autoplay.
player.srcObject = stream;
};
captureButton.addEventListener('click', function() {
var JPEG_QUALITY = 0.5;
var context = snapshot.getContext('2d');
// Draw the video frame to the canvas.
context.drawImage(player, 0, 0, snapshotCanvas.width,
snapshotCanvas.height);
img_b64 = context.canvas.toDataURL('image/png');
//Create blob from DataURL
blob = dataURItoBlob(img_b64)
img = document.createElement("img");
img.src = URL.createObjectURL(blob);
// console.log(img.src)
$.ajax({
method: "POST",
url: "identity",
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data: {
'file': img.src,
},
dataType: "json",
success: function(data) {
console.log(data);
},
error: function(jqXHR, textStatus, errorThrown) {
alert('Error adding / update data');
}
});
});
navigator.mediaDevices.getUserMedia({
video: true
}).then(handleSuccess);
return proctoring_modal.style.display = "flex";
}, function() {
console.log("webcam is not available");
$('.modal .modal-content .modal-header .modal_header_title').text("");
$('.modal .modal-content .modal-action').empty().append('<button class="">Close</button>');
return proctoring_modal.style.display = "flex";
});
}
function dataURItoBlob(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0)
byteString = atob(dataURI.split(',')[1]);
else
byteString = unescape(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to a typed array
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {
type: mimeString
});
}
public function store(Request $request)
{
$src = $request->get('file');
if($src) {
$filePath = $src('file')->store('gea', 'azure');
}else{
$filePath = "";
}
return response()->json([
'success'=>"Success",
'file' => $src
]);
}
everytime I try to save it I am getting this kind of error.
messag: "Call to undefined function blob:http://127.0.0.1:8000/cccabc59-e35f-46f9-8e9a-fb2fd11b811b()"
Please anyone help me on how to do this right.