仅使用 javascript/html5 获取麦克风/网络摄像头记录流答案

【问题标题】：Get mic/webcam record stream using javascript/html5 only仅使用 javascript/html5 获取麦克风/网络摄像头记录流
【发布时间】：2023-03-18 00:50:02
【问题描述】：

我制作了一个 Web 应用程序，需要使用 java 脚本和 html5（无 flash）从 pc/mobile mic/camera 记录流。我该怎么做？

【问题讨论】：

你在问你可以使用什么样的库？
是的，或者也许是我可以在个人电脑/移动设备中用于网络应用程序的 API
用户需要确认该操作。否则，这是一个安全漏洞。
没问题怎么办？

标签： javascript asp.net ios html web-applications

【解决方案1】：

navigator.getUserMedia ( constraints, successCallback, errorCallback );

【讨论】：

如果我没记错的话，没有其他方法可以为 webapp 获取流，对不起。

【解决方案2】：

有两种方法，getusermedia 和使用输入的 legacy 方法，这是 ios6 允许的：

老办法：

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

目前的方式：

window.URL = window.URL || window.webkitURL;
navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia || navigator.msGetUserMedia;

var video = document.querySelector('video');

if (navigator.getUserMedia) {
  navigator.getUserMedia({audio: true, video: true}, function(stream) {
    video.src = window.URL.createObjectURL(stream);
  }, onFailSoHard);
} else {
  video.src = 'somevideo.webm'; // fallback.
}

这些样本是从here 复制的。 HTML5Rocks 也有许多工作示例。

【讨论】：

好的，我现在正在看它工作。您应该发布您的代码，并就哪些问题不工作提出具体问题，我会尽力为您提供进一步的帮助。
您能在此处发布指向执行此操作的网站的链接吗？
检查这个Fiddle是否适合你。
我今天测试的 iPhone 是剩下的，但是安卓的默认浏览器允许输入法，当我按下“选择文件”时，它会提供一个对话框来浏览文件，还有一个选择是网络摄像头。 Here 包含 ios6 更新的链接。如果你向下滚动到 IOS6 和 HTML5 开发，你可以看到这是隐含的。
我正在运行 ios6 的新 iPad 上测试上面链接的 Fiddle，当我按下 Choose File 按钮时，我得到一个带有选项 Take Video 和 Choose Existing 的工具提示。当我选择Take Video 时，它会打开相机应用程序，允许我录制视频并保存。但是，当涉及到流式传输时，这可能不是您要寻找的，因为视频被放置在视频标签中并被广播。这在 ios 中是不可能的。