soymilk_4ever
/
chaturbate-cat-picuploader


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
							    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webcam Stream with Screenshot</title>
    <style>
    video {
        width: 40%;
        margin: 10px;
    }
    #controls {
        margin-top: 10px;
    }
    #logs {
        width: 80%;
        height: 150px;
        margin-top: 10px;
    }
    </style>
    </head>
    <body>
    <h1>Webkit WebRTC Demo!</h1>
    <video id="localVideo" playsinline autoplay muted></video>
    <div id="controls">
        <button id="callButton" onclick="call()">Start Call</button>
        <button id="hangupButton" disabled onclick="hangup()">Hang Up</button>
        <button id="screenshotButton" onclick="takeScreenshot()">Take Screenshot</button>
        <button id="switchCamButton" onclick="switchCamera()">Switch Camera</button>
    </div>
    <div id="bitrateGraph"></div>
    <canvas id="bitrateCanvas" width="400" height="200"></canvas>
    <div id="packetGraph"></div>
    <canvas id="packetCanvas" width="400" height="200"></canvas>
    <!-- Textarea for logs -->
    <textarea id="logs" readonly></textarea>
    <script>
    let localStream;
    let pc1;
    let pc2;
    let currentVideoDeviceIndex = 0;
    let videoDevices = [];
    const offerOptions = {
        offerToReceiveAudio: 1,
        offerToReceiveVideo: 1
    };
    const callButton = document.getElementById('callButton');
    const hangupButton = document.getElementById('hangupButton');
    const screenshotButton = document.getElementById('screenshotButton');
    const localVideo = document.getElementById('localVideo');
    const logsTextarea = document.getElementById('logs');

    function log(message) {
        console.log(message);
        logsTextarea.value += message + '\n';
    }

    function gotStream(stream) {
        hangupButton.disabled = false;
        log('Received local stream');
        localStream = stream;
        localVideo.srcObject = stream;
        localStream.getTracks().forEach(track => pc1.addTrack(track, localStream));
        log('Adding Local Stream to peer connection');
        pc1.createOffer(offerOptions).then(gotDescription1, onCreateSessionDescriptionError);
    }

    function call() {
        callButton.disabled = true;
        log('Starting call');
        pc1 = new RTCPeerConnection(null);
        log('Created local peer connection object pc1');
        pc1.onicecandidate = e => onIceCandidate(e, pc1);
        pc2 = new RTCPeerConnection(null);
        log('Created remote peer connection object pc2');
        pc2.onicecandidate = e => onIceCandidate(e, pc2);
        pc2.ontrack = gotRemoteStream;
        log('Requesting live local stream');
        navigator.mediaDevices.enumerateDevices().then(gotDevices).then(getUserMedia).catch(e => alert('getUserMedia() error: ' + e.name));
    }

    function gotDevices(deviceInfos) {
        videoDevices = deviceInfos.filter(deviceInfo => deviceInfo.kind === 'videoinput');
    }

    function getUserMedia() {
        const videoSource = videoDevices[currentVideoDeviceIndex].deviceId;
        const constraints = {
            video: { deviceId: videoSource ? { exact: videoSource } : undefined }
        };
        navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(e => alert('getUserMedia() error: ' + e.name));
    }

    function switchCamera() {
        if (videoDevices.length > 1) {
            currentVideoDeviceIndex = (currentVideoDeviceIndex + 1) % videoDevices.length;
            localStream.getTracks().forEach(track => track.stop());
            getUserMedia();
        } else {
            log('No other camera found to switch.');
        }
    }

    function gotDescription1(desc) {
        log(`Offer from pc1\n${desc.sdp}`);
        pc1.setLocalDescription(desc).then(() => {
            pc2.setRemoteDescription(desc).then(() => {
                pc2.createAnswer().then(gotDescription2, onCreateSessionDescriptionError);
            }, onSetSessionDescriptionError);
        }, onSetSessionDescriptionError);
    }

    function gotDescription2(desc) {
        log(`Answer from pc2\n${desc.sdp}`);
        pc2.setLocalDescription(desc).then(() => {
            pc1.setRemoteDescription(desc).then(() => {}, onSetSessionDescriptionError);
        }, onSetSessionDescriptionError);
    }

    function gotRemoteStream(event) {
        if (remoteVideo.srcObject !== event.streams[0]) {
            remoteVideo.srcObject = event.streams[0];
            log('Received remote stream');
        }
    }

    function onIceCandidate(event, pc) {
        const otherPc = (pc === pc1) ? pc2 : pc1;
        otherPc.addIceCandidate(event.candidate).then(() => {
            log('AddIceCandidate success.');
        }, err => {
            log(`Failed to add Ice Candidate: ${err.toString()}`);
        });
    }

    function onSetSessionDescriptionError(error) {
        log(`Failed to set session description: ${error.toString()}`);
    }

    function onCreateSessionDescriptionError(error) {
        log(`Failed to create session description: ${error.toString()}`);
    }

    function hangup() {
        pc1.close();
        pc2.close();
        pc1 = null;
        pc2 = null;
        hangupButton.disabled = true;
        callButton.disabled = false;
        log('Ending call');
    }

    function takeScreenshot() {
        const canvas = document.createElement('canvas');
        canvas.width = localVideo.videoWidth;
        canvas.height = localVideo.videoHeight;
        canvas.getContext('2d').drawImage(localVideo, 0, 0, canvas.width, canvas.height);
        canvas.toBlob(blob => {
            const formData = new FormData();
            formData.append('file', blob, 'screenshot.png');
            const netloc = document.domain; // Get the hostname and port of the current site
            fetch(`https://${netloc}/`, { // Adjust the URL here if needed
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                log(`Screenshot uploaded successfully: ${data.message}`);
            })
            .catch(error => {
                log(`Error uploading screenshot: ${error.toString()}`);
            });
        }, 'image/png');
    }
    </script>
    </body>
    </html>