使用javascript为移动浏览器设置摄像头拍摄图像的实时帧？

我有一个上传文件的功能，可以在我的一个网站上传身份证。当我们在移动浏览器中打开网站时，我们可以选择使用相同的上传文件按钮拍摄照片/浏览图像。如果用户试图拍照和上传，那么我想限制用户在一个框架内拍照，这样用户将把身份证放在该框架内，我就可以得到一张合适的照片。如下所示（参考一些android应用程序）

这是否可以使用html和javascript实现？如果可以，如何实现？对

使用

元素将网页布置在您希望预览的位置，并使用“抓拍图片”按钮按您希望的方式显示。最好使用一个移动友好的响应式CSS框架，比如bootstrap来布局页面

使用

.getUserMedia（）

和包含所需图像宽度和高度的约束，并将

元素设置为其视频流的预览

当用户点击按钮时，将视频元素绘制到画布中，然后使用到图像文件blob（可能是JPEG）。然后将该blob发布到您的服务器

给出执行此操作的代码的每个细节超出了堆栈溢出回答的范围。但是你可以问更多的问题