个人中心
文章发布
退出
作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont？
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
25
4
我正在构建一个伴唱网站，用户可以在该网站上捕捉自己随着 mp3 一起唱歌的视频。我已经到了可以访问相机并显示实时流的地步，但是如何保存视频以便用户可以下载并保留它？
我的代码:
<!DOCTYPE html>
<head>
<link href="css/bootstrap.css" rel="stylesheet"">
<style>
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
}
</style>
</head>
<body>
<button class="btn" onclick="show();">Record!</button>
<div id="record" style="display:none; text-align:center;">
<div id="container">
<video autoplay="false" id="videoElement">
</video>
</div>
<button id="play" class="btn" onclick="play()">Start Recording!</button>
<audio id="song" style="hidden">
<source src="love.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script>
var video = document.querySelector("#videoElement");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true, audio: true}, handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
document.getElementById("videoElement").pause();
}
function videoError(e) {
alert("There was an error with the video stream.\nCheck that your webcam is connected.");
}
function play()
{
var video = document.getElementById("videoElement");
var music = document.getElementById("song");
var button = document.getElementById("play");
if (video.paused) {
video.play();
music.play();
button.textContent = "Stop Recording";
} else {
video.pause();
music.pause();
button.textContent = "Continue Recording";
}
}
function show()
{
document.getElementById("record").style.display="block";
}
</script>
</body>
在 handleVideo 中有没有一种方法可以在流出现时保存它之类的？
最佳答案
更新 12/2014 仅供引用，有一个名为 MediaRecorder 的新 API。 。目前仅在 Firefox 中受支持，并且处于早期状态，但需要注意一些事项。
在纯本地环境中，您不能也不会获得很好的结果。您可以使用 canvas 元素通过在其上绘制来保存帧，并将 jpeg 图像与音频(必须单独保存)一起从视频流存储到本地存储，然后在后期使用库创建例如 MJPEG文件(AFAIK 目前没有任何支持音频的文件)。
然而，使用这种方法您会遇到几个问题:使用 JavaScript 处理所有这些信息会花费很多时间 - 只需将帧保存为 jpeg，将其转换为 blob 并将其保存到文件系统或索引数据库中即可消耗您可用于单个帧的大部分(或更多)时间预算。
您将无法将视频帧与音频正确同步 - 您可以保存时间戳并使用它来“校正”帧，但您的 FPS 很可能会发生变化，从而产生不稳定的视频。即使您按时间顺序获得同步，您也可能会遇到音频和视频不匹配的延迟问题，因为它们最初是两个独立的流。
但视频很少超过 30 FPS(美国)或 25 FPS(欧洲)，因此您不需要浏览器可能提供的完整 60 FPS 速率。这为美国 (NTSC) 系统提供了每帧约 33 毫秒的更好时间预算，如果您在使用 PAL 系统的国家/地区，则可以多一些。使用更低的帧速率没有错，但在某个点(< 12-15 FPS)你会开始注意到严重缺乏平滑度。
然而，有许多因素会影响这一点，例如 CPU、磁盘系统、框架尺寸等。 JavaScript 是单线程的，canvas API 是同步的，因此 12 核 CPU 在这方面帮不了你太多，Web Workers 的用处目前几乎仅限于更长时间运行的任务。如果您有大量可用内存，您可以将帧缓存在内存中，这是可行的，并在后期进行所有处理，这同样需要一些时间。以 720P @ 30 FPS 录制的流每秒将消耗至少 105 mb(这只是原始数据，不包括浏览器对缓冲区的内部处理，这可能会增加一倍甚至三倍)。
更好的解决方案可能是使用 WebRTC 并连接到服务器(外部或本地)并在那里处理流。此流将包含同步的音频和视频，您可以将流临时存储到磁盘，而不受浏览器沙盒存储区域的限制。这里的缺点是(对于外部连接)带宽，因为这可能会降低质量以及服务器的能力。
这开启了使用 Node.js、.Net 或 PHP 等第三方组件进行实际处理的可能性(或者更底层的方法，例如使用编译的 C/C++ 和 CGI/管道，如果你进入那个)。
你可以看看这个支持WebRTC流重新编码的开源项目:
http://lynckia.com/licode/
Licode 项目为 WebRTC 提供了一个 NodeJS 客户端 API，以便您可以在服务器端使用它，see the docs
这基本上就是 HTML5 的当前状态可以达到的程度。
然后有安装和使用 Flash 的选项 - 你 will still need a server副解决方案(Red5、Wowza 或 AMS)。
这可能会给您带来不那么痛苦的体验，但您需要在浏览器中安装 Flash(显然)，并且在许多情况下，由于许可证的原因，成本因素会更高(参见 Red5 for a open-source 备选方案)。
如果您愿意为商业解决方案付费，可以使用如下解决方案:
http://nimbb.com/
关于javascript - HTML5 捕获和保存视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17331531/
25
4
0
多个 ChildException catch block 和一个 Exception catch block 之间哪个更好？ 更好，我的意思是以良好的实践方式。 举例说明: public stati
我正在尝试将脱机计算机记录在文本文件中，以便以后可以再次运行它们。似乎没有被记录或捕获。 function Get-ComputerNameChange { [CmdletBinding()]
我正在将 Scala 'try/catch' 测试代码转换为使用 'intercept' 有没有我不应该使用“拦截”的场景？使用 'intercept' 而不是 'try/catch' 的唯一好处是简
我对erlang很陌生，我正在尝试使用基本的try/catch语句来工作。我正在使用Webmachine处理一些请求，我真正想做的就是解析一些JSON数据并将其返回。如果JSON数据无效，我只想返回一
我不知道如何捕获删除按键。我发现在 ASCII 代码表中，它位于 127 位，但是 if (Key = #127) then 却无济于事。 然后我检查了 VK_DELETE 的值，它是 47。尝试使用
我很少在失败时对数据库查询使用唯一的错误消息 我经常使用简短的标准消息，例如“数据库错误/失败。请与网站管理员联系”或类似的消息。或自动发送给我 我正在寻找一种在PDO中全局设置一次try {}和ca
我有一个变量CompletableFuture completableFuture 。我希望能够使用任何类型的对象来完成它。例如:completableFuture.complete(new Stri
我认为这是基本的东西，但我不知道该怎么做。为什么我得到 IOException never throw in body of相应的 try 语句 public static void main(Str
我在此代码中遇到 JSON 异常: JSONObject jObject = new JSONObject(JSONString); pontosUsuario.setIdUsuari
我正在尝试打印出用单引号括起来的文本。 /bin/bash -lc '/home/CASPER_REPORTS/scripts/CASPER_gen_report.sh CASPER_1' /bin/
我这里遇到了一点问题。我想弄清楚如何捕获 IllegalArgumentException。对于我的程序，如果用户输入负整数，程序应该捕获 IllegalArgumentException 并询问用户
我无法理解 EJBTransactionRolledbackException。 我有实体: @Entity public class MyEntity { @Id @Generate
对于我给自己提出的以下挑战，如果社区的经验给我任何建议，我将不胜感激 - 即，这里有任何关于最佳方法/方向的指示吗？ 要求 允许收集/实时监控从用户 Windows PC 到一组特定 IP 地址(或
我想在我的 ABAP 代码中捕获并处理 SAPSQL_DATA_LOSS。 我试过这个: try. SELECT * FROM (rtab_name) AS rtab
我知道捕获错误不是一个好的做法，但在这种情况下，这样做很重要。我正在尝试运行一个包含游戏一部分的 jar，但它给了我一个 unsatisfiedlink 错误，但这是有趣的部分:我正在使用这段代码:
我有一个表单页面，当我保存它时，它会覆盖数据库。表单页面中有一个文本框，允许用户输入 4000 个字符，但如果用户输入的字符超过此值，则会出现以下错误: ERROR 15:54:05 Abstrac
我想知道在python中绑定(bind)键的最简单方法 例如，默认的 python 控制台窗口出现并等待，然后在 psuedo -> if key "Y" is pressed: print (
下面是别人写的类。 我面临的问题是，当它进入parse method时与 null as the rawString ，它正在扔NumberFormatException 。 所以我想做的是，我应该捕
我有一个简单的脚本，可以捕获所有鼠标单击，除非您单击实际有效的内容。链接、Flash 视频等。我如何调整它，以便无论用户点击什么，在视频加载、新页面加载等之前，它都会发送我构建的简单 GET 请求？
我有一个带有一些选择列表的表单，当选择某些值时，这些列表将显示/隐藏更多输入字段。 问题是大多数用户都是数据输入人员，因此他们在输入数据时大量使用键盘，并且选择列表的 change 事件仅在焦点离开输
我是一名优秀的程序员,十分优秀！