web-dev-qa-db-fra.com

La caméra Flutter semble étirée

J'ai joué avec le scintillement et j'adore ça jusqu'à présent, mais j'ai un problème pour faire fonctionner la caméra.

Je suis les instructions sur cette page https://pub.dartlang.org/packages/camera et cela fonctionne. Cependant, l'appareil photo est étiré pour s'adapter à l'écran du téléphone, mais l'image est déformée et plus haute qu'elle ne devrait l'être. D'autres applications qui utilisent l'appareil photo semblent le maintenir en proportion, existe-t-il un moyen de s'assurer qu'il ne s'étire pas mais remplit toujours l'écran?

cameradartandroid-cameraflutter
9
Angus Allman

S'appuyant sur la solution par lase , cela fonctionne même lorsque le rapport d'aspect de l'appareil est différent du rapport de la caméra:

final size = MediaQuery.of(context).size;
final deviceRatio = size.width / size.height;
return Transform.scale(
  scale: controller.value.aspectRatio / deviceRatio,
  child: Center(
    child: AspectRatio(
      aspectRatio: controller.value.aspectRatio,
      child: CameraPreview(controller),
    ),
  ),
);
29
Marek Lisý

Je veux juste m'appuyer sur la réponse de Marek Lisy car elle casse le conteneur. Dans mon cas, j'utilise un TabBarView mais cette réponse provoque un accrochage incorrect aux onglets. J'ai corrigé cela en utilisant un ClipRect comme indiqué ci-dessous:

final size = MediaQuery.of(context).size;

if (!controller.value.isInitialized) {
  return Container();
}
return ClipRect(
  child: Container(
    child: Transform.scale(
      scale: controller.value.aspectRatio / size.aspectRatio,
      child: Center(
        child: AspectRatio(
          aspectRatio: controller.value.aspectRatio,
          child: CameraPreview(controller),
        ),
      ),
    ),
  ),
);

Bonne chance les gars! J'ai passé environ une heure à essayer de comprendre cela. J'espère donc que personne n'a le même problème.

12
alcomide

J'ai eu un problème similaire, et bien que la réponse de Richard ait été utile, j'ai également eu le problème de l'aperçu étant trop petit. Il pourrait y avoir de meilleures façons, mais j'ai pu le résoudre en le mettant à l'échelle par une inversion du rapport d'aspect comme ceci:

return new Scaffold(
  appBar: new AppBar(title: new Text('Capture')),
  body: new Transform.scale(
      scale: 1 / controller.value.aspectRatio,
      child: new Center(
        child: new AspectRatio(
            aspectRatio: controller.value.aspectRatio,
            child: new CameraPreview(controller)),
      )),
);

De l'intérieur, cela devrait:

  1. Construisez le CameraPreview au rapport d'aspect correct
  2. Centrer cet aperçu dans la vue
  3. Appliquez une transformation de mise à l'échelle, qui permet à l'aperçu de remplir l'écran de manière appropriée, en fonction du rapport d'aspect
10
lase

Vous devez envelopper l'aperçu dans un widget qui donne le rapport d'aspect correct - soit en définissant vous-même la largeur et la hauteur au rapport correct, soit en utilisant AspectRatio. Par exemple, l'exemple de plugin de caméra utilise:

new Expanded(
  child: new Padding(
    padding: const EdgeInsets.all(5.0),
    child: new Center(
      child: new AspectRatio(
        aspectRatio: controller.value.aspectRatio,
        child: new CameraPreview(controller),
      ),
    ),
  ),
),
5
Richard Heap

Je veux juste ajouter que, si après avoir positionné l'aperçu de la caméra au centre et qu'il n'est pas en plein écran, changer la résolution de la caméra en veryHigh le fera définitivement en plein écran.

CameraController( cameras[0], ResolutionPreset.veryHigh )

0
iRedia Ebikade

J'ai essayé Toutes les solutions mais toutes ont des problèmes dans certaines conditions, essayez ceci, cela fonctionne comme un charme:

Première:

final size = MediaQuery.of(context).size;
final deviceRatio = size.width / size.height;

Ensuite:

return Transform.scale(
   scale: 1,
   child: Center(
     child: AspectRatio(
       aspectRatio: deviceRatio,
       child: CameraPreview(_cameraController),
     ),
   ),
);

J'espère que ça aide ...

0
Ali Esfandiari