天天看點
傳回

js調用攝像頭進行錄制、截取圖檔并儲存至本地

​​https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia​​

js調用攝像頭進行錄制、截取圖檔并儲存至本地

代碼如下，可自行嘗試

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>recorderVideo</title>
</head>
<body>
    <div id="contentHolder">
        <video id="video" width="600px" height="300px" controls></video>
    </div>
    <button onclick="startRecorder()">開始錄屏</button>
    <button onclick="stopRecorder()">停止錄屏</button>
    <button onclick="clipPhoto()">截取圖檔</button>
</body>
<script>
    // src 是播多媒體檔案的；srcObject 是實時流
    let mediaRecorder;  // 視訊錄制資料
    let mediaStreamTrack; // 視訊實時流
    // 開始錄屏
    async function startRecorder() {
        mediaStreamTrack = await navigator.mediaDevices.getUserMedia({
            video: true
        })
        video.srcObject = mediaStreamTrack;
        video.onloadedmetadata = () => video.play();

        // 需要更好的浏覽器支援
        const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
            ? "video/webm; codecs=vp9"
            : "video/webm";
        mediaRecorder = new MediaRecorder(mediaStreamTrack, {
            mimeType: mime
        })

        let chunks = []
        mediaRecorder.addEventListener('dataavailable', function (e) {
            chunks.push(e.data)
        })
        mediaRecorder.addEventListener('stop', function () {
            let blob = new Blob(chunks, {
                type: chunks[0].type
            })
            let url = URL.createObjectURL(blob);

            // 将video切換成錄制的視訊
            video.srcObject = null;
            video.src = url;
            video.onloadedmetadata = () => video.play();

            // 下載下傳至本地
            let a = document.createElement('a');
            a.href = url;
            a.download = 'video.mp4';
            a.click();
        })
        // 必須手動啟動
        mediaRecorder.start();
    }

    // 停止錄屏
    function stopRecorder() {
        mediaStreamTrack.getVideoTracks().forEach((track) => {
            track.stop();
        });
        mediaRecorder.stop();
    }

    // 截取圖檔
    function clipPhoto() {
        let canvas = document.createElement('canvas');
        let { width, height } = video;
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, width, height);

        // 下載下傳圖檔、
        let a = document.createElement('a');
        a.download = "image";
        a.href = canvas.toDataURL('image/png');
        a.click();
    }
</script>
</html>
ide html 視訊錄制
上一篇: centos7修改密碼1、su: Authentication failure2、xxx is not in the sudoers file. This incident will be reported3、開始修改啟動檔案，使用單使用者模式4、卡死在核心啟動：End trace
下一篇: 批量修改centos7 ssh多端口

繼續閱讀