HTML输入相机图像在iPhone视频上不清晰

Question

我的网站允许用户使用一些基本的html记录和上传文件

<input type="file" accept="video/*;capture=camcorder">

一切正常；但是，我注意到，与我通常在iPhone上录制视频时相比，我的视频很模糊。我已经在多种设备上进行了测试，但都模糊。问题是使用此输入元素时，相机模糊。与我刚使用iPhone相机应用程序相比，为什么输入元素会使相机模糊？我可以向html元素添加一些属性吗？我需要指定尺寸吗？等等

这是我手机上的区别。这是使用html输入时的屏幕截图（是的，我尝试单击以聚焦）：

这是普通iPhone相机胶卷的屏幕截图（未通过网络输入打开时）：

如何使此输入元素的相机看起来像普通的iPhone相机应用一样好？

Answer 1

尝试使用下面的类#video和以下代码仅向您展示如何使用它：

#video { 
   position: absolute;
   top: 0px;
   left: 0px;
   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;
   z-index: -1000;
   overflow: hidden;
  -moz-filter: blur(125px);
    -webkit-filter: blur(125px);
      -o-filter: blur(125px);
  -ms-filter: blur(125px);
  filter: blur(125px);
}

<video id="video" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
     <source src="http://ak3.picdn.net/shutterstock/videos/4207399/preview/stock-footage-man-hands-typing-on-a-computer-keyboard.mp4" type="video/mp4">
     <source src="movie.webm" type="video/webm">
          Sorry, your browser does not support HTML5 video.
</video>

有关更多信息，HTML media capture