【前端】JavaScript调用摄像头拍照和录制视频

下页、再停留

于 2024-03-19 16:50:43 发布

阅读量440

点赞数

分类专栏：前端技术文章标签：前端 javascript 音视频

原文链接：https://refblogs.com/article/475

版权

前端技术专栏收录该内容

64 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript调用摄像头拍照、录制</title>
</head>
<body>
<video id="preview" autoplay></video>
<canvas id="canvas" style="display: none;"></canvas>
<img id="photo" alt="Photo" style="display: none;"/>
<button id="takePhotoButton">拍照</button>

<video id="recording" controls style="display: none;"></video>
<button id="startRecordingButton">开始录制</button>
<button id="stopRecordingButton">停止录制</button>

<script>
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({video: true})
            .then(function (stream) {
                var videoElement = document.getElementById("preview");
                var canvasElement = document.getElementById("canvas");
                var context = canvasElement.getContext("2d");
                var imageElement = document.getElementById("photo");
                var takePhotoButton = document.getElementById("takePhotoButton");

                videoElement.srcObject = stream;

                takePhotoButton.addEventListener("click", function () {
                    context.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
                    imageElement.src = canvasElement.toDataURL("image/png");
                    imageElement.style.display = "block";

                    // 下载图片
                    var link = document.createElement('a');
                    link.href = imageElement.src
                    link.download =`图片-${new Date().getTime()}.png`; // 设置下载文件的文件名
                    link.click();

                });

                var recordingElement = document.getElementById("recording");
                var startRecordingButton = document.getElementById("startRecordingButton");
                var stopRecordingButton = document.getElementById("stopRecordingButton");

                var mediaRecorder;

                startRecordingButton.addEventListener("click", function () {
                    var chunks = [];
                    mediaRecorder = new MediaRecorder(stream);

                    mediaRecorder.ondataavailable = function (e) {
                        chunks.push(e.data);
                    };

                    mediaRecorder.onstop = function () {
                        var blob = new Blob(chunks, {type: "video/webm"});
                        recordingElement.src = URL.createObjectURL(blob);

                        // 下载视频
                        var link = document.createElement('a');
                        link.href = URL.createObjectURL(new Blob(chunks, {type: "video/mp4"})); //这里可以修改格式 比如我修改为mp4
                        link.download =`视频-${new Date().getTime()}.mp4`; // 设置下载文件的文件名
                        link.click();
                    };

                    mediaRecorder.start();
                    recordingElement.style.display = "block";

                });

                stopRecordingButton.addEventListener("click", function () {
                    mediaRecorder.stop();
                });
            })
            .catch(function (error) {
                console.error("获取摄像头输入流失败:", error);
            });
    } else {
        console.error("浏览器不支持摄像头调用");
    }
</script>
</body>
</html>

点击拍照则自动下载

点击开始录制则开始录制视频再点击结束录制自动渲染录制的视频和下载

转：JavaScript调用摄像头拍照和录制视频的完整示例 - 搬砖的码农