javascript – 如何在Android上使用带有Cordova的getUserMedia？

2019-07-11 08:26:42 阅读：168 来源： 互联网

标签：javascript android cordova chromium html

使用getUserMedia在视频元素中预览相机输入在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();

})()

(请注意,新的和不推荐使用的gUM API都不起作用).
这导致空的黑色<视频>元件.没有错误被触发.
我最初假设这个问题与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" />

解决方法:

对不起,没有足够的声誉评论.
我没有看过您的代码,因此无法对其进行评论.

我只是在视频元素上得到一个黑盒子.

我的问题由(Android 7.0)修复：

Settings -> Apps -> [My App] -> Permissions -> Camera (allow)

标签：javascript,android,cordova,chromium,html
来源： https://codeday.me/bug/20190711/1430203.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 如何在Android上使用带有Cordova的getUserMedia？