HTML5：音频/视频标签部分不适用于移动设备上的Android上的摄像头/录音机源（2018年）

Question

我知道这里有很多（旧）有关该主题的文章，并且我已经阅读了全部。许多人从服务器访问媒体链接时，我想从我的应用程序访问/显示移动设备的相机和录音机拍摄的媒体文件：

<div>
  <input id="mediafile" type="file" accept="image/jpg, image/jpeg, image/png, image/giv, audio/mp3, video/mp4, video/quicktime, capture=camcorder">
</div>

当我触发此操作并且用户授予权限时，摄像机/语音记录器将打开。用户创建视频或音频文件后，我可以通过FileReader（）函数从HTML应用程序访问它。首先，我将媒体文件作为blob放入indexedDB中。如果用户想在我的应用程序中重播它，我已经定义了这个（取决于应播放什么mimeType）：

<div id="videocontainer">
   <video width="100%" controls>
      <source class="videopreview" src="">
      <source class="videopreview" src="" type="video/webm">
      <source class="videopreview" src="" type="video/ogg">
      Your browser doesn't support this format.
   </video>
</div>

<div id="audiocontainer">
   <audio controls>
      <source class="audiopreview" src="">
      <source class="audiopreview" src="" type="audio/mp3">
      <source class="audiopreview" src="" type="audio/mpeg">
      <source class="audiopreview" src="" type="audio/ogg">
      <source class="audiopreview" src="" type="audio/wav">
      Your browser doesn't support this format.
   </audio>
 </div>

我正在从indexedDB中创建一个URL，并将其附加到用户想要播放的适当媒体标签的SRC上。

虽然在所有浏览器（Safari，Chrome，Firefox）上的iOS 11.2（不支持音频录制）上，视频录制都可以正常工作，但在Android端（三星Galaxy S8，最新的操作系统/浏览器）上却存在一些问题。我总是可以调用摄像机/录音机并将媒体文件接收到我的应用程序中，但不能使其在所有浏览器中播放：

• 使用mimeTypes（视频/ ogg或视频/ webm
）时，可以在Firefox中播放视频
• 在Chrome中播放视频无效
• 在Chrome和Firefox中无法播放音频（在Firefox中，我可以按播放按钮，但是什么也没发生。）

到目前为止，我已经尝试过：

• 切换信号源类型的顺序（我已经尝试过每个星座）
• 仅使用一个来源并尝试所有有效的TYPE
• 记录器中的切换分辨率（未找到用于切换mimeType的内容）

在所有测试中，我从未见过“您的浏览器不支持这种格式”。这很奇怪。当我在“视频”标签中显示录制的视频时，请查看所附的屏幕截图，该视频在Chrome浏览器（Android）中是什么样子。

我也有一个用于“ img”拍照的标签，它在iOS和Android上像超级按钮一样工作。我只是在Android上播放音频/视频文件时遇到问题。我还检查了一些可能的控制台输出，但是什么也没有。

我犯了一些小错误，或者根本不可能。欢迎任何提示/想法/解决方案。我认为它显然可以支持手机上已经安装的媒体设备（视频/音频记录器）。