HTML5视频录制和上传
（图片来源网络，侵删）
HTML5视频录制
1、使用getUserMedia API获取摄像头和麦克风权限
2、创建一个video元素用于显示视频流
3、使用canvas元素进行实时绘制
4、将绘制的内容转换为Blob对象
5、使用FileReader API将Blob对象转换为文件
HTML5视频上传
1、创建一个input元素用于选择文件
2、监听input元素的change事件，获取选中的文件
3、使用FileReader API读取文件内容
4、将文件内容发送到服务器进行保存
以下是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML5视频录制和上传</title>
</head>
<body>
<h1>HTML5视频录制和上传</h1>
<button id="start">开始录制</button>
<button id="stop" disabled>停止录制</button>
<video id="video" width="640" height="480" autoplay></video>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const startButton = document.getElementById('start');
const stopButton = document.getElementById('stop');
let mediaRecorder;
let chunks = [];
// 获取摄像头和麦克风权限
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
video.srcObject = stream;
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
startButton.disabled = true;
stopButton.disabled = false;
})
.catch(error => console.error('无法获取摄像头和麦克风权限', error));
// 开始录制
startButton.addEventListener('click', () => {
mediaRecorder.start();
startButton.disabled = true;
stopButton.disabled = false;
});
// 停止录制并上传视频
stopButton.addEventListener('click', () => {
mediaRecorder.stop();
startButton.disabled = false;
stopButton.disabled = true;
uploadVideo();
});
// 将绘制的内容转换为Blob对象并上传视频
function uploadVideo() {
const canvasContext = canvas.getContext('2d');
canvasContext.drawImage(video, 0, 0, canvas.width, canvas.height);
const dataURL = canvas.toDataURL('image/webm'); // 转换为WebM格式的视频数据URL
const fileName = 'recordedvideo.webm'; // 设置保存的文件名
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true); // 发送POST请求到服务器的/upload路径
xhr.setRequestHeader('ContentType', 'application/octetstream'); // 设置请求头为二进制流类型
xhr.onload = () => {
if (xhr.status === 200) {
console.log('视频上传成功');
} else {
console.error('视频上传失败', xhr);
}
};
xhr.send(dataURL); // 发送视频数据URL到服务器进行保存
}
</script>
</body>
</html>
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/477027.html
微信扫一扫