<!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调用摄像头拍照和录制视频的完整示例 - 搬砖的码农

# 前端 # javascript # 音视频
Logo
技术共进，成长同行——讯飞AI开发者社区

技术共进，成长同行——讯飞AI开发者社区

更多推荐

AI赋能未来已来深度人工智能在医疗行业的颠覆性变革

《Spark性能调优手册：从OOM到秒级响应的实战记录》

avatar 讯飞AI开发者社区

AI代码生成对CRUD流程的重构：Copilot在全栈开发中的渗透率分析

随着人工智能（AI）技术的迅速发展，尤其是在编程领域的应用，AI代码生成工具如GitHub Copilot已经成为了全栈开发者的重要助手。通过分析Copilot在CRUD（创建、读取、更新、删除）流程中的应用，本文旨在探索AI如何提升开发效率，同时分析其对开发流程的深远影响。??

avatar 讯飞AI开发者社区

C++与人工智能框架

重新排列范围，使得指定位置的元素等于排序后的元素，并且左边的元素都不大于它，右边的元素都不小于它。算法的原理是 “覆盖” 要删除的元素，将保留的元素移到前面，返回新的逻辑尾迭代器，但。对范围内的每个元素应用一个函数，并将结果存储在另一个范围内。移除范围内连续的重复元素，返回新的逻辑结尾迭代器。旋转范围内的元素，使中间元素成为新的第一个元素。这些算法不会改变它们所操作的容器中的元素。这些算法会修改它

avatar 讯飞AI开发者社区