Im trying to use the takePhoto method of image capture, using the following code.
addPicture: function (typeEvidence) {
if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
this.typeEvidence = typeEvidence;
var _self = this;
this.initializeCamera();
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
.then(mediaStream => {
_self.video.srcObject = mediaStream;
_self.video.onloadedmetadata = () => {
_self.video.play();
};
_self.track = mediaStream.getVideoTracks()[0];
_self.imageCapture = new ImageCapture(_self.track);
})
.catch((err) => {
$.MenssagesGrowl.Show(3, 'Error: ' + err.name + ' - ' + err.message);
});
$("#modalAddPicture").modal("show");
}
else {
$.MenssagesGrowl.Show(3, 'The browser does not support media devices');
}
},
initializeCamera: function () {
var _self = this;
this.dataURL = '';
this.disableTakePicture = true;
this.blob = null;
this.streaming = false;
this.imageCapture= null;
this.video = document.querySelector('video');
this.canvas = document.getElementById('cameraCanvas');
this.video.addEventListener('canplay', (ev) => {
if (!_self.streaming) {
_self.picWidth = _self.video.videoWidth;
_self.picHeight = _self.video.videoHeight;
//_self.picWidth = _self.video.videoWidth / (_self.video.videoHeight / _self.picHeight);
// Firefox currently has a bug where the height can't be read from
// the video, so we will make assumptions if this happens.
if (isNaN(_self.picWidth)) {
_self.picWidth = _self.picHeight / (4 / 3);
}
_self.video.setAttribute('width', _self.picWidth);
_self.video.setAttribute('height', _self.picHeight);
_self.canvas.setAttribute('width', _self.picWidth);
_self.canvas.setAttribute('height', _self.picHeight);
_self.streaming = true;
_self.disableTakePicture = false;
}
}, false);
this.clearPhoto();
},
takePicture: function () {
var _self = this;
this.imageCapture.takePhoto(null)
.then((blob) => {
return Promise.all([createImageBitmap(blob),blob]);
})
.then((result) => {
//result[0] bitmap
//result[1] blob
//guardar foto
var _sequence = _self.getConsecutiveForFileName();
var _filename = _self.PrevioHeader.ControlNum + "_" + _self.PreviousConsignment.ConsignmentNum + "_" + _sequence + ".png";
var _file = new File([result[1]], _filename, {
type: 'image/png'
});
var _formData = new FormData();
_formData.append("image", _file);
_formData.append("id", _self.PreviousConsignment.Guid);
axios({
method: 'post',
url: this.url,
data: _formData,
headers: { "Content-Type": "multipart/form-data" }
}
).then((response) => {
if (response.data.result == true) {
$.MenssagesGrowl.Show(response.data.typeMessage, response.data.message);
var _context = _self.canvas.getContext('2d');
if (_self.picWidth && _self.picHeight) {
_self.canvas.width = _self.picWidth;
_self.canvas.height = _self.picHeight;
_context.drawImage(result[0], 0, 0, _self.picWidth, _self.picHeight);
var _dataURL = _self.canvas.toDataURL('image/png');
_self.PreviousConsignment.Images.push({
dataURL: _dataURL,
fileName: _filename,
id: response.data.id,
sequence: _sequence,
typeEvidence: _self.typeEvidence,
temporal: 1
});
}
else
_self.clearPhoto();
}
});
})
.catch((error) => {
console.log(error);
});
},
The application was working ok with the following line
this.imageCapture.takePhoto()
, but suddenly stopped working today throwing a generic error DOMException: platform error. I did a little bit of research and realized they had made a change a year ago to use it as
takePhoto(photoSettings)
as the documentation in mdn web docs says, since photoSettings is optional i tried to use
this.imageCapture.takePhoto(null)
and it worked for a while until later this day, when it started throwing again the same error. Does anyone knows the reason, is the ImageCapture not stable for production and if it is not is there an alternative or workaround?
Im running the app under chrome and using vue as framework.
