From 34c03f740232eb27cae2a0816f6466633051526e Mon Sep 17 00:00:00 2001 From: jgerstbe Date: Sat, 3 Oct 2020 01:59:08 +0200 Subject: [PATCH] [A] basic recordrtc integration --- package-lock.json | 5 ++ package.json | 1 + src/app/app.component.html | 59 +++++---------------- src/app/app.module.ts | 3 +- src/app/recorder/recorder.component.html | 29 ++++++++++ src/app/recorder/recorder.component.scss | 0 src/app/recorder/recorder.component.spec.ts | 25 +++++++++ src/app/recorder/recorder.component.ts | 57 ++++++++++++++++++++ 8 files changed, 133 insertions(+), 46 deletions(-) create mode 100644 src/app/recorder/recorder.component.html create mode 100644 src/app/recorder/recorder.component.scss create mode 100644 src/app/recorder/recorder.component.spec.ts create mode 100644 src/app/recorder/recorder.component.ts diff --git a/package-lock.json b/package-lock.json index 4f4227b..74b4e09 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12425,6 +12425,11 @@ } } }, + "recordrtc": { + "version": "5.6.1", + "resolved": "https://registry.npmjs.org/recordrtc/-/recordrtc-5.6.1.tgz", + "integrity": "sha512-UU7Fd9IIuz60TPq4GgL1qtgo2mzEZWzPxEraNe32eo4/ndjKmuj715HB7W1k63G09teM1dXJYubPEmLkQ/lq5Q==" + }, "redis": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/redis/-/redis-2.8.0.tgz", diff --git a/package.json b/package.json index a02ea10..9e7c60e 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@ng-bootstrap/ng-bootstrap": "7.0.0", "bootstrap": "4.5.2", "core-js": "3.6.4", + "recordrtc": "^5.6.1", "rxjs": "6.5.4", "tslib": "1.13.0", "zone.js": "0.10.2" diff --git a/src/app/app.component.html b/src/app/app.component.html index 4b655b7..d5bc967 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -3,13 +3,13 @@
+
+ +
-
+

{{user.name}}

{{user.submit_time | date :'dd.MM. HH:mm' }}

@@ -21,60 +21,29 @@
-

- {{selectedUser.name}} - - {{selectedUser.submit_time | date :'dd.MM. HH:mm' }} + {{selectedUser.name}} - + {{selectedUser.submit_time | date :'dd.MM. HH:mm' }}

- +
- + \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c68f57a..a60cfa8 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,9 +3,10 @@ import { NgModule } from "@angular/core"; import { AppComponent } from "./app.component"; import { NgbModalModule } from "@ng-bootstrap/ng-bootstrap"; +import { RecorderComponent } from './recorder/recorder.component'; @NgModule({ - declarations: [AppComponent], + declarations: [AppComponent, RecorderComponent], imports: [BrowserModule, NgbModalModule], providers: [], bootstrap: [AppComponent] diff --git a/src/app/recorder/recorder.component.html b/src/app/recorder/recorder.component.html new file mode 100644 index 0000000..5aadad5 --- /dev/null +++ b/src/app/recorder/recorder.component.html @@ -0,0 +1,29 @@ + + + + +
+
+ + + + + +
+ + + +
+ \ No newline at end of file diff --git a/src/app/recorder/recorder.component.scss b/src/app/recorder/recorder.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/recorder/recorder.component.spec.ts b/src/app/recorder/recorder.component.spec.ts new file mode 100644 index 0000000..f731276 --- /dev/null +++ b/src/app/recorder/recorder.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RecorderComponent } from './recorder.component'; + +describe('RecorderComponent', () => { + let component: RecorderComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ RecorderComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(RecorderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/recorder/recorder.component.ts b/src/app/recorder/recorder.component.ts new file mode 100644 index 0000000..d24c527 --- /dev/null +++ b/src/app/recorder/recorder.component.ts @@ -0,0 +1,57 @@ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { NgbModal, NgbModalRef } from "@ng-bootstrap/ng-bootstrap"; +import * as rrtc from 'recordrtc'; + +@Component({ + selector: 'ah-recorder', + templateUrl: './recorder.component.html', + styleUrls: ['./recorder.component.scss'] +}) +export class RecorderComponent implements OnInit { + @ViewChild("content") content; + @ViewChild("activeStory") video; + stream: MediaStream; + recorder: rrtc.RecordRTCPromisesHandler; + modal: NgbModalRef; + isRecording: boolean = false; + id: string = 'thisisalocalvideo'+Math.round(Math.random()*10000); + + constructor( + private modalService: NgbModal, + ) {} + + ngOnInit(): void {} + + async openModal() { + this.modal = this.modalService.open(this.content, { + centered: true + }); + this.stream = await navigator.mediaDevices.getUserMedia({ + video: true, + audio: true + }); + setTimeout(() => { + const video:any = document.getElementById(this.id); + video.volume = 0; + video.muted = true; + }, 200); + } + + startRecording() { + this.isRecording = true; + this.recorder = new rrtc.RecordRTCPromisesHandler(this.stream, { + type: 'video', + }); + this.recorder.startRecording(); + } + + async stopRecording() { + this.isRecording = false; + await this.recorder.stopRecording(); + let blob = await this.recorder.getBlob(); + // TODO upload instead + rrtc.invokeSaveAsDialog(blob, 'Recorded-Video.webm'); + this.modal.close(); + } + +} \ No newline at end of file