网站内容与功能设计,优化方案物理必修一电子版,做soho 怎么建立网站,wordpress调用一周文章项目需求#xff1a;后端给一个mp4视频的链接#xff0c;在前端播放#xff0c;同时支持用户的录制视频操作。
一、技术选择
1. 毫无关系的getUserMedia
官方介绍文档#xff1a;MediaDevices.getUserMedia() - Web API 接口参考 | MDN
在网上搜索“前端如何录像”后端给一个mp4视频的链接在前端播放同时支持用户的录制视频操作。
一、技术选择
1. 毫无关系的getUserMedia
官方介绍文档MediaDevices.getUserMedia() - Web API 接口参考 | MDN
在网上搜索“前端如何录像”AI非常贴心地提供了这个函数代码也写得有模有样仔细一看发现和目的毫不相干浏览器提供的 navigator.mediaDecives.getUserMedia() 是用来调用摄像头和麦克风的与其相仿的 navigator.mediaDecives.getDisplayMedia() 则能够实现共享窗口和屏幕。
起初我想利用 navigator.mediaDecives.getDisplayMedia 对页面进行录制但是在浏览器中被共享的内容可以是浏览器的其他页面、正在使用的其他窗口、整个屏幕唯独没有调用此函数的界面遂放弃此想法。
2. rrweb
官网使用文档https://github.com/rrweb-io/rrweb/blob/master/guide.zh_CN.md
这个库也是在网上看到的用的人很多然而不适用本工作场景rrweb关注整个页面以及用户在页面上的各种操作会记录页面DOM节点的变动适合录制网课这类的场景用来处理单独的video元素有种杀鸡用牛刀的感觉。
3. recordrtc - canvas用法
github地址https://github.com/muaz-khan/RecordRTC
recordrtc是基于webRTC的实现录屏的库支持audio, video, canvas, gif四种类型。
具体使用流程如下以普通html文件为例
1引入
script srchttps://cdn.WebRTC-Experiment.com/RecordRTC.js/script
script srchttps://cdn.webrtc-experiment.com/screenshot.js/script
2创建对象
let element document.getElementById(canvas);
let recordRTC RecordRTC(element, {type: canvas
});
3开始录制和结束录制
function start() {recordRTC.startRecording();
}function stop() { recordRTC.stopRecording(function(videoURL) {var a document.createElement(a);a.href videoURL;a.download a.mp4;a.click();});
}
在结束录制函数stopRecording中videoURL返回的是一个blob url将其赋值给video元素的src可以直接播放出录制的视频。本项目中需要下载录制视频因此将videoURL赋值给新建的a标签从而实现对录制视频的下载
4将video内容绘制到canvas上
let ctx canvas.getContext(2d);
let video document.getElementById(video);
video.addEventListener(play, function() {setInterval(() {ctx.drawImage(content, 0, 0, 500, 300);}, 100);
}, false);
在typecanvas的配置下recordrtc会对canvas进行录制而canvas不能直接包含video标签所以为了录制视频监听视频的播放操作在play状态下将画面逐帧绘制到canvas上我采用了setInterval用requestAnimationFrame是同样的效果。
5html内容
canvas idelementToShare width500 height300
/canvasvideo width500 height300 controls idvideo src./test.mp4
/videodivbutton onclickstart()开始录制/buttonbutton onclickstop()结束录制/button
/div
以上代码能成功实现对video的录制而且完全没有后期出现的录制视频卡顿的问题。但是没声音。canvas只能录制画面而我的需求是录制带声音的视频。
二、实际使用
1. 技术方案recordrtc
在recordrtc的官方案例中给出的是这样一个例子
let stream await navigator.mediaDevices.getUserMedia({video: true, audio: true});
let recorder RecordRTC(stream, {type: video
});
其中RecordRTC接收的第一个参数是来自媒体设备传来的视频流。
我起初尝试仿照canvas直接将video节点传入然而不行在type为video的情况下RecordRTC接收的第一个参数必须是流。
在网上搜了半天找到了一个函数captureStream在浏览器上的兼容性一般但是能够实现将获取video流的效果。
2. 代码
templatediv v-ifisShow :styledomStyle div classcontrol-boxButton v-show!isRecording clickstartRecord录制/ButtonButton v-showisRecording clickstopRecord停止录制/Button/divdiv classvideo-boxvideo controls refvideo/video/diva reflink/a/div
/templatescript
import RecordRTC from recordrtc;
export default {data() {return {isRecording: false,recordRTC: null,};},created() {// ...},mounted() {// ...this.initRecordRTC();},methods: {// 初始化recordRTCinitRecordRTC() {this.recordRTC null;let stream null;const video this.$refs.video;if (video.captureStream) { // 适用于chrome内核stream video.captureStream();} else if (video.mozCaptureStream) { // 适用于firefox内核stream video.mozCaptureStream();} else {this.$Message.warning(不支持captureStream无法录制);return;}this.recordRTC RecordRTC(stream, {type: video});},// 录制startRecord() {this.recordRTC.startRecording();this.isRecording true;},// 停止录制stopRecord() {this.recordRTC.stopRecording((videoURL) {let a this.$refs.link;a.href videoURL;a.download test.mp4;a.click();});this.isRecording false;},}
};
/scriptstyle scoped
.video-box {padding: 10px;
}
/style
3. 细节问题
由于项目中的播放器支持用户改变文件路径出现一个问题是在修改video的src后如果在播放视频前点击录制项目会报一个错误原因是在startRecording之前获取不到stream流。
解决方案是为recorder.startRecording加一个定时器将上面的startRecord函数改成如下内容
startRecord() {setTimeout(() {this.recordRTC.startRecording();this.isRecording true;}, 500);
}
