Skip to content

Commit

Permalink
Add error handler to video element
Browse files Browse the repository at this point in the history
  • Loading branch information
@ayinloya
ayinloya committed Dec 2, 2024
1 parent 9a45557 commit 578c321
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 88 deletions.
6 changes: 5 additions & 1 deletion packages/smart-camera-web/smart-camera-web.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1602,7 +1602,11 @@ class SmartCameraWeb extends HTMLElement {
navigator.mediaDevices
.getUserMedia({ audio: false, video: true })
.then((stream) => {
this.handleSuccess(stream);
try {
this.handleSuccess(stream);
} catch (error) {
this.handleError(error);
}
})
.catch((e) => {
this.handleError(e);
Expand Down
6 changes: 5 additions & 1 deletion packages/smart-camera-web/src/SmartCameraWeb.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1462,7 +1462,11 @@ class SmartCameraWeb extends HTMLElement {
navigator.mediaDevices
.getUserMedia({ audio: false, video: true })
.then((stream) => {
this.handleSuccess(stream);
try {
this.handleSuccess(stream);
} catch (error) {
this.handleError(error);
}
})
.catch((e) => {
this.handleError(e);
Expand Down
120 changes: 64 additions & 56 deletions packages/web-components/components/document/src/document-capture/DocumentCapture.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -339,71 +339,79 @@ class DocumentCapture extends HTMLElement {
}

handleIDStream(stream) {
const videoExists = this.shadowRoot.querySelector('canvas');
if (videoExists) {
// remove canvas
videoExists.remove();
}
let video = null;
let canvas = null;
video = document.createElement('video');
canvas = document.createElement('canvas');
const videoContainer = this.shadowRoot.querySelector('.id-video-container');

video.muted = true;
video.setAttribute('muted', 'true');

video.autoplay = true;
video.playsInline = true;
if ('srcObject' in video) {
video.srcObject = stream;
} else {
video.src = window.URL.createObjectURL(stream);
}

canvas.width = videoContainer.clientWidth;
canvas.height = (videoContainer.clientWidth * 9) / 16;
if (this.isPortraitCaptureView) {
canvas.height = (videoContainer.clientWidth * 16) / 9;
}
try {
const videoExists = this.shadowRoot.querySelector('canvas');
if (videoExists) {
// remove canvas
videoExists.remove();
}
let video = null;
let canvas = null;
video = document.createElement('video');
canvas = document.createElement('canvas');
const videoContainer = this.shadowRoot.querySelector(
'.id-video-container',
);

video.onloadedmetadata = () => {
video.play();
video.muted = true;
video.setAttribute('muted', 'true');

this.shadowRoot.querySelector('#loader').hidden = true;
this.shadowRoot.querySelector('.id-video').hidden = false;
this.shadowRoot.querySelector('.actions').hidden = false;
if (!videoExists) {
videoContainer.prepend(canvas);
video.autoplay = true;
video.playsInline = true;
if ('srcObject' in video) {
video.srcObject = stream;
} else {
video.src = window.URL.createObjectURL(stream);
}
};

const onVideoStart = () => {
if (video.paused || video.ended) return;
video.removeEventListener('playing', onVideoStart);
const aspectRatio = video.videoWidth / video.videoHeight;
const portrait = aspectRatio < 1;
canvas.width = videoContainer.clientWidth;
canvas.height = (videoContainer.clientWidth * 9) / 16;
if (this.isPortraitCaptureView) {
this.updatePortraitId(canvas, video);
requestAnimationFrame(onVideoStart);
return;
canvas.height = (videoContainer.clientWidth * 16) / 9;
}

if (portrait) {
videoContainer.classList.add('mobile-camera-screen');
const intermediateCanvas = document.createElement('canvas');
this._capturePortraitToLandscapeImage(intermediateCanvas, video);
this._drawLandscapeImageFromCanvas(canvas, intermediateCanvas);
} else {
this._drawLandscapeImage(canvas, video);
}
requestAnimationFrame(onVideoStart);
};
video.onloadedmetadata = () => {
video.play();

video.addEventListener('playing', onVideoStart);
this.shadowRoot.querySelector('#loader').hidden = true;
this.shadowRoot.querySelector('.id-video').hidden = false;
this.shadowRoot.querySelector('.actions').hidden = false;
if (!videoExists) {
videoContainer.prepend(canvas);
}
};

this._IDStream = stream;
this._IDVideo = video;
const onVideoStart = () => {
if (video.paused || video.ended) return;
video.removeEventListener('playing', onVideoStart);
const aspectRatio = video.videoWidth / video.videoHeight;
const portrait = aspectRatio < 1;
if (this.isPortraitCaptureView) {
this.updatePortraitId(canvas, video);
requestAnimationFrame(onVideoStart);
return;
}

if (portrait) {
videoContainer.classList.add('mobile-camera-screen');
const intermediateCanvas = document.createElement('canvas');
this._capturePortraitToLandscapeImage(intermediateCanvas, video);
this._drawLandscapeImageFromCanvas(canvas, intermediateCanvas);
} else {
this._drawLandscapeImage(canvas, video);
}
requestAnimationFrame(onVideoStart);
};

video.addEventListener('playing', onVideoStart);

this._IDStream = stream;
this._IDVideo = video;
} catch (error) {
if (error.name !== 'AbortError') {
console.error(error);
}
}
}

_drawLandscapeImage(
Expand Down
61 changes: 31 additions & 30 deletions packages/web-components/components/selfie/src/selfie-capture/SelfieCapture.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -763,41 +763,42 @@ class SelfieCaptureScreen extends HTMLElement {
}

handleStream(stream) {
const videoExists = this.shadowRoot.querySelector('video');
let video = null;
if (videoExists) {
video = this.shadowRoot.querySelector('video');
} else {
video = document.createElement('video');
}
try {
const videoExists = this.shadowRoot.querySelector('video');
let video = null;
if (videoExists) {
video = this.shadowRoot.querySelector('video');
} else {
video = document.createElement('video');
}

video.autoplay = true;
video.playsInline = true;
video.muted = true;
video.autoplay = true;
video.playsInline = true;
video.muted = true;

if ('srcObject' in video) {
video.srcObject = stream;
} else {
video.src = window.URL.createObjectURL(stream);
}
if ('srcObject' in video) {
video.srcObject = stream;
} else {
video.src = window.URL.createObjectURL(stream);
}

video.onloadedmetadata = () => {
video.play();
};
this._video = video;
const videoContainer = this.shadowRoot.querySelector(
'.video-container > .video',
);
this._data.permissionGranted = true;
video.onloadedmetadata = () => {
video.play();
};

video.onloadedmetadata = () => {
// this.shadowRoot.querySelector('.actions').hidden = false;
// this.shadowRoot.querySelector('#loader').hidden = true;
// this.shadowRoot.querySelector('.video-section').hidden = false;
};
this._video = video;
const videoContainer = this.shadowRoot.querySelector(
'.video-container > .video',
);
this._data.permissionGranted = true;

if (!videoExists) {
videoContainer.prepend(video);
if (!videoExists) {
videoContainer.prepend(video);
}
} catch (error) {
if (error.name !== 'AbortError') {
console.error(error);
}
}
}

Expand Down

0 comments on commit 578c321

Please sign in to comment.