这个只在安卓机适用。如果你是在微信浏览器做录制视频的功能,建议不要使用这种方法。因为录制的视频并没有保存下来,最终传给服务器的文件只剩下390字节的头,视频内容不存在。需要修改底层的RecordRTC.js,我也没有尝试,希望有其他人尝试过,可以留言交流。利用RecordRTC打开手机或者电脑摄像头,进行录像,完成后对视频文件进行压缩。兼容Firefox 17+、Chrome 21+、Edge 12+、Chrome for Android等。
一、首先在index.html引入getHTMLMediaElement文件
二、下载依赖包
npm i recordrtc
npm i timers
三、在Vue框架可直接使用如下代码块
还剩:{{sec}} 秒
已录制完成!
请点击右下角上传,或点击中间按钮重新录制
.play{ width: 50px; height: 50px; line-height: 52px; text-align: center; background-color: #fff; border: 1px solid #ccc; border-radius: 50%; position: absolute; bottom: 20px; left: 50%; margin-left: -25px; }.start{ display: inline-block; width: 35px; height: 35px; border-radius: 50%; background-color: #ccc; margin-top: 6px;
}.stop{ display: inline-block; width: 15px; height: 15px; border-radius: 5px; background-color: red; margin-top: 16px;
}.save{ width: 50px; height: 35px; line-height: 35px; text-align: center; background-color: #fff; border: 1px solid #ccc; border-radius: 3px; position: absolute; bottom: 25px; right: 20px;
}.back{ width: 50px; height: 35px; line-height: 35px; text-align: center; background-color: #fff; border: 1px solid #ccc; border-radius: 3px; position: absolute; bottom: 25px; left: 20px;
}.settime{ width: 100%; height: 40px; line-height: 40px; background-color: rgba(0, 0, 0, 0.5); color: #fff; text-align: center;
}.finish{ text-align: center; margin-top: 100px; padding: 20px;
}
作者:Lucia_Huang
链接:https://www.jianshu.com/p/6971dbdfbcc2



