如何在Js中访问手机前置摄像头并录制视频？

Question

我正在制作一个应用程序：Html、Css 和 Javascript，我希望该应用程序访问移动前置摄像头并录制用户脸部的视频，我正在使用 Adobe Phone Gap 将我的代码转换为 .apk

在 StackOverflow 上有类似的问题，但没有人能帮助我，我尝试在 Google 中搜索，但一无所获

我试过这样做：

navigator.getUserMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia;

if (navigator.getUserMedia) {
   navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
      function(stream) {
         var video = document.querySelector('video');
         video.srcObject = stream;
         video.onloadedmetadata = function(e) {
           video.play();
         };
      },
      function(err) {
         console.log("The following error occurred: " + err.name);
      }
   );
} else {
   console.log("getUserMedia not supported");
}

但不工作

我期望，当用户单击按钮时，应用程序将打开前置摄像头，然后用户录制您的脸部视频。

Answer 1

您可以使用

<input type="file" accept="image/*;capture=camera">

从浏览器访问用户相机

Answer 2

文件输入 (

capture

) 上的

input type="file"

属性可用于激活前置 (

accept="image/*"

) 或后置 (

accept="video/*"

) 摄像头的照片 (

capture="user"

) 或视频 (

capture="environment"

) 模式。

注：

• 在移动设备上测试代码以获得最佳结果。桌面环境可能仅显示标准文件选择器。
• 在桌面环境上支持网络摄像头可能要棘手得多：https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos

<input type="file" id="soundFile" capture="user" accept="audio/*"><br/>
<input type="file" id="videoFile" capture="environment" accept="video/*"><br/>
<input type="file" id="imageFile" capture="user" accept="image/*">

来源：https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture