我正在构建一个伴唱网站，用户可以在该网站上捕捉自己随着 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="">
然而，有许多因素会影响这一点，例如 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/
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我需要检查DateTime是否采用有效的ISO8601格式。喜欢:#iso8601?我检查了ruby是否有特定方法，但没有找到。目前我正在使用date.iso8601==date来检查这个。有什么好的方法吗？编辑解释我的环境，并改变问题的范围。因此，我的项目将使用jsapiFullCalendar，这就是我需要iso8601字符串格式的原因。我想知道更好或正确的方法是什么，以正确的格式将日期保存在数据库中，或者让ActiveRecord完成它们的工作并在我需要时间信息时对其进行操作。 最佳答案 我不太明白你的问题。我假设您想检查
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'
动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、
2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p
Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图
我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda