Notice
Recent Posts
Recent Comments
Link
250x250
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

혼자서 앱 만드는 개발자 함께하는 AI 세상

pdf 파일 불러와서 canvas 그리기 테스트1 본문

WEBRTC

pdf 파일 불러와서 canvas 그리기 테스트1

혼앱사 2024. 3. 20. 13:47
반응형

pdf위에 그리기 도구를 이용해서 webrtc를 통해 공유하는 웹 앱 만들기 테스트 

 <!DOCTYPE html>
<html>
<head>
    <title>PDF와 Canvas 스트리밍</title>
    <style>
        #pdfCanvas, #drawCanvas  {
            border: 1px solid black;
            position: absolute;
            left: 0;
            top: 200px; /* 수정: 픽셀 값 추가 */
        }

        #controll  { 
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <h1>PDF와 Canvas 스트리밍</h1>
    
    <div id="controll">
        <input type="file" id="pdfInput" accept=".pdf">
        <button onclick="loadPDF()">PDF 불러오기</button>
    </div>

    <canvas id="pdfCanvas" width="1000" height="1000"></canvas>
    <canvas id="drawCanvas" width="1000" height="1000"></canvas>
    <video id="streamVideo" border=1 width="1000" height="800" autoplay></video>
 
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>

    <script>
        function loadPDF() {
            const input = document.getElementById('pdfInput');
            const file = input.files[0];
            
            if (file) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    const pdfData = event.target.result;
                    renderPdf(pdfData, 'pdfCanvas');
                };
                reader.readAsDataURL(file);
            } else {
                console.error('PDF 파일을 선택해주세요.');
            }
        }
        
        // PDF.js를 사용하여 PDF 파일을 렌더링하는 함수
        function renderPdf(pdfData, canvasId) {
            const canvas = document.getElementById(canvasId);
            const context = canvas.getContext('2d');
            
            pdfjsLib.getDocument(pdfData).promise.then(pdf => {
                pdf.getPage(1).then(page => {
                    // Get the viewport of the PDF page
                    const viewport = page.getViewport({ scale: 1 });
                    
                    // Scale factor to fit the PDF page to the canvas size
                    const scale = Math.min(canvas.width / viewport.width, canvas.height / viewport.height);
                    
                    // Set the canvas size to match the PDF page size
                    canvas.width = viewport.width * scale;
                    canvas.height = viewport.height * scale;
                    
                    page.render({
                        canvasContext: context,
                        viewport: page.getViewport({ scale: scale }) // Use the scaled viewport
                    });
                });
            });
        }
        
        // Canvas에 그리기 요소 추가
        const drawCanvas = document.getElementById('drawCanvas');
        const drawContext = drawCanvas.getContext('2d');
        
        // 그리기 요소 추가 (예시: 원 그리기)
        drawContext.beginPath();
        drawContext.arc(300, 150, 30, 0, Math.PI * 2);
        drawContext.fillStyle = 'green';
        drawContext.fill();
        
        // Canvas 스트림 생성 및 WebRTC 스트리밍 시작
        const pdfCanvas = document.getElementById('pdfCanvas');
        const streamCanvas = document.createElement('canvas');
        const streamContext = streamCanvas.getContext('2d');
        const streamVideo = document.getElementById('streamVideo');
        
        // Canvas에 그리기 요소를 합성
        streamContext.drawImage(pdfCanvas, 0, 0);
        streamContext.drawImage(drawCanvas, 0, 0);
        
        // Canvas 스트림 생성
        const stream = streamCanvas.captureStream();
        streamVideo.srcObject = stream;
        
        // WebRTC 스트리밍 로직은 여기에 추가
    </script>

</body>
</html>

https://iukj.cafe24.com/chat/pdf_chat.php?room=11111

 

오픈챗

 

iukj.cafe24.com

 

 

728x90
반응형

'WEBRTC' 카테고리의 다른 글

mediasoup-demo 적용  (0) 2024.03.08
webrtc 기반의 간단한 웹 기반 오픈 채팅방 구축 하기  (0) 2023.02.11
webrtc 채팅 텍스트 데이터 전송을 위한 datachannel 추가  (0) 2023.01.09
WEBRTC (PHP 웹 적용 구성)- 첫(1)번째 HTML 구성하기  (0) 2023.01.07
'WEBRTC' Related Articles more
Comments