HTML5如何捕获和保存视频?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (643)

我正在建立一个唱歌网站,用户可以在这里拍摄一段伴随着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>

有处理视频方式可以保存流吗?

提问于
用户回答回答于

媒体记录器

目前只支持火狐,并且处于早期状态。

WebRTC

使用WebRTC并连接到服务器(外部或本地)处理流。此流将包含同步音频和视频,你可以将流临时存储到磁盘,而不受浏览器沙箱存储区域的限制。这里的缺点将是(对于外部连接)带宽,因为这可能会降低质量,以及服务器的能力。

这就打开了使用Node.js的可能性。NET或PHP使用第三方组件(或更低级别的方法,例如使用编译的C/C++和CGI/管道(如果您正在使用)进行实际处理)。

您可以查看此开源项目,该项目支持WebRTC流的重新编码:

http://lynckia.com/licode/

LICODE项目为WebRTC提供了一个NodeJS客户端API,以便您可以在服务器端使用它,看文档

Flash

然后可以选择安装Flash并使用它-你仍然需要一个服务器辅助解决方案(Red5,Wowza或AMS)。

如果你愿意为商业解决方案付费,有如下解决方案:

http://nebb.com/

用户回答回答于

这个流是在这里创建的。

function handleVideo(stream) {
 video.src = window.URL.createObjectURL(stream);
 document.getElementById("videoElement").pause();
}

你的数据是sream.或window.URL.createObjectURL(流)。

但是你不能简单地写流或窗口。URL.createObjectURL(流)到本地存储(2mb...to Small)或webkitRequestFileSystem(Wichis是允许您使用GB的)...您需要读取输出到视频标记的数据,并将其转换为画布作为一个单独的框架保存到webkitfile系统中。

随着文件系统最近的变化,我搜索了新代码,并为您找到了这个完美的示例。https://gist.github.com/piatra/2549734

在他使用的示例中

setTimeout(function(){ draw(v, bc, w, h); }, 200);

每200 ms写一帧

如果您想要一个自定义框架,只需将200 ms更改为1000/25...(25 Fps)

或者使用请求动画框架,如果您的CPU支持这个框架,您应该可以得到大约60 fps。

现在你没有像MP4这样的格式很好的真正的流...但是你可以用另一个函数显示的很多帧...你需要一个非常快的CPU。

扫码关注云+社区

领取腾讯云代金券