本地录制然后上传文件么？
是的是的，录制上传之后，和提问视频通过ffmpeg合并<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>视频录制</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,body{margin:0;padding:0;height:100%}
video{height:calc(100% - 60px);width:100%}
.recorderControl{height:30px;width:100%;background:#ccc;text-align:center}
button,a{display:inline-block;width:30%;margin:0 1%;border:1px solid #eee;text-align:center;line-height:2;font-size:14px}
</style>
</head>
<body>
<div class="layui-body">
<div id="container">
<video id="gum" autoplay muted></video>
<div>
<button id="record">开始录制</button>
<button id="upload" disabled>上传</button>
<a id="download" onclick="downloads()">下载</a>
</div>
<script>
//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: {
width:480,//视频宽度
height:480,//视频高度
frameRate:60,//每秒60帧
}
};
function handleSuccess(stream) {
recordButton.disabled = false;
window.stream = stream;
gumVideo.srcObject = stream;
}
function handleError(error) {
}
//navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
function handleSourceOpen(event) {
sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');
}
function handleDataAvailable(event) {
if (event.data && event.data.size > 0) {
recordedBlobs.push(event.data);
}
}
function handleStop(event) {
}
function toggleRecording() {
if (recordButton.textContent === '开始录制') {
startRecording();
} else {
stopRecording();
recordButton.textContent = '开始录制';
uploadButton.disabled = false;
}
}
function startRecording() {
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
recordedBlobs = [];
var options = {mimeType: 'video/webm;codecs=h264'};
try {
mediaRecorder = new MediaRecorder(window.stream, options);
} catch (e) {
return;
}
recordButton.textContent = '结束录制';
uploadButton.disabled = true;
mediaRecorder.onstop = handleStop;
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start(10);
}
function stopRecording() {
mediaRecorder.stop();
}
function downloads() {
var blob = new Blob(recordedBlobs, {type: 'video/mp4'});
var url= window.URL.createObjectURL(blob);
var down = document.getElementById("download");
down.href = url;
down.download = 'media.mp4';
}
function upload(){
//保存在本地，通过post请求
//还可以用append方法添加一些附加信息参数为(name,value)，如下面的代码：
var blob = new Blob(recordedBlobs, {type: 'video/mp4'});
uploadButton.disabled = true;
var formData = new FormData();
formData.append('video', blob);
var req = new XMLHttpRequest();
req.open("POST", "/api/index/index");
req.send(formData);
}
</script>
</body>
</html>
页:
1
[2]