Jump to content

Chrisj

Members
  • Posts

    531
  • Joined

  • Last visited

  • Days Won

    1

Posts posted by Chrisj

  1. When I enter my log-in credentials and submit, in my site's web script, I see this:
    This page isn’t working...... is currently unable to handle this request.
    HTTP ERROR 500
    So, I look at dev tools > Console I see:

    crbug/1173575, non-JS module files deprecated.
    (index):7288

    and when I expand the 7288 I see:

    "No resource with given URL found"

    but if I refresh, I'm logged in.

    Any ideas on how to solve this error is appreciated.

  2. 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

  3. 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.

     

     

  4. 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>
    
    
    
    
    
    
    
    
    
    
    
    
    

     

     

     

  5. 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");
            }
        }
    }
    ?>

     

  6. 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

     

  7. 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.

  8. 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?

  9. 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

  10. 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.

  11. 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

  12. Thank you for your reply.

    Regarding " What precisely is it that you do and don't do when the page works and does not work",

    when the page is loaded and the screen doesn't appear, so I refresh the page and the jitsi Start meeting box appears

    at this location on the web page:

    <div id="meeting"></div>

     and I proceed.

    that is the only way it appears. Without a refresh the "meeting" just appears with this style:

    #meeting{
    background-color: #000;
    width: 500px;
    height: 400px;
    margin: 0 auto;
    }

    just a black box.

    Is there a solution to have the jitsi Start meeting to appear without refreshing the page?

    The jitsi handbook states:

    "The API object constructor uses the following options:

    height: ......
    width: ........
    etc.

    onload: The IFrame onload event handler.

    etc....

     

    I was trying (unsuccessfully) to use the onload: option to have the Start meeting appear without refreshing the page (by trying to add a 'click').

    Any ideas/suggestions.guidance with getting the jitsi meeting Start to appear without refreshing the page, is welcomed

  13. I have placed this jitsi script on a web page:

    <script src='https://meet.jit.si/external_api.js'></script>
    
    <div id="meeting"></div>
    
    <script>
    const options = {
        parentNode: document.querySelector('#meeting'),
        width: "100%",
        height: "100%",
        };
    
    meetAPI = new JitsiMeetExternalAPI("meet.jit.si", options);
    </script>

    but the jitsi screen only appears after I refresh the page.
    I see in the jitsi handbook, it has an onload: option:
    https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-iframe

    So I have tried (unsucessfully) to modify the code to allow the web page visitor to 'click' to get the jitsi screen to appear, using this code:

    <button id="meeting" onclick="button()"></button>
    
    <script>
    const options = {
        parentNode: document.querySelector('#meeting'),
        width: "100%",
        height: "100%",
        onload: function button() {
        document.getElementById('#meeting').click();
    }
        };
    
    meetAPI = new JitsiMeetExternalAPI("meet.jit.si", options);
    </script>

    any help/guidance with either getting the screen to appear without refresh or successfully having the screen appear upon 'click' is appreciated.

  14. I am using this a modal window(jBox) - with a web Form in it, that requires the Form (just Name & Email) to be completed and Submitted in order to close the modal window - allowing access to the main page.

    The Form uses this corresponding ../submit.php which this:

    if (empty($_POST['name'])|| empty($_POST['email'])){
    $response['success'] = false;
    } else {
    $response['success'] = true;
    }
    
    echo json_encode($response);

    where, upon Form > submit, successfully shows 'error' if the Form fields are not populated, and 'success' when the Form fields are populated/submitted.

    I'd like the Form to require a proper/valid email address and avoid spam and header injection
    (maybe honeypot protection and implement a form of rate limiting (a single ip may not send more than x messages per day)).

    Any assistance/guidance is appreciated

     

  15. The goal it to close the jBox upon success and not close it upon Error. Which I believe needs validation from the submit.php to successfully close the Form/jBox.
    I attempted adding this call back validation code ( everything above if($_POST) ) in the submit.php file, without success:

    <?php
    header('Content-type: application/json');
    $errors         = array();  
    $data           = array();  
    
        if (empty($_POST['name']))
            $errors['name'] = 'Name is required.';
    
        if (empty($_POST['email']))
            $errors['email'] = 'Email is required.';
    
        if ( ! empty($errors)) {
    
            $data['success'] = false;
            $data['errors']  = $errors;
        }
        echo json_encode($data);
    
    if($_POST){
    	$to = 'chrisj....@hotmail.com';
    	$subject = 'Thank You';
    	$name = $_POST['name'];
    	$email = $_POST['email'];
    	$message = $_POST['message'];
    	$message1 = $_POST['message'];
    	$headers = $name;
    	$headers = 'from: support@web-site-name.com';
    
    	$message1 .= "\r\n\r\nName: ".$_POST['name']." \r\n Email: ".$_POST['email']." ";
    
    	$message = "Hello {$_POST['name']}, ~ Thank you\r\n\r\n";
    
       		mail( $to, $subject, $message1, $headers );
       		mail( $email, $subject, $message, $headers );
    
    		//header('Location: https://web-site-name.com');
       exit;
    }
    ?>

    And I have the .js:

    var myConfirm;
    $(document).ready(function() {
    
      myConfirm = new jBox('Confirm', {
        content: $('.my-jbox-form'),
        width: 830,
        height: 205,
        cancelButton: 'Return Home',
        confirmButton: 'Continue',
        closeOnConfirm: false,
        closeOnEsc: false,
        confirm: function() {
        $.ajax({
      url: 'https://...../submit.php',
      method: 'post',
      data: {
        name: $('#name').val(),
        email: $('#email').val()
      },
      success: function (response) {
        console.log(response);
        if (response.success) {
          alert('Success');
        } else {
          alert('Error');
        }
      }
    });

    And I’ve tried to add: myConfirm.close(); into the .js code, but not sure where is the best place to put it.

    After excuting the Form, still get a dialog box, on the Form page, that shows “web-site-name.com says Error”, yet the Form’s field info gets sent successfully.

    And after Form submit, in the dev tools > Console it only shows one line,

    [ ] upload.html:78

    And, of course, the Form (jBox) doesn’t close.


    Any additional guidance/suggestions with call back and validation, and close() is appreciated.

  16. Ok, I have removed his code and am back to this:

    <?php
    if($_POST){
    	$to = 'chrisj...@.....com';
    	$subject = 'Thank you for your info';
    	$name = $_POST['name'];
    	$email = $_POST['email'];
    	$message = $_POST['message'];
    	$message1 = $_POST['message'];
    	$headers = $name;
    	$headers = 'from: info@.....com';
    	$message1 .= "\r\n\r\nName: ".$_POST['name']." \r\n Email: ".$_POST['email']." ";
    	$message = "Hello {$_POST['name']}, ~ Thank you for your input\r\n\r\n";
       		mail( $to, $subject, $message1, $headers );
       		mail( $email, $subject, $message, $headers );
    		header('Location: https://....');
       exit;
    }
    ?>

    and this:

    var myConfirm;
    $(document).ready(function() {
    
      myConfirm = new jBox('Confirm', {
        content: $('.my-jbox-form'),
        width: 830,
        height: 205,
        cancelButton: 'Return Home',
        confirmButton: 'Continue',
        closeOnConfirm: false,
        closeOnEsc: false,
        confirm: function() {
        $.ajax({
      url: 'https://...../submit.php',
      method: 'post',
      data: {
        name: $('#name').val(),
        email: $('#email').val()
      },
      success: function (response) {
        console.log(response);
        if (response.success) {
          alert('Success');
        } else {
          alert('Error');
        }
      }
    });

    I look forward to any guidance with adding "validate the input and then send some response back".

  17. Thanks for your reply,

    yes I have considered that - this section:

    function errorOutput($output, $code = 500) {
        http_response_code($code);
        echo json_encode($output);
    }

    but I'm not sure what with that or what to do next - any suggestion/solution is appreciated

×
×
  • 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.