diff --git a/README.md b/README.md index 65e512a..5bc2999 100644 --- a/README.md +++ b/README.md @@ -33,17 +33,13 @@ Additionally, the [Mesh](https://github.com/Valkryst/Jellron/blob/master/js/mesh ### Styling -When styling the `video` element VIA CSS, it is assumed that the displayed video must take up the entire allotted -width. Internal code relies on this assumption and the element's height is calculated based on it's width. This is done -to maintain the camera's (MediaStream's) aspect ratio. - -_Do not specify anything for the element's height. Not even `height: auto`._ +You _must_ specify a fixed size for the `video` element VIA CSS. There are a number of issues in implementing dynamic +sizing, in a way that works across many browsers, so it is currently unsupported. ```css video { - width: 100%; /* Set this to your desired value. */ - - object-fit: fill; + height: 480px; + width: 640px; } ``` diff --git a/css/styles.css b/css/styles.css index 8d821ce..a96abad 100644 --- a/css/styles.css +++ b/css/styles.css @@ -10,9 +10,8 @@ html { } & > video { - width: 50%; - - object-fit: fill; + height: 480px; + width: 640px; } } } diff --git a/js/camera.js b/js/camera.js index a42d702..06ee262 100644 --- a/js/camera.js +++ b/js/camera.js @@ -125,17 +125,8 @@ export class Camera { * Both FaceDetector and HandDetector use the video element's height and width properties to scale the input * MediaStream before processing it. This is why we need to set them. */ - this.videoElement.height = this.videoElement.clientWidth / (await this.getMediaStreamAspectRatio()); - this.videoElement.width = this.videoElement.clientWidth; - } - - /** - * Calculates the aspect ratio of the MediaStream associated with the video element of this Camera object. - * - * @returns {Promise} A promise that resolves to the aspect ratio. - */ - async getMediaStreamAspectRatio() { - return (await this.getMediaStreamWidth()) / (await this.getMediaStreamHeight()); + this.videoElement.height = this.videoElement.scrollHeight; + this.videoElement.width = this.videoElement.scrollWidth; } /** diff --git a/js/detector/body_detector.js b/js/detector/body_detector.js index e948cf3..e453de4 100644 --- a/js/detector/body_detector.js +++ b/js/detector/body_detector.js @@ -40,20 +40,14 @@ export class BodyDetector extends Detector { this.intervalId = setInterval(async () => { const currentTime = performance.now(); - let frame = null; let rawBodies = []; try { - frame = tf.browser.fromPixels(videoElement); - frame = tf.image.resizeBilinear(frame, [videoElement.height, videoElement.width]); - - rawBodies = await this.detector.estimatePoses(frame); + rawBodies = await this.detector.estimatePoses(videoElement); } catch (e) { /* * Depending on the state of the video element, this can throw a "Requested texture size [0x0] is * invalid." error. It doesn't seem to cause any issues, so we ignore it. */ - } finally { - frame?.dispose(); } if (rawBodies.length === 0) {