如何在 Android 上将 getUserMedia 与 Cordova 一起使用？答案

【问题标题】：How to use getUserMedia with Cordova on Android?如何在 Android 上将 getUserMedia 与 Cordova 一起使用？
【发布时间】：2016-12-09 04:09:54
【问题描述】：

使用getUserMedia 在视频元素中预览相机输入在 Chrome 中工作得非常好，但一旦我在 Cordova 容器中运行相同的代码就会中断。有什么可能导致这种情况的想法吗？

Example code.

添加了一个使用 Mozilla gUM polyfill 的示例：

(()=>{
  var promisifiedOldGUM = function(constraints) {

    var getUserMedia = (
        navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia
    );

    if(!getUserMedia) {
      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
    }

    return new Promise(function(resolve, reject) {
      getUserMedia.call(navigator, constraints, resolve, reject);
    });

  }

  if(navigator.mediaDevices === undefined) {
    navigator.mediaDevices = {};
  }

  if(navigator.mediaDevices.getUserMedia === undefined) {
    navigator.mediaDevices.getUserMedia = promisifiedOldGUM;
  }





  function initCamera() {
      const constraints = { audio: false, video: { width: 1280, height: 720 } };
      const videoElement = document.createElement('video');
      videoElement.style.width = '100px';
      videoElement.style.height = '100px';
      document.body.appendChild(videoElement);

      navigator.mediaDevices
          .getUserMedia(constraints)
          .then(
            stream => {
              videoElement.src = window.URL.createObjectURL(stream);
              videoElement.onloadedmetadata = () => {
                videoElement.play();
              };
            }
          )
          .catch(
            err => {
              console.log('The following error occurred: ' + err.message)
            }
          );
  }

  initCamera();

})()

（请注意，新的和已弃用的 gUM API 都不起作用）。这会产生一个空的黑色 <video> 元素。不会触发任何错误。我最初认为这个问题与 AndroidManifest.xml 权限和 CSP 有关，但修复它们没有任何区别。

CSP 配置：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' android-webview-video-poster: data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src * blob:">

AndroidManifest.xml（功能和权限）

<uses-sdk android:minSdkVersion="14" android:targetSdkVersion="23" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

【问题讨论】：

嗨#Rafal，你能解决这个问题吗？我也面临同样的问题？
嗨 Abdul，几个月前我filed an issue on the official Jira account 现在似乎已经解决了。由于其他一些与性能相关的问题，我决定在我的项目中切换到 Unity，所以我没有机会再次测试它。也许尝试将您的 Cordova 软件包更新到最新版本（如果您还没有尝试过）？请让我知道这是否适合您，以便我们更新问题。祝你好运:)

标签： javascript android html cordova chromium

【解决方案1】：

抱歉，声誉不足，无法发表评论。我没有阅读你的代码，所以不能评论它。

我只是在视频元素上得到一个黑框。

我的问题已由 (Android 7.0) 解决：

设置 -> 应用程序 -> [我的应用程序] -> 权限 -> 相机（允许）

【讨论】：