如何在Android的Cordova上使用getUserMedia?

Raf*_*zak 7 html javascript android chromium cordova

使用getUserMediaChrome 预览视频元素中的摄像头输入在Chrome中效果很好,但是当我在Cordova容器中运行相同的代码时,视频显示就会中断。有什么想法会导致这种情况吗?

示例代码。

添加了使用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();

})()
Run Code Online (Sandbox Code Playgroud)

(请注意,新的和已弃用的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:">
Run Code Online (Sandbox Code Playgroud)

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" />
Run Code Online (Sandbox Code Playgroud)

小智 1

抱歉,没有足够的声誉来发表评论。我没有读过你的代码,所以无法评论。

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

我的问题已通过(Android 7.0)解决:

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