用RecordRTC录制视频上传到后端php
上一讲我们实现了摄像头的视频录制与视频下载,如果我们要把录制好的视频直接发送到后端,比如php该如何弄呢,今天来演示一下
1、前端代码
<!DOCTYPE html> <html> <head> <script src="http://repo.bfw.wiki/bfwrepo/js/RecordRTC.js"></script> <script src="http://repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script> <style> video { max-width: 100%; border: 5px solid yellow; border-radius: 9px; } body { background: black; } h1 { color: yellow; } </style> </head> <body> <h1 id="header">用RecordRTC 录制视频上传到php</h1> <p style="color: yellow;"> 首先需要<a href="https://chrome.google.com/webstore/detail/getusermedia/nbnpcmljmiinldficickhdoaiblgkggc">安装chrome扩展</a>,注意,这需要fanqiang,如果打不开,就查看这篇文章手动安装chrome扩展,<a href="http://www.bfw.wiki//user10/15640228901296320096.html">点击查看</a> </p> <video id="your-video-id" controls autoplay playsinline></video> <script type="text/javascript"> // capture camera and/or microphone navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(function(camera) { // preview camera during recording document.getElementById('your-video-id').muted = true; document.getElementById('your-video-id').srcObject = camera; // recording configuration/hints/parameters var recordingHints = { type: 'video' }; // initiating the recorder var recorder = RecordRTC(camera, recordingHints); // starting recording here recorder.startRecording(); // auto stop recording after 5 seconds var milliSeconds = 5 * 1000; setTimeout(function() { // stop recording recorder.stopRecording(function() { // get recorded blob var blob = recorder.getBlob(); // generating a random file name var fileName = getFileName('webm'); // we need to upload "File" --- not "Blob" var fileObject = new File([blob], fileName, { type: 'video/webm' }); var formData = new FormData(); // recorded data formData.append('video-blob', fileObject); // file name formData.append('video-filename', fileObject.name); document.getElementById('header').innerHTML = '上传视频到护短php使用 jQuery.... 文件大小: (' + bytesToSize(fileObject.size) + ')'; var upload_url = 'https://webrtcweb.com/f/'; // var upload_url = 'RecordRTC-to-PHP/save.php'; var upload_directory = upload_url; // var upload_directory = 'RecordRTC-to-PHP/uploads/'; // upload using jQuery $.ajax({ url: upload_url, // replace with your own server URL data: formData, cache: false, contentType: false, processData: false, type: 'POST', success: function(response) { if (response === 'success') { alert('successfully uploaded recorded blob'); // file path on server var fileDownloadURL = upload_directory + fileObject.name; // preview the uploaded file URL document.getElementById('header').innerHTML = '<a href="' + fileDownloadURL + '" target="_blank">' + fileDownloadURL + '</a>'; // preview uploaded file in a VIDEO element document.getElementById('your-video-id').srcObject = null; document.getElementById('your-video-id').src = fileDownloadURL; // open uploaded file in a new tab window.open(fileDownloadURL); } else { alert(response); // error/failure } } }); // release camera document.getElementById('your-video-id').srcObject = document.getElementById('your-video-id').src = null; camera.getTracks().forEach(function(track) { track.stop(); }); }); }, milliSeconds); }); // 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> <footer style="margin-top: 20px;"><small id="send-message"></small></footer> </body> </html>2、后端代码php
前端构建了formdata,包含2个参数
'video-blob', video-filename',那么php就要接受这2个参数,第一个是文件二进制,第二个是文件名
<?php if ($_SERVER['REQUEST_METHOD']=='POST') { $filepathName = $_SERVER['DOCUMENT_ROOT'].'/uploads/'.$_FILES['video-blob']['name']; if (move_uploaded_file($_FILES['video-blob']['tmp_name'],$filepathName )){ echo "ok"; //$_filename=$_FILES['video-filename']['name'];//传过来的第二个参数 } }
网友评论0