아이폰 카메라, 공유하기 버튼

 

카메라

<div class="jsQR">
    <div id="loadingMessage">🎥 비디오 스트림에 액세스할 수 없습니다.<br>(웹캠이 활성화되어 있는지 확인하십시오).</div>
    <canvas id="canvas" hidden></canvas>
    <div id="output" hidden>
        <div id="outputMessage">잘못된 QR코드입니다.</div>
        <div hidden><b>Data:</b> <span id="outputData"></span></div>
    </div>
</div>

// var video = document.createElement("video");
        var video = document.getElementById("video");
        // $("#wrap").append(video);
        // console.log('1', video);
        var canvasElement = document.getElementById("canvas");
        var canvas = canvasElement.getContext("2d");
        var loadingMessage = document.getElementById("loadingMessage");
        var outputContainer = document.getElementById("output");
        var outputMessage = document.getElementById("outputMessage");
        var outputData = document.getElementById("outputData");

        // let videoLive = true;


        const qrcodeEl = document.querySelector('#qrcode');
		const downloadEl = document.querySelector('#download');
        $( function(){
            qrcodeEl.innerHTML = ``;
            new QRCode(qrcodeEl, {
                text:`<?=session()->get('id')?>`,
                width: '256',
                height: '256'
            });
        });
        
        

        // $("#testbtn").on("click", function(e){
        //     e.preventDefault();
        //     console.log('dd');
        //     video.play();
        //     requestAnimationFrame(tick);
        // });

        function drawLine(begin, end, color) {
            canvas.beginPath();
            canvas.moveTo(begin.x, begin.y);
            canvas.lineTo(end.x, end.y);
            canvas.lineWidth = 4;
            canvas.strokeStyle = color;
            canvas.stroke();
        }

        // Use facingMode: environment to attemt to get the front camera on phones
        // function playVideo(){
            // { video: true, audio: true }
            navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
                // track = stream.getTracks()[0];
                video.srcObject = stream;
                // video.setAttribute("playsinline", false); // required to tell iOS safari we don't want fullscreen
                // video.setAttribute("muted", true); // required to tell iOS safari we don't want fullscreen
                video.play();
                requestAnimationFrame(tick);
            })
            .catch(function(error){
                alert(error);
            });
        // }
        // playVideo();

        
        

        function tick() {
            
            
            loadingMessage.innerText = "⌛ Loading video..."
            if (video.readyState === video.HAVE_ENOUGH_DATA) {
                loadingMessage.hidden = true;
                canvasElement.hidden = false;
                outputContainer.hidden = false;

                canvasElement.height = video.videoHeight;
                canvasElement.width = video.videoWidth;
                
                canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);


                var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);

                var code = jsQR(imageData.data, imageData.width, imageData.height, {
                    inversionAttempts: "dontInvert",
                });

                // alert(imageData);

                if (code) {
                    drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#00c6ff");
                    drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#00c6ff");
                    drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#00c6ff");
                    drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#00c6ff");
                    outputMessage.hidden = true;
                    outputData.parentElement.hidden = false;
                    outputData.innerText = code.data;

                    let $data = code.data;
                    let regExpPhone = /^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/;

                    if( regExpPhone.test($data) ){                    
                        location.href = `/mobile/pin/pin_send?send_id=${$data}`;
                    }

                } else {
                    outputMessage.hidden = false;
                    outputData.parentElement.hidden = true;
                }


            }

            requestAnimationFrame(tick);
        }

        // preCapture(container, onSuccess) {
        //     const canvas = this.createCanvas(),
        //         context = canvas.getContext("2d");
        //     context.drawImage(container, 0, 0);
        //     this.clearCanvas(canvas);

        //     setTimeout(() => {
        //         onSuccess(container);
        //     }, 1000);
        // }

 

 

 

 

공유하기

<span class="qr_share"><a href="#">공유</a></span>

$(document).on("click", ".qr_share", function(e){
    e.preventDefault();
    shareCanvas();
})


async function shareCanvas() {
        // const canvasElement = document.querySelector('canvas');
        const canvasElement = await html2canvas(
            document.querySelector("#qrcode img"),
            {
                scale: 1, // 줌 비율, 기본값으로 1
                width:'195',
                height:'195',
            }
        );
        const dataUrl = canvasElement.toDataURL();
        const blob = await (await fetch(dataUrl)).blob();
        const filesArray = [
                new File(
                [blob],
                'qrcode.png',
                {
                    // type: blob.type,
                    type: "image/png",
                    lastModified: new Date().getTime()
                }
            )
        ];
        console.log(filesArray);
        const shareData = {
            files: filesArray,
            title : "PinKey",
            text : "PinKey QRcode 공유",
        };
        navigator.share(shareData);
    }