iPhone/ios 8：html5 媒体捕获的缓冲区限制？答案

【问题标题】：iPhone/ios 8: buffer limit on html5 media capture?iPhone/ios 8：html5 媒体捕获的缓冲区限制？
【发布时间】：2015-01-04 08:19:51
【问题描述】：

我有一个带有以下 HTML5 媒体捕获代码行的测试页面（除了表单提交按钮之外没有其他内容）：

<input type=file accept=image/* id=capture capture=camera>

在装有 ios 8.1.2 的 iPhone 4s 上，该代码有时只能工作。它成功启动了“拍照/照片库”对话框，但它不能可靠地接受新照片图像（来自手机相机）进行上传。 Safari 通常会显示错误消息“此页面出现问题，已重新加载”。通常，如果我清除缓存，关闭 Safari 并重新启动，它会再次工作，一次或两次，然后失败。一旦失败，如果不重新启动，它似乎永远不会再次成功。

目前尚不清楚这是否是缓冲区问题，或者甚至与新照片的文件大小有关，但鉴于它有时确实有效，它似乎不是代码错误或不兼容操作系统/浏览器。

有人遇到过类似的事情吗？任何建议如何使这项工作？

谢谢

【问题讨论】：

目前 8.1.3 谢谢

标签： html ios8 iphone-4

【解决方案1】：

问题：

我发现在 Safari/iOS 中发生这种情况的原因是主页似乎被“节流”了，这意味着如果页面有点重 CPU/GPU 和/或（？）内存明智的@ 987654321@ 大部分时间随机失败。

解决方案：

我对此的解决方案是将<input capture="camera" ...> 放在<iframe> 内，其大小可以无缝地适应输入。这是有效的，因为每个框架都在自己的进程中运行，但优先级低于主框架，但足以在这里不成问题。即使在使用大量 GPU 的非常繁重的 UI 应用程序中，它现在也能 100% 工作。

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #camera-button {
          display: inline-block;
          width: 100px;
          height: 100px;
          background: red;
          border: 5px solid #eee;
          padding: 10px;
          z-index: 2147483647;
        }

        #camera-frame {
          width: 100px;
          height: 100px;
          background-color: transparent;
          opacity: 0;
        }
    </style>
</head>
<body>
    <span id="camera">
      <iframe id="camera-frame" src="camera.html" scrolling="no" frameBorder="0" allowTransparency="true" seamless>
    </span>

    <script>
      (function() {
          window.onCameraChanged = function(event) {
              var files;

              console.log("[index.html]: snap!", arguments);

              if (event.target) {
                  files = event.target.files;

                  console.log("[index.html]: files", files);

                  alert("[index.html]:", files.length, "files from camera.");
              }
          };
      }).call(this);
    </script>
</body>
</html>

camera.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body,
        html {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
        }

        #camera-input {
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          outline: none;
          box-shadow: none;
          border: none;
        }
    </style>
</head>
<body>
    <input id="camera-input" type="file" capture="camera" accept="image/*" onchange="window.onCameraChanged">

    <script>
      (function() {
          var el;

          window.onCameraChanged = function(event) {
              var files;

              console.log("[camera.html]: snap!", arguments);

              if (event.target) {
                  files = event.target.files;

                  if (window.parent) {
                    if (typeof window.parent.onCameraChanged === 'function') {
                      window.parent.onCameraChanged(event);
                    }

                    return window.parent.cameraFiles = files;
                  }
              }


          if (el = document.querySelector('#camera')) {
            el.onchange = window.onCameraChanged; // chrome
          }

      }).call(this);
    </script>
</body>
</html>

类似的东西。

【讨论】：

这看起来很合理。在我的例子中，捕获代码被动态添加到一个 div（具有正 z-index），该 div 在主页上淡入淡出。与您的 iframe 效果相同，但没有 CPU 优势。最初 div 中没有其他内容 - 但显然主页仍处于打开状态，因此您可能是对的。下面的解决方案仍然有效，但显然仅适用于缓冲区问题。如果 CPU 也参与其中，或者相反，那么您的代码看起来像是赢家。谢谢
我们尝试了很多不起作用的解决方案，但效果很好。谢谢！

【解决方案2】：

我将提供此作为暂定解决方案，因为它尚未失败，但我不确定为什么需要它。单击按钮捕获图像时，我现在要做的第一件事是：

$('#capture').val('');

在添加新图像之前清除表单。我试过reset()，但没用。因此，一旦添加了表单中的图像就会出现问题 - 需要先将其删除，而不是简单地覆盖。

【讨论】：