Jump to content

Adding a 2nd email and a link


Chrisj
 Share

Recommended Posts

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>

 

Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

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