时间戳

首页 > 解决方案 > 相机在 android ionic react 应用程序中不起作用

reactjs - 相机在 android ionic react 应用程序中不起作用

问题描述

我有这个代码，它在 PC 浏览器中工作，但在 android 中它不会打开相机。代码是使用 React 组件在 ionic 框架中编写的。打开相机的主要组件如下：

import React, { useRef, useState,useEffect } from 'react';
import './index.scss';

const CAPTURE_OPTIONS = {
  audio: true,
  video: { facingMode: "user" }
};

const Camera: React.FC = () => {
  const videoRef = useRef<any>(null);

  const [mediaStream, setMediaStream] = useState<any>(null);

  useEffect(() => {
    async function enableStream() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia(CAPTURE_OPTIONS);
        setMediaStream(stream);
      } catch (err) {
        // Removed for brevity
      }
    }

    if (!mediaStream) {
      enableStream();
    } else {
      return function cleanup() {
        mediaStream.getTracks().forEach((track: any) => {
          track.stop();
        });
      }
    }
  }, [mediaStream, CAPTURE_OPTIONS]);

  if (mediaStream && videoRef.current && !videoRef.current.srcObject) {
    videoRef.current.srcObject = mediaStream;
  }

  const handleCanPlay = () => {
    videoRef.current.play();
  }

  return (
    <div>
      <video ref={videoRef} onCanPlay={handleCanPlay} autoPlay playsInline loop muted className={"camera"} />
    </div>
  );
}

export default Camera;

有谁知道我在android电容器上运行代码时遇到了这个问题，当我运行时ionic capacitor run android --livereload --external我无法得到如下所示的问题：

在此处输入图像描述

标签： reactjsionic-framework

解决方案

使用 webrtc 和 navigator.mediaDevices.getUserMedia() 时，您需要确保使用的是 adapter.js 文件。

您可以使用https://www.npmjs.com/package/webrtc-adapter ，或从 - https://github.com/webrtc/adapter/tree/master/release复制文件。如果你想要它全局把它放在你的离子项目的公共文件夹中。

推荐阅读