html5 录制视频demo,HTML5音视频采集demo
时间: 2023-07-27 14:08:54 浏览: 129
以下是一个简单的HTML5录制视频的Demo:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Video Recording Demo</title>
</head>
<body>
<h1>HTML5 Video Recording Demo</h1>
<video id="video" width="640" height="480" autoplay></video>
<button id="startButton">Start Recording</button>
<button id="stopButton" disabled>Stop Recording</button>
<script>
var video = document.querySelector("#video");
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(function(stream) {
video.srcObject = stream;
video.play();
var mediaRecorder = new MediaRecorder(stream);
var chunks = [];
document.querySelector("#startButton").onclick = function() {
mediaRecorder.start();
document.querySelector("#startButton").disabled = true;
document.querySelector("#stopButton").disabled = false;
};
document.querySelector("#stopButton").onclick = function() {
mediaRecorder.stop();
document.querySelector("#startButton").disabled = false;
document.querySelector("#stopButton").disabled = true;
};
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
};
mediaRecorder.onstop = function(e) {
var blob = new Blob(chunks, { 'type' : 'video/mp4' });
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'video.mp4';
document.body.appendChild(a);
a.click();
setTimeout(function() {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 0);
};
});
</script>
</body>
</html>
```
这段代码会显示一个视频播放器和两个按钮,点击“Start Recording”按钮开始录制视频,点击“Stop Recording”按钮停止录制。录制完成后,会自动下载一个视频文件。
以下是一个简单的HTML5音视频采集的Demo:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Audio/Video Capture Demo</title>
</head>
<body>
<h1>HTML5 Audio/Video Capture Demo</h1>
<video id="video" width="640" height="480" autoplay></video>
<audio id="audio" autoplay></audio>
<button id="startButton">Start Capture</button>
<button id="stopButton" disabled>Stop Capture</button>
<script>
var video = document.querySelector("#video");
var audio = document.querySelector("#audio");
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(function(stream) {
video.srcObject = stream;
audio.srcObject = stream;
document.querySelector("#startButton").onclick = function() {
video.play();
audio.play();
document.querySelector("#startButton").disabled = true;
document.querySelector("#stopButton").disabled = false;
};
document.querySelector("#stopButton").onclick = function() {
video.pause();
audio.pause();
document.querySelector("#startButton").disabled = false;
document.querySelector("#stopButton").disabled = true;
};
});
</script>
</body>
</html>
```
这段代码会显示一个视频播放器、一个音频播放器和两个按钮,点击“Start Capture”按钮开始采集音视频,点击“Stop Capture”按钮停止采集。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)