Update FORMATS.mdx

This commit is contained in:
Marc Rousavy 2021-09-09 22:01:52 +02:00 committed by GitHub
parent 0bbda5b84b
commit 7ccc8b65f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -69,9 +69,9 @@ This example shows how you would pick the format with the _highest frame rate_:
```tsx ```tsx
function getMaxFps(format: CameraDeviceFormat): number { function getMaxFps(format: CameraDeviceFormat): number {
return format.frameRateRanges.reduce((prev, curr) => { return format.frameRateRanges.reduce((prev, curr) => {
if (curr.maxFrameRate > prev) return curr.maxFrameRate; if (curr.maxFrameRate > prev) return curr.maxFrameRate
else return prev; else return prev
}, 0); }, 0)
} }
function App() { function App() {
@ -80,11 +80,11 @@ function App() {
const format = useMemo(() => { const format = useMemo(() => {
return device?.formats.reduce((prev, curr) => { return device?.formats.reduce((prev, curr) => {
if (prev == null) return curr; if (prev == null) return curr
if (getMaxFps(curr) > getMaxFps(prev)) return curr; if (getMaxFps(curr) > getMaxFps(prev)) return curr
else return prev; else return prev
}, undefined); }, undefined)
}, [device?.formats]); }, [device?.formats])
if (device == null) return <LoadingView /> if (device == null) return <LoadingView />
return ( return (
@ -108,17 +108,17 @@ Implement this however you want, I personally use a "point-based system":
```ts ```ts
export const sortFormatsByResolution = (left: CameraDeviceFormat, right: CameraDeviceFormat): number => { export const sortFormatsByResolution = (left: CameraDeviceFormat, right: CameraDeviceFormat): number => {
// in this case, points aren't "normalized" (e.g. higher resolution = 1 point, lower resolution = -1 points) // in this case, points aren't "normalized" (e.g. higher resolution = 1 point, lower resolution = -1 points)
let leftPoints = left.photoHeight * left.photoWidth; let leftPoints = left.photoHeight * left.photoWidth
let rightPoints = right.photoHeight * right.photoWidth; let rightPoints = right.photoHeight * right.photoWidth
// we also care about video dimensions, not only photo. // we also care about video dimensions, not only photo.
leftPoints += left.videoWidth * left.videoHeight; leftPoints += left.videoWidth * left.videoHeight
rightPoints += right.videoWidth * right.videoHeight; rightPoints += right.videoWidth * right.videoHeight
// you can also add points for FPS, etc // you can also add points for FPS, etc
return rightPoints - leftPoints; return rightPoints - leftPoints
}; }
// and then call it: // and then call it:
const formats = useMemo(() => device?.formats.sort(sortFormatsByResolution), [device?.formats]) const formats = useMemo(() => device?.formats.sort(sortFormatsByResolution), [device?.formats])