railbird/react-native-vision-camera
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: Make images responsive

Browse Source
This commit is contained in:
Marc Rousavy 2023-09-27 12:21:34 +02:00
parent bb7549bc01
commit eec9a3eb6e
5 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/docs/guides/DEVICES.mdx
View File

@ -159,7 +159,7 @@ const device = getCameraDevice(devices, 'back', {
This will try to find a [`CameraDevice`](/docs/api/interfaces/CameraDevice) that consists of all three physical Camera Devices, or the next best match (e.g. "Dual-Camera", or just a single wide-angle-camera) if not found. With the "Triple-Camera", we can now zoom out to a wider field of view:
<div align="center">
<img src="/img/multi-camera.gif" width="55%" />
<img class="doc-image" src="/img/multi-camera.gif" />
</div>
If you want to do the filtering/sorting fully yourself, you can also just get all devices, then implement your own filter:

6
docs/docs/guides/HDR.mdx
View File

@ -13,8 +13,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl'
HDR ("High Dynamic Range") is a capture mode that captures colors in a much wider range, allowing for much better details and brighter colors.
<div align="center">
<img src="/img/sdr_comparison.png" width="51%" />
<img src="/img/hdr_comparison.png" width="51%" />
<img class="doc-image" src="/img/sdr_comparison.png" />
<img class="doc-image" src="/img/hdr_comparison.png" />
</div>
### Photo HDR
@ -22,7 +22,7 @@ HDR ("High Dynamic Range") is a capture mode that captures colors in a much wide
Photo HDR is accomplished by running three captures instead of one, an underexposed photo, a normal photo, and an overexposed photo. Then, these images are fused together to create darker darks and brighter brights.
<div align="center">
<img src="/img/hdr_photo_demo.webp" width="65%" />
<img class="doc-image" src="/img/hdr_photo_demo.webp" />
</div>
### Video HDR

2
docs/docs/guides/STABILIZATION.mdx
View File

@ -13,7 +13,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl'
Video Stabilization is an algorithm that stabilizes the recorded video to smoothen any jitters, shaking, or abrupt movements from the user's camera movement.
<div align="center">
<img src="/img/action_mode_demo.gif" width="65%" />
<img class="doc-image" src="/img/action_mode_demo.gif" />
</div>
There are multiple different approaches to Video Stabilization, either software- or hardware-based. Video Stabilization always crops the image to a smaller view area so it has room to shift the image around, so expect a "zoomed-in" effect. Also, since Video Stabilization is a complex algorithm, enabling it will increase the time the Camera takes to initialize.

2
docs/docs/guides/ZOOMING.mdx
View File

@ -30,7 +30,7 @@ A Camera device has different minimum, maximum and neutral zoom values. Those va
* The `neutralZoom` value is often `1`, but can be larger than `1` for devices with "fish-eye" (ultra-wide-angle) cameras. In those cases, the user expects to be at whatever zoom value `neutralZoom` is (e.g. `2`) per default, and if he tries to zoom out even more, he goes to `minZoom` (`1`), which switches over to the "fish-eye" (ultra-wide-angle) camera as seen in this GIF:
<div align="center">
<img src="/img/multi-camera.gif" width="55%" />
<img class="doc-image" src="/img/multi-camera.gif" />
</div>
The Camera's `zoom` property expects values to be in the same "factor" scale as the `minZoom`, `neutralZoom` and `maxZoom` values - so if you pass `zoom={device.minZoom}` it is at the minimum available zoom, where as if you pass `zoom={device.maxZoom}` the maximum zoom value possible is zoomed in. It is recommended that you start at `device.neutralZoom` and let the user manually zoom out to the fish-eye camera on demand (if available).

26
docs/src/css/custom.css
View File

@ -19,15 +19,35 @@
--docusaurus-highlighted-code-line-bg: rgb(61, 63, 67);
}
img {
/* Images inside the docs that are centered/inside text */
.doc-image {
border-radius: 15px;
max-width: 55%;
max-height: 30vh;
}
@media (max-width: 600px) {
.doc-image {
max-width: 80%;
max-height: 50vh;
}
}
@media (min-width: 600px) and (max-width: 997px) {
.doc-image {
max-width: 55%;
max-height: 50vh;
}
}
@media (min-width: 997px) and (max-width: 1145px) {
.doc-image {
max-width: 80%;
max-height: 30vh;
}
}
/* align image to the right */
.image-container {
float: right;
}
/* mobile screen; align center */
@media (max-width: 600px) {
.image-container {
@ -35,14 +55,12 @@ img {
text-align: center;
}
}
/* wider screen; align right again */
@media (min-width: 600px) and (max-width: 997px) {
.image-container {
float: right;
}
}
/* even wider screen but with sidebars; align center cuz we dont have enough space for right */
@media (min-width: 997px) and (max-width: 1145px) {
.image-container {