Chrisj

I'm using this code, but I only see a black screen when viewing via iPhone: <link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" /> <script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script> <video id="js-video" autoplay muted class="video-js vjs-default-skin" playsinline></video> <button id="display" onclick="display()">Display Camera</button> And when I select 'Display Camera' and agree to "access camera & mic" no camera view displays. let blobs = []; let stream, mediaRecorder, blob; let video = document.getElementById("video"); var displaying = false; var recording = false; async function display() { stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true, }); video.srcObject = stream; displaying = true; playsinline = true; } Any help to show camera view and not black screen is appreciated

Is there a way to make an html5 player poster transparent? (instead of /pix.jpg in this example:) <video id="video" autoplay controls muted playsInline poster="/images/pix.jpg"></video> If poster is removed the screen is black. I look forward to any guidance

This upload code is used for uploading a video file from html page, after recording via html5 screen <video></video>, however, ther file doesn't arrive in the uploads/ folder: <?php foreach (array('video', 'audio') as $type) { if (isset($_FILES["${type}-blob"])) { $fileName = $_POST["${type}-filename"]; $uploadDirectory = 'uploads/' .rand(5,500).$fileName; if (!move_uploaded_file($_FILES["${type}-blob"]["tmp_name"], $uploadDirectory)) { echo (" problem moving uploaded file"); } } } when uploaded from iPhone. So, I don't know how to see errors on iPhone. Folder permission is 755. php.ini max file size is 2024M, any ideas/solutions are appreciated.

Thanks for your reply. I don't know the answer. Maybe you can help me, I probably have the code incorrect. Here's the corresponding javascript that it's working with save1.php (the code I posted above): <video id="video" autoplay="true" controls muted playsInline></video> <script> function supportsRecording(mimeType) { if (!window.MediaRecorder) { return false; } if (!MediaRecorder.isTypeSupported) { return mimeType.startsWith("audio/mp4") || mimeType.startsWith("video/mp4"); } return MediaRecorder.isTypeSupported(mimeType); } var video = document.querySelector("video"); let params = { audio: true, video: { facingMode: { exact: "environment" } } }; //if (navigator.mediaDevices.getUserMedia) { // navigator.mediaDevices.getUserMedia({ video: true }) // .then(function (stream) { // video.srcObject = stream; // }) // .catch(function (err0r) { // console.log("Something went wrong!"); // }); //} let blobs = []; let stream, mediaRecorder, blob; async function startRecording() { stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true, }); mediaRecorder = new MediaRecorder(stream); mediaRecorder.ondataavailable = (event) => { // Let's append blobs for now, we could also upload them to the network. if (event.data) { blobs.push(event.data); } }; mediaRecorder.onstop = doPreview; // Let's receive 1 second blobs mediaRecorder.start(1000); } function endRecording() { // Let's stop capture and recording mediaRecorder.stop(); stream.getTracks().forEach((track) => track.stop()); } function doPreview() { if (!blobs.length) { return; } // Let's concatenate blobs to preview the recorded content blob = new Blob(blobs, { type: mediaRecorder.mimeType }); video.src = URL.createObjectURL( blob, ); } /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// function uploadFile() { // create FormData var fileType = 'video'; // or "audio" var fileName = 'ABCXYZ.webm'; var formData = new FormData(); var request = new XMLHttpRequest; formData.append(fileType + '-filename', fileName); formData.append(fileType + '-blob', blob); request.open("POST", "/save1.php"); request.onreadystatechange = function() { if(request.readyState==4) { alert(request.responseText); } } request.send(formData); } </script>

