用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'];//传过来的第二个参数
}
}
{{collectdata}}
网友评论0