cordova - getUserMedia 出现黑屏

Question

我尝试使用 cordova + crosswalk 显示来 self 的手机摄像头的视频，并且可以从 getUserMedia() 获取视频流，但是当流显示在 html5 视频标签上时，它显示黑屏。

我已经为此苦苦挣扎了 2 周，但没有取得任何进展，请帮忙如何使视频显示正常工作？

下面是我获取视频流并显示它的代码

navigator.mediaDevices.enumerateDevices()
    .then(function(devices) {

      var sourceID = "";
      var camera = [];
      var currCameraIndex = 0;
      var videoContraint = false;

      devices.forEach(function(info) {
          if (info.kind == "videoinput") {
              camera.push(info.deviceId);
          }
      });

      if(video){
        videoContraint = {
            mandatory: {},
            optional: [{
                sourceId: camera[currCameraIndex]
            }]
        };
      }

      navigator.getUserMedia({
              audio: true,
              video: videoContraint
          },
          function(stream) {

              if(stream.active){

                localVideo = document.getElementById("local-video");
                localVideo.onloadedmetadata = function(e) {
                   localVideo.play();
                };

              } else {
                alert('Failed to access your camera or microphone');  
              }

          },
          function(err) {
              alert('Cannot access your camera or microphone:' + err);
          }
      );

    });

Answer 1

我使用 getusermedia 来制作增强现实背景。我的黑屏和你一模一样，快把我逼疯了，所以也许我可以帮忙解决这个问题。我昨天刚帮我解决了。

首先，我必须通知您，我使用人行横道并且在运行我的项目时发现一些消息说“cordova.deviceready”无法运行，或类似的东西。我更新到最后一个 Cordova (6.5.0) 并删除并再次添加我想要的插件。我删除并添加了人行横道，奇迹般地修复了人行横道，并且正确调用了设备就绪事件。

其次，我使用 Onsen Ui，因为它非常棒!而且我不想在我的应用程序中使用不必要的东西，例如 Angular 之类的东西。对我来说只是一个更简单的应用程序(我在看着你，Ionic!!)。我开始在 ons.ready(function () {..})

上使用 getusermedia

现在，我找到了适合我的解决方案。在 platforms\android\res\xml\config.xml 添加以下行:

<feature name="Camera">
    <param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
</feature>

在 platforms\android\AndroidManifest.xml 添加以下内容(由于某些原因它们不会自动添加):

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

android.permission.WRITE_EXTERNAL_STORAGE 可能会被添加，但对我来说其他行没有。当我添加它们时，一切正常!!

奖金

请注意一些事情。如果您在显示摄像头画面的 Html5 视频中设置自动播放，您会得到一个快速响应的视频，而不是一个滞后的视频。你知道吗？我没有。

希望对您有所帮助。