利用RecordRTC打开手机或者电脑摄像头,进行录像,完成后对视频文件进行压缩。兼容Firefox 17+、Chrome 21+、Edge 12+、Chrome for Android等。以下代码使用Vue框架,如果不适用可借鉴 qq_34527715的博客
这个只在安卓机适用。如果你是在微信浏览器做录制视频的功能,建议不要使用这种方法。因为录制的视频并没有保存下来,最终传给服务器的文件只剩下390字节的头,视频内容不存在。需要修改底层的RecordRTC.js,我也没有尝试,希望有其他人尝试过,可以留言交流。
一、首先在index.html引入getHTMLMediaElement文件
二、下载依赖包
npm i recordrtc
npm i timers
三、在Vue框架可直接使用如下代码块
还剩:{ {sec}} 秒
已录制完成!
请点击右下角上传,或点击中间按钮重新录制
返回
上传
import RecordRTC from 'recordrtc'
import { setInterval, clearInterval } from "timers";
export default {
data() {
return {
winWidth: window.innerWidth,
platStatus: false, //按钮显示‘开始’
saveVideo: false,
sec: 10,
bloburl: '',
interval: '',
finish: false
}
},
created(){
},
mounted(){
console.log(this.winWidth)
const that = this;
var video = document.createElement('video');
video.controls = false;
var mediaElement = getHTMLMediaElement(video, {
buttons: ['full-screen', 'take-snapshot'],
showOnMouseEnter: false,
width: that.winWidth,
});
document.getElementById('recording-player').appendChild(video);
var div = document.createElement('section');
mediaElement.media.parentNode.appendChild(div);
div.appendChild(mediaElement.media);
var recordingPlayer = mediaElement.media;
var btnStartRecording = document.querySelector('#btn-start-recording');
var saveRecording = document.querySelector('#save-to-disk');
var mimeType = 'video/webm';
var fileExtension = 'webm';
var recorderType = null;
var type = 'video';
var videoBitsPerSecond = null;
var button = btnStartRecording;
function getURL(arg) {
console.log("getURL:", arg);
var url = arg;
var str = typeof(arg);
// if(arg instanceof Blob || arg instanceof File) {
// url = window.URL.createObjectURL(arg);
// }
// if(arg instanceof RecordRTC || arg.getBlob) {
// url = window.URL.createObjectURL(arg.getBlob());
// }
// if(arg instanceof MediaStream ||