getUserMedia 出现黑屏答案

【问题标题】：getUserMedia Got Black ScreengetUserMedia 出现黑屏
【发布时间】：2017-03-17 03:43:18
【问题描述】：

我尝试使用 cordova + crosswalk 显示来自手机摄像头的视频，并且可以从 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);
          }
      );

    });

【问题讨论】：

标签： cordova html5-video getusermedia crosswalk

【解决方案1】：

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

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

其次，我使用 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 视频中设置 autoplay 来显示相机供稿，您将获得快速响应的视频，而不是滞后的视频。你知道吗？我没有。

希望对您有所帮助。

【讨论】：