I'm trying to determine why when I select Upload, on the html page I see a message "My extension is:" only, instead of My extension is: webM" for example.Here's the code, I look forward to any assistance: <?php foreach (array('video', 'audio') as $type) { if (isset($_FILES["${type}-blob"])) { $fileName = $_POST["${type}-filename"]; $uploadDirectory = 'uploads/' . $fileName; // make sure that one can upload only allowed audio/video files $allowed = array( 'webm', 'wav', 'mp4', 'mov' ); $extension = pathinfo($filePath, PATHINFO_EXTENSION); die("My extension is: " . $extension); if (!$extension || empty($extension) || !in_array($extension, $allowed)) { echo 'Invalid file extension: '.$extension; return; } if (!move_uploaded_file($_FILES["${type}-blob"]["tmp_name"], $uploadDirectory)) { echo (" problem moving uploaded file"); } } } ?>

Than ks for your reply. Can you give me an example of logging a relevant variable or value pertaining to the code I've provided?

Thanks you for your example. I tried this, ran the script, but nothing appeared in the console log: if(isMyOwnDomain()) { console.log("upload-to-server"); recordingDIV.querySelector('#upload-to-server').disabled = true; recordingDIV.querySelector('#upload-to-server').style.display = 'none'; } any additional guidance is welcomed

Can you show me an example of "console.log at relevant location"?

Thanks for your reply. Regarding executing, I'm not sure, any guidance is appreciated.

Thanks for all of your previous help. <button id="btn-start-recording">Start <br/>Recording</button> <button id="btn-stop-recording" disabled>Stop <br/>Recording</button> <button id="reset" onclick="resetCamera()">Reset <br/>Camera</button> <button id="upload-to-server">Upload Recording</button> <button id="save-to-disk">Save To Disk</button> <button id="open-new-tab">Open New Tab</button> I am testing this code, where a video is recorded, started, stopped & replayed successfully. However, I don’t have the upload part correct. Nothing happens upon selecting the upload button, and no issues in Console. var video = document.querySelector('video'); var recordingDIV = document.querySelector('.recordrtc'); 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.muted = false; video.volume = 1; video.src = URL.createObjectURL(recorder.getBlob()); recorder.camera.stop(); recorder.destroy(); recorder = null; } var recorder; // globally accessible document.getElementById('btn-start-recording').onclick = function() { this.disabled = true; captureCamera(function(camera) { video.muted = true; video.volume = 0; video.srcObject = camera; 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; recorder.stopRecording(stopRecordingCallback); }; /////////////////////////////////////////////////// //Reset the Camera function resetCamera(){ location.reload(); } ///////////////////////////////////////////////////////// var MY_DOMAIN = 'a.domain-name.com'; function isMyOwnDomain() { // replace "webrtc-experiment.com" with your own domain name return document.domain.indexOf(MY_DOMAIN) !== -1; } function saveToDiskOrOpenNewTab(recordRTC) { recordingDIV.querySelector('#save-to-disk').parentNode.style.display = 'block'; recordingDIV.querySelector('#save-to-disk').onclick = function() { if(!recordRTC) return alert('No recording found.'); recordRTC.save(); }; recordingDIV.querySelector('#open-new-tab').onclick = function() { if(!recordRTC) return alert('No recording found.'); window.open(recordRTC.toURL()); }; if(isMyOwnDomain()) { recordingDIV.querySelector('#upload-to-server').disabled = true; recordingDIV.querySelector('#upload-to-server').style.display = 'none'; } else { recordingDIV.querySelector('#upload-to-server').disabled = false; } recordingDIV.querySelector('#upload-to-server').onclick = function() { if(isMyOwnDomain()) { alert('PHP Upload is not available on this domain.'); return; } if(!recordRTC) return alert('No recording found.'); this.disabled = true; var button = this; uploadToServer(recordRTC, function(progress, fileURL) { if(progress === 'ended') { button.disabled = false; button.innerHTML = 'Click to download from server'; button.onclick = function() { window.open(fileURL); }; return; } button.innerHTML = progress; }); }; } var listOfFilesUploaded = []; function uploadToServer(recordRTC, callback) { var blob = recordRTC instanceof Blob ? recordRTC : recordRTC.blob; var fileType = blob.type.split('/')[0] || 'audio'; var fileName = (Math.random() * 1000).toString().replace('.', ''); if (fileType === 'audio') { fileName += '.' + (!!navigator.mozGetUserMedia ? 'ogg' : 'wav'); } else { fileName += '.webm'; } // create FormData var formData = new FormData(); formData.append(fileType + '-filename', fileName); formData.append(fileType + '-blob', blob); callback('Uploading ' + fileType + ' recording to server.'); // var upload_url = 'https://your-domain.com/files-uploader/'; var upload_url = 'save.php'; // var upload_directory = upload_url; var upload_directory = 'uploads/'; makeXMLHttpRequest(upload_url, formData, function(progress) { if (progress !== 'upload-ended') { callback(progress); return; } callback('ended', upload_directory + fileName); // to make sure we can delete as soon as visitor leaves listOfFilesUploaded.push(upload_directory + fileName); }); } function makeXMLHttpRequest(url, data, callback) { var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200) { callback('upload-ended'); } }; 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-about-to-end'); }; request.upload.onload = function() { callback('progress-ended'); }; request.upload.onerror = function(error) { callback('Failed to upload to server'); console.error('XMLHttpRequest failed', error); }; request.upload.onabort = function(error) { callback('Upload aborted.'); console.error('XMLHttpRequest aborted', error); }; request.open('POST', url); request.send(data); } window.onbeforeunload = function() { recordingDIV.querySelector('button').disabled = false; recordingMedia.disabled = false; mediaContainerFormat.disabled = false; if(!listOfFilesUploaded.length) return; var delete_url = 'https://webrtcweb.com/f/delete.php'; // var delete_url = 'RecordRTC-to-PHP/delete.php'; listOfFilesUploaded.forEach(function(fileURL) { var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200) { if(this.responseText === ' problem deleting files.') { alert('Failed to delete ' + fileURL + ' from the server.'); return; } listOfFilesUploaded = []; alert('You can leave now. Your files are removed from the server.'); } }; request.open('POST', delete_url); var formData = new FormData(); formData.append('delete-file', fileURL.split('/').pop()); request.send(formData); }); return 'Please wait few seconds before your recordings are deleted from the server.'; }; Any assistance is appreciated.

When this code, on an html page, is viewed, via mobile device, you can tap the screen and the mobile device recording full screen successfully appears: <form> ---- <input type="file" name="Upload" id="fileToUpload" accept="video/*" capture="user" onchange="submitForm();"> <input type="submit" value="Upload" name="submit" id="go" style="display: none;"/> ---- </form> how/what can I add so that the less than the full screen appears?

Thanks for your reply/advice. Much appreciated. Isn't this open source: https://gist.github.com/daemonsy/61a7f05bf6dbe23444076af93c582815 If so, how can I use it without making API calls to cameratag.com?

When I access this link: https://www.cameratag.com/demo#camera I see this: "This camera was created with the single line of code below:" <camera id='DemoCamera' data-app-id='63f9c870-72c4-0130-04c5-123139045d73'></camera> I understand that the js that is being used there is open source from here: https://gist.github.com/daemonsy/61a7f05bf6dbe23444076af93c582815 So, I've downloaded that js and added a script link to that javascript on my html page. But, I'm not sure where the camera id (DemoCamera) is referenced and don't know much about the data-app-id. If I use this, am I using that company's code, or is that open source too: <camera id='DemoCamera' data-app-id='63f9c870-72c4-0130-04c5-123139045d73'></camera> I don't see DemoCamera or the data-app-id anywhere in the js or css. I look forward to being enlightened/help. Thanx

On an html page, it uses this code: accept="video/*" in this context: <input type="file" name="fileToUpload" id="fileToUpload" accept="video/*" capture="user" onchange="submitForm();"> and when you view the page via mobile, and tap the page, your video camera screen appears. I'm looking to see if it's possible to add scrolling text across the page/video-camera-screen ? I look forward to any comments/suggestions.

Viewing a php/html web page, that I have, from a mobile phone, a visitor can tap the page and their video screen appears and they can then proceed to record and submit a video recording, successfully. But, I'm wondering if the accept="video/*" code is outdated and should be somehow replaced with 'getUserMedia' code. If so, is it a direct replacement or do I need other tweaks on this existing line: <input type="file" name="fileToUpload" id="fileToUpload" accept="video/*" capture="user" onchange="submitForm();"> I look forward to all comments/suggestions, thanks