I'm using this webpage webcam-recorder script, that works successfully.
I'd like some help with how the screen appears upon initially visting the webpage.
Currently, upon seeing the web page it looks like the 1st image attached, titled: 'UponUpload'.
Then after the Start Recording button is selected, the screen appears like the 2nd image attached, titled: 'Start' (and starts recording the webcam view).

I'd like help where, upon initially visting the web page, the visitor doesn't see the 1st image, but sees the webcam view (as shown in the 2nd image titled: 'Start'), but not start recording until the Start Recording button is selected.

I hope that makes sense. Any help will be appreciated. Here's the current code:

Code:
<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/B51F6407-4467-B34C-9213-B4C02467636C/main.js"
        charset="UTF-8"></script>
    <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>
   <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>

    <hr>
    <!--<video controls autoplay></video>-->
    <script>
        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 = 'https://.../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>

UponUpload.png Start.png