純前端實現(攝像頭)截屏

本文轉載自查看原文 2021-05-19 14:38 246

navigator-helper.js

// 獲取媒體設備
export const getUserMedia = () => {
    return new Promise((resolve,reject) => {
        navigator.getUserMedia({ audio: true, video: true }, (stream) => {
            resolve(stream)
        },(e)=>{
            reject(e)
        })
    })
}

// 將視頻轉為base64圖片
export const screenCapture = (video)=>{
    const canvas = document.createElement("canvas");
    const canvasCtx = canvas.getContext("2d");
    canvas.width = 360;
    canvas.height = 240;
    canvasCtx.drawImage(video, 0, 0, canvas.width, canvas.height);
    return canvas.toDataURL("image/png");
}

index.html

<!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>Document</title>
    <style>
        .action div{background-color: pink; padding: 10px; cursor: pointer; color: white; margin: 10px 0; display: inline-block;}
        .screen-capture{visibility: hidden;}
        img{margin-right: 10px;}
    </style>
</head>
<body>
    <div class="action">
        <div class="open-video ">開/關閉攝像頭</div>
        <div class="screen-capture">截屏</div>
    </div>
    <video autoplay playsinline></video>
    <div class="show-img"></div>
    <script type="module">
        import {getUserMedia, screenCapture} from './navigator-helper.js';
        const openVideoEl = document.querySelector('.open-video');// 打開攝像頭按鈕
        let localMediaStream = null; //本地多媒體工具，如攝像頭或者麥克風（流）
        const screenCaptureEl = document.querySelector('.screen-capture'); // 截屏按鈕
        const videoEl = document.querySelector('video');// 視頻框

        // 打開攝像頭點擊事件
        openVideoEl.onclick = async function(){
            // 關閉攝像頭、隱藏截屏按鈕
            if(localMediaStream){
                localMediaStream.getTracks().forEach(element => {element.stop(); });
                screenCaptureEl.style.visibility = 'hidden';
                localMediaStream = null;
                return false;
            }
             //拿到本地媒體流，並顯示到video元素中
            localMediaStream = await getUserMedia();
            videoEl.srcObject = localMediaStream;
            screenCaptureEl.style.visibility = 'visible';
        }

        // 截屏點擊事件
        const showImg = document.querySelector('.show-img');
        screenCaptureEl.onclick = () =>{
            const imgBase64 = screenCapture(videoEl);
            const img = document.createElement('IMG');
            img.src = imgBase64;
            showImg.appendChild(img)
        }
    </script>
</body>
</html>

效果

硬件支持
沒有攝像頭的可以考慮虛擬攝像頭wecam
http://www.e2esoft.cn/wecam/
來模擬攝像頭輸出

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 python 調用麥克風;攝像頭;截屏; 前端調用本地攝像頭實現拍照（vue）前端調用攝像頭並且實現拍照功能前端調用攝像頭並且實現拍照功能前端實現截屏處理 Python|Mac——依據攝像頭檢測的方式去實現“防窺屏” 視頻平台、NVR、攝像頭通過GB28181接入實現WEB分屏播放以及大屏展示安防監控攝像頭接入雲端實現直播、錄像和大屏展示前端調用電腦攝像頭攝像 Unity 攝像頭豎屏預覽顯示的問題