|
@@ -0,0 +1,58 @@
|
|
|
|
|
+class CapVideo {
|
|
|
|
|
+ private chunks = [] as Blob[]
|
|
|
|
|
+ private timer = 0 as any
|
|
|
|
|
+ private captime = 60000
|
|
|
|
|
+
|
|
|
|
|
+ _init(videoDom: string, callBack: (arg0: Blob) => void) {
|
|
|
|
|
+ const dom = document.getElementById(videoDom) as HTMLCanvasElement
|
|
|
|
|
+ dom!.onplay = () => {
|
|
|
|
|
+
|
|
|
|
|
+ //创建MediaRecorder，设置媒体参数
|
|
|
|
|
+ const stream = dom!.captureStream(60);
|
|
|
|
|
+ const recorder = new MediaRecorder(stream, {
|
|
|
|
|
+ mimeType: 'video/webm;codecs=vp8'
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ // 开始
|
|
|
|
|
+ recorder.onstart = () => {
|
|
|
|
|
+ this.chunks = []
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 收集
|
|
|
|
|
+ recorder.ondataavailable = e => {
|
|
|
|
|
+ this.chunks.push(e.data);
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 停止
|
|
|
|
|
+ recorder.onstop = () => {
|
|
|
|
|
+ // 回传数据
|
|
|
|
|
+ const blob = new Blob(this.chunks);
|
|
|
|
|
+ callBack(blob)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 录制
|
|
|
|
|
+ this.autoRecorder(recorder)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ // 自动录制
|
|
|
|
|
+ private autoRecorder(recorder: MediaRecorder) {
|
|
|
|
|
+ recorder.start()
|
|
|
|
|
+ this.timer = setTimeout(() => {
|
|
|
|
|
+ recorder.stop();
|
|
|
|
|
+ this.autoRecorder(recorder)
|
|
|
|
|
+ }, this.captime);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 销毁
|
|
|
|
|
+ destory() {
|
|
|
|
|
+ if (this.timer) clearTimeout(this.timer)
|
|
|
|
|
+ this.chunks = []
|
|
|
|
|
+ this.timer = 0
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+export default new CapVideo()
|
