Adding a 2nd email and a link

[Chrisj]

This script (code below) successfully records a webcam.
After recording, when 'upload" is selected:

1. the recorded file is directed (by a php file) to upload to a /Folder destination.
2. and the the User is directed to a Form page (to complete - requiring the Users’ email address).
When the User completes the Form, and selects “send”, I receive the Form contents (via email).

How can I receive a link to the the recorded file, with the Form contents, via email?
How can the User receive a unique link to the recorded file, to the email address he entered into the Form?

Any ideas/suggestions will be appreciated.

 <script>
            const video = document.querySelector('video')
            const startvideo = document.querySelector('.start')
            const upload = document.querySelector('.upload')
            const initRecorder = stream => {
            let blob
              video.srcObject = stream
              startvideo.removeAttribute('disabled')
              video.addEventListener('loadedmetadata', () => {
              video.play()
              })
              recorder.addEventListener('dataavailable', ({ data }) => {
              video.srcObject = null
              video.src = URL.createObjectURL(data)
              // Create a blob from the data for upload
              blob = new Blob([data], { type: 'video/webm' })
              })

              startvideo.addEventListener('click', () => {
              stopvideo.removeAttribute('disabled')

              show()
              reset()
              start()
              recorder.start()
		 				  // Get the video element with id="myVideo"
							document.getElementsByTagName("span")[0].removeAttribute("class")
							document.getElementsByTagName("span")[0].setAttribute("class", "colorred")
		        	//document.getElementById("demo").innerHTML ="Recording...."
							})

							stopvideo.addEventListener('click', () => {
              upload.removeAttribute('disabled')
              recorder.stop()
              stop()
							document.getElementsByTagName("span")[0].removeAttribute("class")
							document.getElementsByTagName("span")[0].setAttribute("class", "colorgreen")
							//document.getElementById("demo").innerHTML ="recorded Successfully ..."
              video.setAttribute("controls","controls")
							})

							// Upload the video blob as form data ............................
              upload.addEventListener('click', () => {
              uploadBlob(blob)
            })
          }

           ///////////////////////////////////////////////////

		  		  //Reset the Camera
		  		             function resetCamera(){
		  		                location.reload();
		  		              }

/////////////////////////////////////////////////////////

					  //   uploading functionality

            	var blob, fileName, fileObject;
              function uploadBlob(blob) {
                  prepareBlob(blob);
            			InitUploading();
              }
            //////////////////////////////////preparing blob metadat////////////////////
            function prepareBlob(blob){
            	    	// 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.');
            							 // preview uploaded file
            							 video.src = fileDownloadURL;
            							 // open uploaded file in a new tab
            							 window.open(fileDownloadURL);
            					 });
            			 }

              ///////////////////////////////////////////////////////////////////////////////////

                    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 = '../uploadWC.html';

                    return;

                            }
                        };
                        request.upload.onloadstart = function () {
                            callback('Upload Begins...');
                        };
                        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() +1;
                        var date = d.getUTCDate();
                        return 'VTH-' + 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, '');
                        }

					}
					}
}

              navigator
                .mediaDevices
                .getUserMedia({audio: true, video: true })
                .then(initRecorder)
                .catch(console.error)

         </script>

 

[requinix]

Well, that code doesn't do any emailing, so it's not particularly useful.

The video is uploaded, right? So you know where it's being uploaded to. So you should be able to link to it in your email. What's stopping you?

[Chrisj]

Thanks for your reply.
The script sends the file to the storage folder, via this file code:

<?php

foreach(array('video', 'audio') as $type) {

if (isset($_FILES["${type}-blob"])) {

$fileName = $_POST["${type}-filename"];

$uploadDirectory = 'uploadWC/'.$fileName;

if (!move_uploaded_file($_FILES["${type}-blob"]["tmp_name"], $uploadDirectory)) {

echo(" problem moving uploaded file");

}
echo($fileName);
}
}
?>

And after the file uploads, the User is directed to a Form, and this file sends the Form:

<?php
//check if form was sent
if($_POST){
	$to = 'WCform@....com';
	$subject = 'WebCamForm';

	$name = $_POST['name'];
	$email = $_POST['email'];
	$message = $_POST['message'];
	$headers = $name;
	$message .= "\r\n\r\n" . $name;

if( empty($_POST["some_place"]) or $_POST['some_place'] != "glory" )
{
   header("HTTP/1.0 403 Forbidden");
   	}else{
   		mail( $to, $subject, $message, $email, $headers );
   	}
		header('Location: http://www....com/ThankYou.html');
   exit;
}
?>

So, regarding the question "what's stopping you", the answer is I don't know how to add code each time to automatically add the User's Form-entered email address and file name link, to the emailing. Any help will be appreciated.

 

 

[requinix]

What do you mean they're "directed to a form". Is the upload not happening at the same time as everything else?

[ginerjm]

This puzzles me. 

${type}-blob

What are you trying to reference with this nomenclature?  An uploaded file by the name of "video-blob" perhaps?  If so you are using the braces incorrectly.  If not then can someone educate me on this 'new' form of reference?

 

IMHO - I think it s/b

$type . '-blob'

but even that may not work as an index to the FILES array.

[Chrisj]

Thanks for your replies.

By "directed to a Form" I mean that upon the User selecting "upload" the file is sent and the User is re-directed to a page with a Form on it.

 

[requinix]

39 minutes ago, ginerjm said:

This puzzles me. 

${type}-blob

What are you trying to reference with this nomenclature?  An uploaded file by the name of "video-blob" perhaps?  If so you are using the braces incorrectly.  If not then can someone educate me on this 'new' form of reference?

It's valid. ${var} and {$var} are both fine, though the latter is favored more by the PHP community.

[Chrisj]

Thanks for your reply regarding "blob". I can't comment on that, as I didn't write the javascript, I only know that it works successfully.

I am hoping for help to add code each time to automatically add the User's Form-entered email address and file name link, to the emailing

[requinix]

1 minute ago, Chrisj said:

Thanks for your replies.

By "directed to a Form" I mean that upon the User selecting "upload" the file is sent and the User is re-directed to a page with a Form on it.

So the two forms are separate.

If you want to process both the upload and the email at the same time then you should do them both at the same time. Any particular reason these aren't together in one single form?

[Chrisj]

Thanks again for your reply. 

I don't know why they are separate, can you help me bring them together?

[requinix]

Start off by combining the two forms together. Like, literally. Put all of the second form's fields into the first form. And arrange it all however you want.

Then you combine the code that processes the forms together. Basically copy and paste, then go through and clean up the merged result.

Once you confirm everything works as well as it does now, then we can resume doing the email thing.