USB百科
+ -

通过网页打开本地USB摄像头并实现录制-WebCamera

2023-09-07 275 0
原文转自:https://jsrun.net/rxgKp

将以下源代码使用记事本存储,并保存为.html文件。用浏览器打开:
这样就可以看打开本地摄像头的预临览。可以实现录制,保存等功能。
当然这个与WEBUSB是否有关,暂不知。。

本站演示地址:https://www.usbzh.com/tool/webcamera.html
源工程地址:https://jsrun.net/rxgKp

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>网页调取USB摄像头,播放、截图、录制等功能 - USB中文网</title>

<body>
    <button id='snap'>获取</button>
    <button id='stop'>暂停</button>
    <button id='record-start'>开始录制</button>
    <button id='record-stop'>结束录制</button>
    <p>
    <video id='video'></video>
    <canvas id='canvas'></canvas>
    <img id="img">
    <video id='record-video'></video>
    <script>
        window.addEventListener('DOMContentLoaded', function () {
            var canvas = document.getElementById('canvas'),
                context = canvas.getContext('2d'),
                video = document.getElementById('video'),
                img = document.getElementById('img'),
                mediaStream = null; // 原始媒体流

            // 访问用户媒体设备的兼容方法
            function getUserMedia(constrains, success, error) {
                if (navigator.mediaDevices.getUserMedia) {
                    // 最新标准API
                    navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
                } else if (navigator.webkitGetUserMedia) {
                    // webkit内核浏览器
                    navigator.webkitGetUserMedia(constrains).then(success).catch(error);
                } else if (navigator.mozGetUserMedia) {
                    // Firefox浏览器
                    navigator.mozGetUserMedia(constrains).then(success).catch(error);
                } else if (navigator.getUserMedia) {
                    // 旧版API
                    navigator.getUserMedia(constrains).then(success).catch(error);
                }
            }

            // 成功的回调函数
            function success(stream) {
                mediaStream = stream;

                try {
                    // 最新的方法,把流传给video对象
                    video.srcObject = stream;
                } catch (error) {
                    // 兼容webkit内核浏览器
                    var CompatibleURL = window.URL || window.webkitURL;
                    // 将视频流设置为video元素的源
                    video.src = CompatibleURL.createObjectURL(stream);
                }

                // 播放视频
                video.play();
            }

            // 异常的回调函数
            function error(error) {
                console.log("访问用户媒体设备失败:", error.name, error.message);
            }

            if ((navigator.mediaDevices && navigator.mediaDevices.getUserMedia) || navigator.getUserMedia || navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia) {
                // 调用用户媒体设备,访问摄像头
                getUserMedia({
                    video: {
                        width: 640,
                        height: 480
                    }
                }, success, error);
            } else {
                alert("你的浏览器不支持访问用户媒体设备");
            }

            // 注册拍照按钮的单击事件
            document.getElementById("snap").addEventListener("click", function () {
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                context.drawImage(video, 0, 0);
                img.src = canvas.toDataURL("image/jpeg");
            });

            // 暂停按钮的单击事件
            document.getElementById("stop").addEventListener("click", function () {
                if (video.paused) {
                    video.play();
                } else {
                    video.pause();
                }
            });

            let recorder, chunks = [];

            // 开始录制的单击事件
            document.getElementById("record-start").addEventListener("click", function () {
                chunks.length = 0;
                recorder = new MediaRecorder(mediaStream);
                recorder.ondataavailable = (e) => {
                    chunks.push(e.data);
                }
                recorder.start(100);
            });

            // 结束录制的单击事件
            document.getElementById("record-stop").addEventListener("click", function () {
                recorder.stop();

                let recorderFile = new Blob(chunks, { type: recorder.mimeType });
                let recorderVideo = document.getElementById('record-video');
                recorderVideo.autoplay = true;
                recorderVideo.width = video.videoWidth;
                recorderVideo.height = video.videoHeight;

                try {
                    recorderVideo.srcObject = recorderFile;
                } catch (error) {
                    var CompatibleURL = window.URL || window.webkitURL;
                    recorderVideo.src = CompatibleURL.createObjectURL(recorderFile);
                }
            });

        }, false);
    </script>
</body>

</html>
HID人机交互QQ群:564808376    UAC音频QQ群:218581009    UVC相机QQ群:331552032    BOT&UASP大容量存储QQ群:258159197    STC-USB单片机QQ群:315457461    USB技术交流QQ群2:580684376    USB技术交流QQ群:952873936   

0 篇笔记 写笔记

WebUSB简介
WebUSB,是由Reilly Grant和Ken Rockot开发的,它已经被推入W3C WICG,以求建立一个能够被浏览器制造商引用的平台。WebUSB API 提供了一种向 Web 安全公开 USB 设备服务的方法。它为使用现有原生 USB 库的开发人员提供熟悉的 API,并公开现有规范定义......
通过网页打开本地USB摄像头并实现录制-WebCamera
将以下源代码使用记事本存储,并保存为.html文件。用浏览器打开:这样就可以看打开本地摄像头的预临览。可以实现录制,保存等功能。当然这个与WEBUSB是否有关,暂不知。。本站演示地址:https://www.usbzh.com/tool/webcamera.html源工程地址:https://js......
关注公众号
取消
感谢您的支持,我会继续努力的!
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

您的支持,是我们前进的动力!