shankarsumanth / angular2-recordrtc

A demonstration of RecordRTC working with Angular 2

angular2-webpack-material-design

This repository has angular 2 + webpack + material Design + bootstrap + yarn.

Integrate RecordRTC + Angular2 Guide/Explanation

Quick start

• Clone/Download the repo.
• install yarn globally npm install -g yarnpkg or lookup here Yarn-Package Manager"
• Run "yarn" without the quotes
• npm start
• Go to http://localhost:8080/record-rtcin your browser
• you need to give permissions to access webcam and microphone

License

MIT

angular2-recordrtc's Issues

Issue in startRecording() Method

Hi,

Encountering an error when trying to integrate the same code into my local application, Requesting you to please respond onto this....

Thanks in Advance...

Can't play video after recording

I followed steps by your tutorial and everything works, except of playing video after recording. It plays only sound, but the video area is empty. Your example has the same issue.
As i understand this code should put result url to video element so we can watch it and save or record again.

processVideo(audioVideoWebMURL) {
    let video: HTMLVideoElement = this.video.nativeElement;
    let recordRTC = this.recordRTC;
    **video.src = audioVideoWebMURL;**


    this.toggleControls();
    var recordedBlob = recordRTC.getBlob();
    recordRTC.getDataURL(function (dataURL) { });
  }

Actually, it's didn't work in Opera. In Chrome everything is OK.

How to Record the screen? Do we need any additional plugin for that?

Hello Sumanth,

May i know how to record the screen ? Do we need any specific plugin for that apart from the API ? Could you please provide an example of that ? I tried to implement Screen + Audio recording but not working as per your example. Video Recording works fine.

node-sass issue

Hi Shankar,
After running yarn on my windows 10 machine, it fails to compile the node-sass package.

Building: C:\Program Files\nodejs\node.exe C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [ 'C:\\Program Files\\nodejs\\node.exe',
gyp verb cli   'C:\\Users\\Vaibhav Acharya\\Desktop\\Web Devlopment Bootcamp\\Angular_2\\Angular2-RecordRTC-master\\node_modules\\node-gyp\\bin\\node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library=' ]
gyp info using [email protected]
gyp info using [email protected] | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\isexe\index.js:44:5
gyp verb `which` failed     at C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\isexe\windows.js:29:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:152:21)
gyp verb `which` failed  python2 { Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\isexe\index.js:44:5
gyp verb `which` failed     at C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\isexe\windows.js:29:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:152:21) code: 'ENOENT' }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` failed Error: not found: python
gyp verb `which` failed     at getNotFoundError (C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\isexe\index.js:44:5
gyp verb `which` failed     at C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\isexe\windows.js:29:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:152:21)
gyp verb `which` failed  python { Error: not found: python
gyp verb `which` failed     at getNotFoundError (C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\isexe\index.js:44:5
gyp verb `which` failed     at C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\isexe\windows.js:29:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:152:21) code: 'ENOENT' }
gyp verb could not find "python". checking python launcher
gyp verb could not find "python". guessing location
gyp verb ensuring that file exists: C:\Python27\python.exe
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\node-gyp\lib\configure.js:454:19)
gyp ERR! stack     at PythonFinder.<anonymous> (C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\node-gyp\lib\configure.js:480:16)
gyp ERR! stack     at C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:152:21)
gyp ERR! System Windows_NT 10.0.16299
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Vaibhav Acharya\\Desktop\\Web Devlopment Bootcamp\\Angular_2\\Angular2-RecordRTC-master\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd C:\Users\Vaibhav Acharya\Desktop\Web Devlopment Bootcamp\Angular_2\Angular2-RecordRTC-master\node_modules\node-sass
gyp ERR! node -v v8.1.2

I tried manually updating the node-sass package, but instead it started giving new 200+ errors regarding material design. Please help.

Only run on Coc Coc browser but it's not working on Chrome and Firefox

Hi Shankar Sumanth, I followed your post Integrate RecordRTC with Angular 2 -Typescript and made a mini project for web recorder. It only run on Cốc Cốc browser but it did not work on Chrome and Firefox. Inspite of putting mircrophone is allowed on Chrome and Firefox, it also did not work. Can you help me?

Is this works with Angular 5? Please help

Is this works with Angular 5? Please help. Am getting below error in Angular 5:
ERROR TypeError: Cannot read property 'stopRecording' of undefined
at HomeComponent.push../src/app/components/home/home.component.ts.HomeComponent.stopRecording (home.component.ts:82)
at Object.eval [as handleEvent] (HomeComponent.html:33)
at handleEvent (core.js:11107)
at callWithDebugContext (core.js:12204)
at Object.debugHandleEvent [as handleEvent] (core.js:11907)
at dispatchEvent (core.js:8561)
at core.js:9005
at HTMLButtonElement. (platform-browser.js:1215)

How to record the application opened in the browser

Hi Sumanth,

May i know how to record the application opened in the browser ? At this moment, iam seeing it is switching on the cam and start recording the one who is clicking on the recording.I need to record the application .How to do that ?

Thanks

Error: RecordRTC is not a function

Just got an error while running RecordRTC with Angular2 which is saying
RecordRTC is not a function

Is it due to Angular2 Version? Actually I'm using 2.3.1 but can't figure out the problem.

Please help me.

Recording Audio only

How to record audio only?

Error: Cannot find module "@angular/animations"

Not sure if it's me, but when I browse: localhost:8080 I receive two errors

Console:

GET http://localhost:8080/sockjs-node/info?t=1494877261881
( response: {"websocket":true,"origins":["*:*"],"cookie_needed":false,"entropy":1885491188} )

[WDS] Errors while compiling.
Error: Cannot find module "@angular/animations"
Error: Cannot find module "@angular/material/core/theming/prebuilt/purple-green.css"