Question

我有一个测试页面，其中包含以下HTML5媒体捕获代码行（除了表单提交按钮之外别无其他）：

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

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

目前尚不清楚这是否是一个缓冲区问题，或者甚至与新照片的文件大小有关，但考虑到它确实有效，它似乎不会出现错误代码或与OS /浏览器不兼容。

有人经历过类似的事吗？有任何建议如何使这项工作？

由于

Answer 1

问题：

我发现在Safari / iOS中发生这种情况的原因是主页似乎是＆＃34;限制＆＃34;不知何故，这意味着如果页面有点重CPU / GPU和/或（？）内存，<input capture="camera" ...>大部分时间都会随机失败。

解决方案：

我的解决方案是将<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>

类似的东西。

Answer 2

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

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

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

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

2 个答案: