recordrtc java_RecordRTC：利用WebRTC在Web端录制视频

利用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 ||