Help with showing the webcam view first, upon page load

Chrisj · October 11, 2017

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>

Edited October 11, 2017 by Chrisj

Sign In

Help with showing the webcam view first, upon page load

Recommended Posts

Chrisj

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information