Flutter网页摄像头访问插件camera_web的使用

Camera Web Plugin

camera_web是camera插件的Web实现。请注意，此插件正在开发中，某些功能可能尚未实现或存在限制。

使用方法

依赖包

该包已获得官方认可，因此你可以直接在项目中正常使用camera，无需在pubspec.yaml中单独添加camera_web。但是，如果你需要直接导入并使用它的API，则应该像往常一样将其添加到pubspec.yaml中。

dependencies:
  camera: ^latest_version
  camera_web: ^latest_version # 如果需要直接使用API

示例代码

以下是一个完整的示例demo，演示了如何在Flutter Web应用中使用camera_web插件来访问摄像头：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:camera/camera.dart';

List<CameraDescription> cameras = [];

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  try {
    cameras = await availableCameras();
  } on CameraException catch (e) {
    print('Error initializing camera: $e');
  }

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Camera Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const CameraScreen(),
    );
  }
}

class CameraScreen extends StatefulWidget {
  const CameraScreen({super.key});

  @override
  _CameraScreenState createState() => _CameraScreenState();
}

class _CameraScreenState extends State<CameraScreen> {
  late CameraController _controller;
  bool _isCameraInitialized = false;

  @override
  void initState() {
    super.initState();
    _initializeCamera();
  }

  Future<void> _initializeCamera() async {
    final firstCamera = cameras.first;
    _controller = CameraController(
      firstCamera,
      ResolutionPreset.medium,
    );

    try {
      await _controller.initialize();
      setState(() {
        _isCameraInitialized = true;
      });
    } on CameraException catch (e) {
      print('Error initializing camera: $e');
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (!_isCameraInitialized) {
      return Scaffold(
        appBar: AppBar(title: const Text('Initializing Camera...')),
        body: const Center(child: CircularProgressIndicator()),
      );
    }

    return Scaffold(
      appBar: AppBar(title: const Text('Camera Preview')),
      body: Stack(
        children: [
          CameraPreview(_controller),
          Positioned(
            bottom: 20.0,
            left: 20.0,
            right: 20.0,
            child: ElevatedButton.icon(
              onPressed: () async {
                try {
                  final XFile? image = await _controller.takePicture();
                  if (image != null) {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => DisplayPictureScreen(imagePath: image.path),
                      ),
                    );
                  }
                } on CameraException catch (e) {
                  print('Error taking picture: $e');
                }
              },
              icon: const Icon(Icons.camera_alt),
              label: const Text('Take Picture'),
            ),
          ),
        ],
      ),
    );
  }
}

class DisplayPictureScreen extends StatelessWidget {
  final String imagePath;

  const DisplayPictureScreen({super.key, required this.imagePath});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Display the Picture')),
      body: kIsWeb
          ? Image.network(imagePath)
          : Image.file(File(imagePath)),
    );
  }
}

Web平台上的限制

• 摄像头设备：访问摄像头设备需要安全浏览上下文（HTTPS或本地开发时的localhost）。对于不安全的上下文，CameraPlatform.availableCameras可能会抛出带有permissionDenied错误码的CameraException。

• 设备方向：部分浏览器不支持屏幕方向API，这将影响设备方向相关的功能。

• 闪光灯模式和缩放级别：这些功能依赖于Image Capture Web API，但并非所有浏览器都支持。

• 拍照：捕获的图像URL指向浏览器内部位置（blob），应使用Image.network或Image.memory显示。

• 视频录制：视频录制依赖于MediaRecorder Web API，不同浏览器支持不同的视频MIME类型，并非所有浏览器都支持视频录制。

缺失的功能

camera_web目前缺少以下功能：

• 曝光模式、点和偏移
• 对焦模式和点
• 传感器方向
• 图像格式组
• 帧流

希望以上信息能帮助你在Flutter Web应用中成功集成和使用camera_web插件。如果有任何问题或需要进一步的帮助，请随时提问！