HTML 部分:
<div class="layui-body">
<div style="margin-left: 10%" id="container">
<video id="gum" autoplay muted></video>
<div>
<button id="record" disabled>开始录制</button>
<button id="upload" disabled>上传</button>
</div>
JS 部分:
var mediaSource = new MediaSource();
mediaSource.addEventListener('sourceopen', handleSourceOpen, false);
var mediaRecorder;
var recordedBlobs;
var sourceBuffer;
var gumVideo = document.querySelector('video#gum');
var recordButton = document.querySelector('button#record');
var uploadButton = document.querySelector('button#upload');
recordButton.onclick = toggleRecording;
uploadButton.onclick = upload;
// window.isSecureContext could be used for Chrome
var isSecureOrigin = location.protocol === 'https:' || location.hostname === 'localhost';
if (!isSecureOrigin) {
alert('getUserMedia() must be run from a secure origin: HTTPS or localhost.' + '\n\nChanging protocol to HTTPS');
location.protocol = 'HTTPS';
}
var constraints = {
audio: true,
video: true
};
function handleSuccess(stream) {
recordButton.disabled = false;
console.log('getUserMedia() got stream: ', stream);
window.stream = stream;
gumVideo.srcObject = stream;
}
function handleError(error) {
console.log('navigator.getUserMedia error: ', error);
}
navigator.mediaDevices.getUserMedia(constraints).
then(handleSuccess).catch(handleError);
function handleSourceOpen(event) {
console.log('MediaSource opened');
sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');
console.log('Source buffer: ', sourceBuffer);
}
function handleDataAvailable(event) {
if (event.data && event.data.size > 0) {
recordedBlobs.push(event.data);
}
}
function handleStop(event) {
console.log('Recorder stopped: ', event);
}
function toggleRecording() {
if (recordButton.textContent === '开始录制') {
startRecording();
} else {
stopRecording();
recordButton.textContent = '开始录制';
uploadButton.disabled = false;
}
}
function startRecording() {
recordedBlobs = [];
var options = {mimeType: 'video/mp4;codecs=vp9'};
if (!MediaRecorder.isTypeSupported(options.mimeType)) {
console.log(options.mimeType + ' is not Supported');
options = {mimeType: 'video/mp4;codecs=vp8'};
if (!MediaRecorder.isTypeSupported(options.mimeType)) {
console.log(options.mimeType + ' is not Supported');
options = {mimeType: 'video/mp4'};
if (!MediaRecorder.isTypeSupported(options.mimeType)) {
console.log(options.mimeType + ' is not Supported');
options = {mimeType: ''};
}
}
} try {
mediaRecorder = new MediaRecorder(window.stream, options);
} catch (e) {
console.error('Exception while creating MediaRecorder: ' + e);
alert('Exception while creating MediaRecorder: ' + e + '. mimeType: ' + options.mimeType);
return;
}
console.log('Created MediaRecorder', mediaRecorder, 'with options', options);
recordButton.textContent = '结束录制';
uploadButton.disabled = true;
mediaRecorder.onstop = handleStop;
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start(10); // collect 10ms of data
console.log('MediaRecorder started', mediaRecorder);
}
function stopRecording() {
mediaRecorder.stop();
console.log('Recorded Blobs: ', recordedBlobs);
}
function upload(){
//保存在本地,通过post请求
//还可以用append方法添加一些附加信息参数为(name,value),如下面的代码:
var blob = new Blob(recordedBlobs, {type: 'video/mp4'});
var formData = new FormData();
formData.append('video', blob);
console.log(formData);
$.ajax({
type: "POST",
url: "/user/vertify",
data: formData,
processData:false, // 告诉jquery不要处理发送的数据
contentType:false, // 告诉jquery不要设置content-Type请求头
success:function(res){
console.log(res);
}
});
}
PHP控制器部分
public function vertify()
{
$video = $_FILES;
//转移视频
$res = move_uploaded_file($video['video']['tmp_name'],'text.mp4');
}
原文链接:https://blog.csdn.net/xiaopeng_han123/article/details/78602022?locationNum=1&fps=1