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

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

html ios8

iPhone/ios 8：html5媒体捕获的缓冲区限制？,html,ios8,iphone-4,Html,Ios8,Iphone 4,我有一个测试页面，上面有一行HTML5媒体捕获代码（除了表单提交按钮外没有其他内容）：在ios 8.1.2的iPhone4S上，代码有时才起作用。它成功启动“拍摄照片/照片库”对话框，但无法可靠地接受新照片图像（来自手机摄像头）进行上传。Safari通常会显示一条错误消息“此页面出现问题，已重新加载”。通常，如果我清除缓存，关闭Safari并重新启动，它会再次工作，一次或两次，然后失败。一旦它失败了，如果不重新启动，它似乎永远不会再次成功目前尚不清楚这是否是缓冲区问题，甚至与新照片的文件

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

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

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

有人经历过类似的事情吗？有什么建议可以让这项工作顺利进行吗

谢谢

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

$（'#capture'）.val（''）
这将在添加新图像之前清除窗体。我尝试了reset（）
，但没有成功。因此，在添加图像后更改表单中的图像似乎存在问题-需要先将其删除，而不是简单地覆盖。
问题：
<!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>

我发现在Safari/iOS中出现这种情况的原因是主页似乎被某种方式“限制”，这意味着如果页面的CPU/GPU和/或（？）内存有点重，
在大多数情况下会随机失败
解决方案：
<!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>

我的解决方案是将
放在
的内部，大小要与输入无缝匹配。这是因为每个帧都在自己的进程中运行，但优先级比主帧低，但在这里不成问题。现在，即使是在使用大量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>

类似的情况。
目前为8.1.3，看起来似乎有道理。在我的例子中，捕获代码被动态地添加到一个div（具有正z索引），该div在主页面上淡入。与iframe效果相同，但没有CPU优势。最初，div中没有其他内容，但很明显主页仍然处于打开状态，因此您可能是对的。下面的解决方案仍然有效，但显然只适用于缓冲区问题。如果CPU也参与其中，或者相反，那么您的代码看起来是一个赢家。谢谢，我们尝试了很多无效的解决方案，但效果非常好。谢谢