H5 调用摄像头录像，扫一扫

飞飞987

于 2024-04-12 15:26:45 发布

阅读量268

点赞数 2

分类专栏： html 文章标签： html5 javascript

本文链接：https://blog.csdn.net/u012467744/article/details/137682681

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

H5 调用录像

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>H5 调用录像</title>
    <style>
        video {
            width: 100%;
            max-width: 500px;
            height: auto;
        }
    </style>
</head>
<body>
<h1>摄像头录制视频</h1>
<video id="video" autoplay></video>
<button id="startButton">开始录制</button>
<button id="stopButton">停止录制</button>
<button id="ph">拍照</button>
<video id="video1" autoplay></video>
<canvas id="canvas"></canvas>

<script type="text/javascript">
    // 获取页面元素
    const video = document.getElementById('video');
    const video1 = document.getElementById('video1');
    const startButton = document.getElementById('startButton');
    const stopButton = document.getElementById('stopButton');
    const downloadButton = document.querySelector("#download");
    const canvas = document.querySelector('#canvas');
    const ph = document.querySelector('#ph');

    //const socket = new WebSocket('ws://your-server-address');

    // 媒体设备约束
    const constraints = {
        video: {
            facingMode: {
                exact: "environment",  //强制使用后置摄像头
            },
            width: {
                min: 1024,
                ideal: 1280,
                max: 1920
            },
            height: {
                min: 776,
                ideal: 720,
                max: 1080
            },
            frameRate: {   //帧率
                ideal: 30,
                max: 45
            }
        },
        //audio: true,
         audio: {
            volume: 0.5,
            sampleSize: 16,
            sampleRate: 44100,
            echoCancellation: true,
            noiseSuppression: true,
            autoGainControl: true
        }
        // # sampleRate：指定一个所需的采样率，不确定它应该被用作编码设置还是作为硬件要求，越高越好（比如CD的采样率就是44000 samples/s或44kHz）。
        // # sampleSize：每个采样点大小的位数，越高越好（CD的采样大小为16 bits/sample）
        // # volume：从0（静音）到1（最大音量）取值，被用作每个样本值的乘数
        // # echoCancellation：是否使用回声消除来尝试去除通过麦克风回传到扬声器的音频
        // # autoGainControl：是否要修改麦克风的输入音量,在打开它之后，如果你对着麦克风大喊大叫，就能明显的感受到音量被降下来了
        // # noiseSuppression：是否尝试去除音频信号中的背景噪声
        // # latency：以秒为单位，控制开始处理声音和下一步可以使用数据之间的时间，想不明白你为什么想要设更高的延迟，但是音频编解码器的延时确实有所不同。
        // # channelCount：规定了单声道的时候为1，立体声的时候为2。
    };

    // 定义全局变量
    let mediaRecorder;
    let recordedChunks = [];
    let tt = 0

    // 获取摄像头流
    navigator.mediaDevices.getUserMedia(constraints)
        .then(stream => {
            video.srcObject = stream;

            // 将视频流发送到服务器
            //socket.onopen = function() {
            //    socket.send(stream);
            //};

            mediaRecorder = new MediaRecorder(stream);

            // 当开始录制时，将数据存储在recordedChunks数组中
            mediaRecorder.ondataavailable = event => {
                recordedChunks.push(event.data);
            };

            // 当录制完成时，将录制视频呈现在video元素中
            mediaRecorder.onstop = () => {
                const recordedBlob = new Blob(recordedChunks, { type: 'video/webm' });
                video1.src = URL.createObjectURL(recordedBlob);
                video.pause();
                video1.play();
                video1.controls = true;
            };
        })
        .catch(err => {
            console.error(`摄像头流获取失败: ${err}`);
        });


    // 处理服务器发送的数据（假设服务器回传同样的数据用于播放）
    //socket.onmessage = function(event) {
    //    // 将服务器发送的数据设置为video元素的源
    //    video.srcObject = event.data;
    //};

    // 当点击“开始录制”按钮时，开始录制
    startButton.addEventListener('click', () => {
        recordedChunks = [];
        video.play();
        mediaRecorder.start();

        tt = setInterval(function(){
            //takePhoto();
        }, 33.3333333)
    });

    // 当点击“停止录制”按钮时，停止录制
    stopButton.addEventListener('click', () => {
        clearInterval(tt);
        mediaRecorder.stop();
    });


    // 拍照
    function takePhoto() {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0);
    }
    ph.addEventListener('click', takePhoto);

</script>

</body>
</html>

H5 调用扫一扫

<html>
<head>
    <title>H5 调用扫一扫</title>
</head>
<body>
<div style="width: 500px" id="reader"></div>
</body>
<div id="qr-reader" style="width:500px"></div>
<div id="qr-reader-results"></div>
<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
<script>
    var resultContainer = document.getElementById('qr-reader-results');
    var lastResult, countResults = 0;

    function onScanSuccess(decodedText, decodedResult) {
        if (decodedText !== lastResult) {
            ++countResults;
            lastResult = decodedText;
            // Handle on success condition with the decoded message.
            console.log(`Scan result ${decodedText}`, decodedResult);
            alert(`Scan result ${decodedText}`);
        }
    }

    var html5QrcodeScanner = new Html5QrcodeScanner(
        "qr-reader", { fps: 10, qrbox: 250 });
    html5QrcodeScanner.render(onScanSuccess);
</script>
</html>