HTML 5视频录制和存储流 [英] HTML 5 video recording and storing a stream
问题描述
使用Html 5我想记录视频并将流保存到本地文件中。以下是代码。在一个按钮中点击它已经调用摄像头，并在HTML的'VIDEO'标签中捕捉视频。我可以将流存储到本地文件中吗？或者我可以将它作为MP4文件存储？
<！DOCTYPE html>
< html>
< head>
< script type =text / javascript>
函数enter（）{
if（navigator.mozGetUserMedia）{
navigator.myGetMedia = navigator.mozGetUserMedia;
navigator.myGetMedia（{video：true}，connect，error）;
}
else {
alert（NO）;
}
函数connect（stream）{
var video = document.getElementById（my_video）;
video.src = window.URL？ window.URL.createObjectURL（stream）：stream;
video.play（）;
var canvas = document.getElementById（c）;
}
函数错误（e）{console.log（e）; }
}
< / script>
< / head>
< body>
< canvas width =640height =480id =c>< / canvas>
< input type =buttonvalue =RECORDonClick =enter（）/>
< input type =buttonvalue =SAVE/>
< video id =my_videowidth =640height =480/>
< / body>
< / html>
我想在点击保存按钮时保存流。
<记录RTC：WebRTC音频/视频录制
https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC
- Chrome和Firefox的音频录制
- Chrome的Video / Gif录制; （Firefox有点问题，很快就会恢复）
演示：https://www.webrtc-experiment.com/RecordRTC/
从getUserMedia（）创建.webm视频
$ b http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia
演示： http://html5-demos.appspot.com/static /getusermedia/record-user-webm.html
捕获音频和视频HTML5中的视频
http：/ /www.html5rocks.com/en/tutorials/getusermedia/intro/
Using Html 5 I want to record video and save the stream into a local file. Given below is the code. In a button click it already invokes the camera and captures the video in the 'VIDEO' tag of HTML. Can I store the stream into a local file? Or can I store it as MP4 file?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function enter() {
if (navigator.mozGetUserMedia) {
navigator.myGetMedia=navigator.mozGetUserMedia;
navigator.myGetMedia({video: true}, connect, error);
}
else {
alert("NO");
}
function connect(stream) {
var video = document.getElementById("my_video");
video.src = window.URL ? window.URL.createObjectURL(stream) : stream;
video.play();
var canvas = document.getElementById("c");
}
function error(e) { console.log(e); }
}
</script>
</head>
<body>
<canvas width="640" height="480" id="c"></canvas>
<input type="button" value="RECORD" onClick="enter()"/>
<input type="button" value="SAVE" />
<video id="my_video" width="640" height="480"/>
</body>
</html>
I want to save the stream upon a save button click.
RecordRTC: WebRTC audio/video recording
https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC
- Audio recording both for Chrome and Firefox
- Video/Gif recording for Chrome; (Firefox has a little bit issues, will be recovered soon)
Demo : https://www.webrtc-experiment.com/RecordRTC/
Creating .webm video from getUserMedia()
http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia
Demo : http://html5-demos.appspot.com/static/getusermedia/record-user-webm.html
Capturing Audio & Video in HTML5
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
这篇关于HTML 5视频录制和存储流的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
