Jump to content

Help with showing the webcam view first, upon page load


Chrisj

Recommended Posts

The WebRTC/RecordRTC script that I'm using (here's where I got the script: https://www.webrtc-experiment.com/RecordRTC/)
is functioning successfully(start record, stop record, upload). 
 
But, I'm trying to have the script first show the webcam-view upon page load. 
 
Currently it shows: image1 (attached). 
 
The webcam-view currently only appears upon selecting 'Start Recording' button.
 
So, I'd like the webcam-view to appear first upon page load (example - image2)
 
Any help will be appreciated.
 
Here's my current code:
 
<!DOCTYPE html>
<html>
<head>
    <title>Video Recording | RecordRTC</title>
    <script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
</head>

<body>
    <style>
        html,
        body {
            margin: 0!important;
            padding: 0!important;
            overflow: hidden!important;
            width: 100%;
        }
    </style>
                <style>
		            video {
		              max-width: 100%;
		              border: 5px solid yellow;
		              border-radius: 9px;
		              width: 680px;
		              height: 420px;
		            }
		            body {
		              background: ffffff;
		            }
		            h1 {
		              color: #800000;
		            }
        </style>

   <header id="header"></header>
    <h1>Webcam Record</h1>

    <br>

    <button id="btn-start-recording">Start Recording</button>
    <button id="btn-stop-recording" disabled>Stop Recording</button>
    <button id="upload-video" onclick="InitUploading()" disabled="">Upload Now</button>

    <br>
 <video id="" controls="" autoplay=""></video>

<script type="text/javascript">
var video = document.querySelector('video');

        function captureCamera(callback) {
            navigator.mediaDevices.getUserMedia({
                audio: true,
                video: true
            }).then(function (camera) {
                callback(camera);
            }).catch(function (error) {
                alert('Unable to capture your camera. Please check console logs.');
                console.error(error);
            });
        }

        function stopRecordingCallback() {
            video.src = video.srcObject = null;
            video.src = URL.createObjectURL(recorder.getBlob());
            PrepareBlob();
            document.getElementById("upload-video").disabled = false;

            // release camera
            recorder.camera.getTracks().forEach(function (track) {
                track.stop();
            });

            recorder.camera.stop();
            recorder.destroy();
            recorder = null;
        }
        var recorder; // globally accessible
        document.getElementById('btn-start-recording').onclick = function () {
            this.disabled = true;
            document.getElementById("upload-video").disabled = true;
            captureCamera(function (camera) {
                setSrcObject(camera, video);
                video.play();
                recorder = RecordRTC(camera, {
                    type: 'video'
                });
                recorder.startRecording();
                // release camera on stopRecording
                recorder.camera = camera;
                document.getElementById('btn-stop-recording').disabled = false;
            });
        };
        document.getElementById('btn-stop-recording').onclick = function () {
            this.disabled = true;
            document.getElementById('btn-start-recording').disabled = false;
            recorder.stopRecording(stopRecordingCallback);
        };
        var blob, fileName, fileObject;
        function PrepareBlob() {
            // get recorded blob
            blob = recorder.getBlob();
            // generating a random file name
            fileName = getFileName('webm');
            // we need to upload "File" --- not "Blob"
            fileObject = new File([blob], fileName, {
                type: 'video/webm'
            });
        }
        function InitUploading()
        {
            uploadToPHPServer(fileObject, function (response, fileDownloadURL) {
                if (response !== 'ended') {
                    document.getElementById('header').innerHTML = response; // upload progress
                    return;
                }

		document.getElementById('header').innerHTML = '<a href="' + fileDownloadURL + '" target="_blank">' + fileDownloadURL + '</a>';
		alert('Successfully uploaded recorded blob.');

                alert('Successfully uploaded recorded blob.');
                // preview uploaded file
                video.src = fileDownloadURL;
                // open uploaded file in a new tab
                window.open(fileDownloadURL);
            });
        }

        function uploadToPHPServer(blob, callback) {
            // create FormData
            var formData = new FormData();
            formData.append('video-filename', blob.name);
            formData.append('video-blob', blob);
            callback('Uploading recorded-file to server.');
            makeXMLHttpRequest('save.php', formData, function (progress) {
                if (progress !== 'upload-ended') {
                    callback(progress);
                    return;
                }
                var initialURL = 'uploads/' + blob.name;
                callback('ended', initialURL);
            });
        }

        function makeXMLHttpRequest(url, data, callback) {
            var request = new XMLHttpRequest();
            request.onreadystatechange = function () {
                if (request.readyState == 4 && request.status == 200) {
                    if (request.responseText === 'success') {
                        callback('Upload Complete');
                        return;
                    }
                   // alert(request.responseText);
                        window.location.href = '/index.com/';
                    return;
                }
            };
            request.upload.onloadstart = function () {
                callback('Upload started...');
            };
            request.upload.onprogress = function (event) {
                callback('Upload Progress ' + Math.round(event.loaded / event.total * 100) + "%");
            };
            request.upload.onload = function () {
                callback('Progress Ending');
            };
            request.upload.onload = function () {
                callback('Upload Complete');
            };
            request.upload.onerror = function (error) {
                callback('Upload failed.');
            };
            request.upload.onabort = function (error) {
                callback('Upload aborted.');
            };
            request.open('POST', url);
            request.send(data);
        }
        // this function is used to generate random file name
        function getFileName(fileExtension) {
            var d = new Date();
            var year = d.getUTCFullYear();
            var month = d.getUTCMonth();
            var date = d.getUTCDate();
            return 'RecordRTC-' + year + month + date + '-' + getRandomString() + '.' + fileExtension;
        }

        function getRandomString() {
            if (window.crypto && window.crypto.getRandomValues && navigator.userAgent.indexOf('Safari') === -1) {
                var a = window.crypto.getRandomValues(new Uint32Array(3)),
                    token = '';
                for (var i = 0, l = a.length; i < l; i++) {
                    token += a[i].toString(36);
                }
                return token;
            } else {
                return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, '');
            }
        }
    </script>
</body>
</html>

 

post-20454-0-39222500-1507765419_thumb.png

post-20454-0-91813200-1507765426_thumb.png

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.