Chrisj Posted October 11, 2017 Share Posted 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> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.