Fix Bad Resize For Camera Snapshot (#6797)

* Catch cases where incorrect size is requested

* Set a default if calculated height is incorrect
This commit is contained in:
Nicolas Mowen 2023-06-30 06:34:10 -06:00 committed by GitHub
parent b6fce8f0bb
commit 0a8249d6fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 19 deletions

View File

@ -1118,6 +1118,15 @@ def latest_frame(camera_name):
height = int(request.args.get("h", str(frame.shape[0]))) height = int(request.args.get("h", str(frame.shape[0])))
width = int(height * frame.shape[1] / frame.shape[0]) width = int(height * frame.shape[1] / frame.shape[0])
if not frame:
return "Unable to get valid frame from {}".format(camera_name), 500
if height < 1 or width < 1:
return (
"Invalid height / width requested :: {} / {}".format(height, width),
400,
)
frame = cv2.resize(frame, dsize=(width, height), interpolation=cv2.INTER_AREA) frame = cv2.resize(frame, dsize=(width, height), interpolation=cv2.INTER_AREA)
ret, jpg = cv2.imencode( ret, jpg = cv2.imencode(

View File

@ -28,13 +28,18 @@ export default function CameraImage({ camera, onload, searchParams = '', stretch
const scaledHeight = useMemo(() => { const scaledHeight = useMemo(() => {
const scaledHeight = Math.floor(availableWidth / aspectRatio); const scaledHeight = Math.floor(availableWidth / aspectRatio);
return stretch ? scaledHeight : Math.min(scaledHeight, height); const finalHeight = stretch ? scaledHeight : Math.min(scaledHeight, height);
if (finalHeight > 0) {
return finalHeight;
}
return 100;
}, [availableWidth, aspectRatio, height, stretch]); }, [availableWidth, aspectRatio, height, stretch]);
const scaledWidth = useMemo(() => Math.ceil(scaledHeight * aspectRatio - scrollBarWidth), [ const scaledWidth = useMemo(
scaledHeight, () => Math.ceil(scaledHeight * aspectRatio - scrollBarWidth),
aspectRatio, [scaledHeight, aspectRatio, scrollBarWidth]
scrollBarWidth, );
]);
const img = useMemo(() => new Image(), []); const img = useMemo(() => new Image(), []);
img.onload = useCallback( img.onload = useCallback(
@ -58,18 +63,16 @@ export default function CameraImage({ camera, onload, searchParams = '', stretch
return ( return (
<div className="relative w-full" ref={containerRef}> <div className="relative w-full" ref={containerRef}>
{ {enabled ? (
(enabled) ?
<canvas data-testid="cameraimage-canvas" height={scaledHeight} ref={canvasRef} width={scaledWidth} /> <canvas data-testid="cameraimage-canvas" height={scaledHeight} ref={canvasRef} width={scaledWidth} />
: <div class="text-center pt-6">Camera is disabled in config, no stream or snapshot available!</div> ) : (
} <div class="text-center pt-6">Camera is disabled in config, no stream or snapshot available!</div>
{ )}
(!hasLoaded && enabled) ? ( {!hasLoaded && enabled ? (
<div className="absolute inset-0 flex justify-center" style={`height: ${scaledHeight}px`}> <div className="absolute inset-0 flex justify-center" style={`height: ${scaledHeight}px`}>
<ActivityIndicator /> <ActivityIndicator />
</div> </div>
) : null ) : null}
}
</div> </div>
); );
} }