Javascript 如何在React web应用程序（非本机）中拍照

我需要能够从我的web应用程序localhost:3000/用户摄像头路由组件中使用桌面摄像头或手机摄像头拍照。而且，请不要写任何本机解决方案，因为我不在移动应用程序上工作

我尝试了react摄像头和react网络摄像头软件包，但没有任何效果。

从“React”导入React
从“react Webcam”导入网络摄像头
常量视频约束={
宽度：1280，
身高：720，
面对模式：“用户”
};
const WebcamCapture=（）=>{
const webcamRef=React.useRef（null）；
const capture=React.useCallback(
() => {
const imageSrc=webcamRef.current.getScreenshot（）；
},
[网络摄像机参考]
);
返回(
拍摄照片
);
};

那么，有没有一种方法可以通过使用javascript或者使用navigator来实现这一点，或者有没有一个npm包可以与react一起工作。有人有这方面的经验吗

---

谢谢

尝试一下我动态创建的这个简单模块，只是为了测试这个有趣的功能：

const camera = function () {
let width = 0;
let height = 0;

const createObjects = function () {


    const video = document.createElement('video');
    video.id = 'video';
    video.width = width;
    video.width = height;
    video.autoplay = true;
    document.body.appendChild(video);

    const canvas = document.createElement('canvas');
    canvas.id = 'canvas';
    canvas.width = width;
    canvas.width = height;
    document.body.appendChild(canvas);
}


return {
    video: null,
    context: null,
    canvas: null,

    startCamera: function (w = 680, h = 480) {
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            width = w;
            height = h;

            createObjects();

            this.video = document.getElementById('video');
            this.canvas = document.getElementById('canvas');
            this.context = this.canvas.getContext('2d');


            (function (video) {
                navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) {
                    video.srcObject = stream;
                    video.play();
                });
            })(this.video)

        }
    },


    takeSnapshot: function () {
        this.context.drawImage(this.video, 0, 0, width, height);
    }

}
}();

export default camera;

要使用此模块，请首先将其作为常规es6模块导入

import camera from './camera.js'

然后打电话：

camera.startCamera();
camera.takeSnapshot();

---

嗯。我通过使用navigator并从中获取媒体设备来解决问题。对于任何试图制作类似的东西的人，我想让你知道，在你将web应用设置为使用安全连接HTTPS之前，Chrome不允许你使用它。在react for testing中，使用设置HTTPS=true&&npm start，这样您将以HTTPS启动react应用程序，它将向您显示摄像头，您可以将其放在组件的html标记中的任何位置。

Nice，我已经有了可以用navigator实现的东西。谢谢，你有没有测试过这个？这真的有效吗？是的，我对它进行了测试，只是编辑了一下，因为我忘了将dom节点附加到html中。谢谢你的帮助。就是这样，但在所有步骤之前，还有一件事要做，那就是启用https（安全连接）。而且它有效！

camera.startCamera();
camera.takeSnapshot();