OpenGL 十 - 002、GLSL 繪製紋理案例

阿新 • • 發佈：2020-08-01

參考了：https://blog.csdn.net/weixin_34100227/article/details/88016462

釋出之後要有https協議才能呼叫成功

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>拍照</title>
</head>
 
<body>
<div></div>
    <button id="take">拍照</button> 

    <br />
    <video id="v" ></video>
    <div id="imgList"></div>
    <!-- <img src="" id="photo" alt=""> -->
    
    <canvas id="canvas" style="display:none;"></canvas>
    <script>

    
        !(function () {
        
        function takePhotos() {
                 
if (videoPlaying) {
                    let canvas = document.getElementById('canvas');
                    canvas.width = v.videoWidth;
                    canvas.height = v.videoHeight;
                    canvas.getContext('2d').drawImage(v, 0, 0);
                    let data = canvas.toDataURL('image/webp 
');
                    //base64
                    //console.log(data);
                    //儲存圖片
                    
                    //document.getElementById('photo').setAttribute('src', data);
                    document.getElementById('imgList').innerHTML += '<img data-pro="img" src="' + data + '" id="photo" alt="" style="width:70px;height:60px;">';
                }
            }
            
                document.onkeydown = function (e) { // 回車提交表單
                document.getElementById('take').blur();
// 相容FF和IE和Opera
    var theEvent = window.event || e;
    var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
    if (code == 13) {
        takePhotos();
    }
}
            
            // 老的瀏覽器可能根本沒有實現 mediaDevices，所以我們可以先設定一個空的物件
            if (navigator.mediaDevices === undefined) {
                navigator.mediaDevices = {};
            }
            if (navigator.mediaDevices.getUserMedia === undefined) {
                navigator.mediaDevices.getUserMedia = function (constraints) {
                    // 首先，如果有getUserMedia的話，就獲得它
                    var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
 
                    // 一些瀏覽器根本沒實現它 - 那麼就返回一個error到promise的reject來保持一個統一的介面
                    if (!getUserMedia) {
                        return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                    }
 
                    // 否則，為老的navigator.getUserMedia方法包裹一個Promise
                    return new Promise(function (resolve, reject) {
                        getUserMedia.call(navigator, constraints, resolve, reject);
                    });
                }
            }
            const constraints = {
                video: true,
                audio: false
            };
            let videoPlaying = false;
            let v = document.getElementById('v');
            let promise = navigator.mediaDevices.getUserMedia(constraints);
            promise.then(stream => {
                // 舊的瀏覽器可能沒有srcObject
                if ("srcObject" in v) {
                    v.srcObject = stream;
                } else {
                    // 防止再新的瀏覽器裡使用它，應為它已經不再支援了
                    v.src = window.URL.createObjectURL(stream);
                }
                v.onloadedmetadata = function (e) {
                    v.play();
                    videoPlaying = true;
                };
            }).catch(err => {
                console.error(err.name + ": " + err.message);
            })
            document.getElementById('take').addEventListener('click', takePhotos, false);
        })();
    </script>
</body>
 
</html>