Question

我尝试使用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);
          }
      );

    });

Answer 1

我使用getusermedia来增强现实背景。我的黑屏与你一模一样，让我发疯，所以也许我可以帮忙。我昨天才为我解决了。

首先，我必须告诉你我使用了人行横道，当我运行我的项目时，我发现了一些消息，说'cordova.deviceready＆＃39;无法运行，或类似的东西。我更新到最后一个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但对我来说其他行没有。当我添加它们时，所有工作都很好!!

加成

请注意一些事情。如果您在显示相机Feed的Html5视频中设置了自动播放，则会获得快速响应的视频，而不是滞后的视频。你知道吗？我没有。

希望有所帮助。

getUserMedia得到黑屏

1 个答案:

加成