webrtc java服务端录制_RecordRTC：利用WebRTC在Web端录制视频

最新推荐文章于 2025-11-09 09:47:24 发布

原创

最新推荐文章于 2025-11-09 09:47:24 发布 · 991 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#webrtc java服务端录制

本文介绍如何利用RecordRTC库在Web端利用WebRTC技术录制视频，适用于Firefox 17+、Chrome 21+、Edge 12+及Android设备。文章详细阐述了从引入依赖到实现录制功能的步骤，并警告了在微信浏览器中可能存在的问题。

利用RecordRTC打开手机或者电脑摄像头，进行录像，完成后对视频文件进行压缩。兼容Firefox 17+、Chrome 21+、Edge 12+、Chrome for Android等。这个只在安卓机适用。如果你是在微信浏览器做录制视频的功能，建议不要使用这种方法。因为录制的视频并没有保存下来，最终传给服务器的文件只剩下390字节的头，视频内容不存在。需要修改底层的RecordRTC.js，我也没有尝试，希望有其他人尝试过，可以留言交流。

一、首先在index.html引入getHTMLMediaElement文件

二、下载依赖包npm i recordrtcnpm i timers

三、在Vue框架可直接使用如下代码块

还剩：{ {sec}} 秒

已录制完成！
请点击右下角上传，或点击中间按钮重新录制

上传

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 || arg.getTracks || arg.getVideoTracks || arg.getAudioTracks) {

// // url = URL.createObjectURL(arg);

// }

if(str == 'string'){