HTMLHTML5视频录制和上传

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>