feature: vor und nachteile

This commit is contained in:
Hikyu
2026-05-31 13:54:31 +02:00
parent 552a947a1c
commit e3dad17446
23270 changed files with 3024794 additions and 200 deletions
+20
View File
@@ -0,0 +1,20 @@
The MIT License (MIT)
Copyright (c) 2013-2020 [Muaz Khan](https://github.com/muaz-khan)
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+354
View File
@@ -0,0 +1,354 @@
# RecordRTC.js | [Live Demo](https://www.webrtc-experiment.com/RecordRTC/)
**WebRTC JavaScript Library for Audio+Video+Screen+Canvas (2D+3D animation) Recording**
[Chrome Extension](https://github.com/muaz-khan/Chrome-Extensions/tree/master/screen-recording) or [Dozens of Simple-Demos](https://www.webrtc-experiment.com/RecordRTC/simple-demos/) and [it is Open-Sourced](https://github.com/muaz-khan/RecordRTC) and has [API documentation](https://recordrtc.org/)
[![npm](https://img.shields.io/npm/v/recordrtc.svg)](https://npmjs.org/package/recordrtc) [![downloads](https://img.shields.io/npm/dm/recordrtc.svg)](https://npmjs.org/package/recordrtc) [![Build Status: Linux](https://travis-ci.org/muaz-khan/RecordRTC.png?branch=master)](https://travis-ci.org/muaz-khan/RecordRTC)
**A demo using promises:**
```javascript
let stream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
let recorder = new RecordRTCPromisesHandler(stream, {
type: 'video'
});
recorder.startRecording();
const sleep = m => new Promise(r => setTimeout(r, m));
await sleep(3000);
await recorder.stopRecording();
let blob = await recorder.getBlob();
invokeSaveAsDialog(blob);
```
**A demo using normal coding:**
```javascript
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(async function(stream) {
let recorder = RecordRTC(stream, {
type: 'video'
});
recorder.startRecording();
const sleep = m => new Promise(r => setTimeout(r, m));
await sleep(3000);
recorder.stopRecording(function() {
let blob = recorder.getBlob();
invokeSaveAsDialog(blob);
});
});
```
* [Watch a YouTube video presentation/tutorial](https://www.youtube.com/watch?v=YrLzTgdJ-Kg)
## Browsers Support
| Browser | Operating System | Features |
| ------------- |------------- |--------------------- |
| Google Chrome | Windows + macOS + Ubuntu + Android | audio + video + screen |
| Firefox | Windows + macOS + Ubuntu + Android | audio + video + screen |
| Opera | Windows + macOS + Ubuntu + Android | audio + video + screen |
| Edge (new) | Windows (7 or 8 or 10) and MacOSX | audio + video + screen |
| Safari | macOS + iOS (iPhone/iPad) | audio + video |
## Codecs Support
| Browser | Video | Audio |
| ------------- |------------- |------------- |
| Chrome | VP8, VP9, H264, MKV | OPUS/VORBIS, PCM |
| Opera | VP8, VP9, H264, MKV | OPUS/VORBIS, PCM |
| Firefox | VP8, H264 | OPUS/VORBIS, PCM |
| Safari | VP8 | OPUS/VORBIS, PCM |
| Edge (new) | VP8, VP9, H264, MKV | OPUS/VORBIS, PCM |
## CDN
```html
<!-- recommended -->
<script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>
<!-- use 5.6.2 or any other version on cdnjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/RecordRTC/5.6.2/RecordRTC.js"></script>
<!-- NPM i.e. "npm install recordrtc" -->
<script src="node_modules/recordrtc/RecordRTC.js"></script>
<!-- bower -->
<script src="bower_components/recordrtc/RecordRTC.js"></script>
```
## Configuration
```javascript
const recorder = RecordRTC(stream, {
// audio, video, canvas, gif
type: 'video',
// audio/webm
// audio/webm;codecs=pcm
// video/mp4
// video/webm;codecs=vp9
// video/webm;codecs=vp8
// video/webm;codecs=h264
// video/x-matroska;codecs=avc1
// video/mpeg -- NOT supported by any browser, yet
// audio/wav
// audio/ogg -- ONLY Firefox
// demo: simple-demos/isTypeSupported.html
mimeType: 'video/webm',
// MediaStreamRecorder, StereoAudioRecorder, WebAssemblyRecorder
// CanvasRecorder, GifRecorder, WhammyRecorder
recorderType: MediaStreamRecorder,
// disable logs
disableLogs: true,
// get intervals based blobs
// value in milliseconds
timeSlice: 1000,
// requires timeSlice above
// returns blob via callback function
ondataavailable: function(blob) {},
// auto stop recording if camera stops
checkForInactiveTracks: false,
// requires timeSlice above
onTimeStamp: function(timestamp) {},
// both for audio and video tracks
bitsPerSecond: 128000,
// only for audio track
// ignored when codecs=pcm
audioBitsPerSecond: 128000,
// only for video track
videoBitsPerSecond: 128000,
// used by CanvasRecorder and WhammyRecorder
// it is kind of a "frameRate"
frameInterval: 90,
// if you are recording multiple streams into single file
// this helps you see what is being recorded
previewStream: function(stream) {},
// used by CanvasRecorder and WhammyRecorder
// you can pass {width:640, height: 480} as well
video: HTMLVideoElement,
// used by CanvasRecorder and WhammyRecorder
canvas: {
width: 640,
height: 480
},
// used by StereoAudioRecorder
// the range 22050 to 96000.
sampleRate: 96000,
// used by StereoAudioRecorder
// the range 22050 to 96000.
// let us force 16khz recording:
desiredSampRate: 16000,
// used by StereoAudioRecorder
// Legal values are (256, 512, 1024, 2048, 4096, 8192, 16384).
bufferSize: 16384,
// used by StereoAudioRecorder
// 1 or 2
numberOfAudioChannels: 2,
// used by WebAssemblyRecorder
frameRate: 30,
// used by WebAssemblyRecorder
bitrate: 128000,
// used by MultiStreamRecorder - to access HTMLCanvasElement
elementClass: 'multi-streams-mixer'
});
```
## MediaStream parameter
MediaStream parameter accepts following values:
```javascript
let recorder = RecordRTC(MediaStream || HTMLCanvasElement || HTMLVideoElement || HTMLElement, {});
```
## API
```javascript
RecordRTC.prototype = {
// start the recording
startRecording: function() {},
// stop the recording
// getBlob inside callback function
stopRecording: function(blobURL) {},
// pause the recording
pauseRecording: function() {},
// resume the recording
resumeRecording: function() {},
// auto stop recording after specific duration
setRecordingDuration: function() {},
// reset recorder states and remove the data
reset: function() {},
// invoke save as dialog
save: function(fileName) {},
// returns recorded Blob
getBlob: function() {},
// returns Blob-URL
toURL: function() {},
// returns Data-URL
getDataURL: function(dataURL) {},
// returns internal recorder
getInternalRecorder: function() {},
// initialize the recorder [deprecated]
initRecorder: function() {},
// fired if recorder's state changes
onStateChanged: function(state) {},
// write recorded blob into indexed-db storage
writeToDisk: function(audio: Blob, video: Blob, gif: Blob) {},
// get recorded blob from indexded-db storage
getFromDisk: function(dataURL, type) {},
// [deprecated]
setAdvertisementArray: function([webp1, webp2]) {},
// [deprecated] clear recorded data
clearRecordedData: function() {},
// clear memory; clear everything
destroy: function() {},
// get recorder's state
getState: function() {},
// [readonly] property: recorder's state
state: string,
// recorded blob [readonly] property
blob: Blob,
// [readonly] array buffer; useful only for StereoAudioRecorder
buffer: ArrayBuffer,
// RecordRTC version [readonly]
version: string,
// [readonly] useful only for StereoAudioRecorder
bufferSize: integer,
// [readonly] useful only for StereoAudioRecorder
sampleRate: integer
}
```
Please check documentation here: [https://recordrtc.org/](https://recordrtc.org/)
## Global APIs
```javascript
// "bytesToSize" returns human-readable size (in MB or GB)
let size = bytesToSize(recorder.getBlob().size);
// to fix video seeking issues
getSeekableBlob(recorder.getBlob(), function(seekableBlob) {
invokeSaveAsDialog(seekableBlob);
});
// this function invokes save-as dialog
invokeSaveAsDialog(recorder.getBlob(), 'video.webm');
// use these global variables to detect browser
let browserInfo = {isSafari, isChrome, isFirefox, isEdge, isOpera};
// use this to store blobs into IndexedDB storage
DiskStorage = {
init: function() {},
Fetch: function({audioBlob: Blob, videoBlob: Blob, gifBlob: Blob}) {},
Store: function({audioBlob: Blob, videoBlob: Blob, gifBlob: Blob}) {},
onError: function() {},
dataStoreName: function() {}
};
```
## How to fix echo issues?
1. Set `<video>.muted=true` and `<video>.volume=0`
2. Pass `audio: {echoCancellation:true}` on getUserMedia
## Wiki
* [https://github.com/muaz-khan/RecordRTC/wiki](https://github.com/muaz-khan/RecordRTC/wiki)
## Releases
* [https://github.com/muaz-khan/RecordRTC/releases](https://github.com/muaz-khan/RecordRTC/releases)
## Unit Tests
* [https://travis-ci.org/muaz-khan/RecordRTC](https://travis-ci.org/muaz-khan/RecordRTC)
## Issues/Questions?
* Github: [https://github.com/muaz-khan/RecordRTC/issues](https://github.com/muaz-khan/RecordRTC/issues)
* Disqus: [https://www.webrtc-experiment.com/RecordRTC/#ask](https://www.webrtc-experiment.com/RecordRTC/#ask)
* Stackoverflow: [http://stackoverflow.com/questions/tagged/recordrtc](http://stackoverflow.com/questions/tagged/recordrtc)
* Email: `muazkh => gmail`
## Credits
| Library | Usage |
| ------------- |------------|
| [Recorderjs](https://github.com/mattdiamond/Recorderjs) | StereoAudioRecorder |
| [webm-wasm](https://github.com/GoogleChromeLabs/webm-wasm) | WebAssemblyRecorder |
| [jsGif](https://github.com/antimatter15/jsgif) | GifRecorder |
| [whammy](https://github.com/antimatter15/whammy) | WhammyRecorder |
## Spec & Reference
1. [MediaRecorder API](https://w3c.github.io/mediacapture-record/MediaRecorder.html)
2. [Web Audio API](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html)
3. [Canvas2D](http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/)
4. [Media Capture and Streams](http://www.w3.org/TR/mediacapture-streams/)
## Who is using RecordRTC?
| Framework | Github | Article |
| ------------- |------------- |------------- |
| Angular2 | [github](https://github.com/ShankarSumanth/Angular2-RecordRTC) | [article](https://medium.com/@SumanthShankar/integrate-recordrtc-with-angular-2-typescript-942c9c4ca93f#.7x5yf2nr5) |
| React.js | [github](https://github.com/szwang/recordrtc-react) | [article](http://suzannewang.com/recordrtc/) |
| Video.js | [github](https://github.com/collab-project/videojs-record) | None |
| Meteor | [github](https://github.com/launchbricklabs/recordrtc-meteor-demo) | None |
## License
[RecordRTC.js](https://github.com/muaz-khan/RecordRTC) is released under [MIT license](https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE) . Copyright (c) [Muaz Khan](https://MuazKhan.com).
+6211
View File
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
+33
View File
@@ -0,0 +1,33 @@
{
"name": "recordrtc",
"version": "5.6.2",
"authors": [
{
"name": "Muaz Khan",
"email": "muazkh@gmail.com",
"homepage": "https://muazkhan.com/"
}
],
"homepage": "http://recordrtc.org",
"repository": {
"type": "git",
"url": "https://github.com/muaz-khan/RecordRTC.git"
},
"description": "RecordRTC is a JavaScript library can be used to record WebRTC audio/video media streams.",
"main": "RecordRTC.js",
"keywords": [
"webrtc",
"recordrtc",
"audio-recording",
"video-recording",
"gif-recording",
"audio/video recording"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"test",
"tests"
]
}
+2004
View File
File diff suppressed because it is too large Load Diff
+21
View File
@@ -0,0 +1,21 @@
// https://tonicdev.com/npm/recordrtc
var RecordRTC;
try {
RecordRTC = require('recordrtc');
}
catch(e) {
RecordRTC = require('./RecordRTC.js');
}
console.log('RecordRTC => ', Object.keys(RecordRTC));
var recorder = RecordRTC({}, {
type: 'video',
recorderType: RecordRTC.WhammyRecorder
});
recorder.startRecording();
process.exit()
+57
View File
@@ -0,0 +1,57 @@
{
"name": "recordrtc",
"preferGlobal": false,
"version": "5.6.2",
"author": {
"name": "Muaz Khan",
"email": "muazkh@gmail.com",
"url": "https://muazkhan.com/"
},
"description": "RecordRTC is a server-less (entire client-side) JavaScript library that can be used to record WebRTC audio/video media streams. It supports cross-browser audio/video recording.",
"scripts": {
"start": "node server.js",
"test": "./node_modules/.bin/protractor test/browserstack.config.js"
},
"main": "RecordRTC.js",
"repository": {
"type": "git",
"url": "https://github.com/muaz-khan/RecordRTC.git"
},
"keywords": [
"webrtc",
"recordrtc",
"audio-recording",
"video-recording",
"gif-recording",
"audio/video recording"
],
"analyze": false,
"license": "MIT",
"readmeFilename": "README.md",
"bugs": {
"url": "https://github.com/muaz-khan/RecordRTC/issues",
"email": "muazkh@gmail.com"
},
"homepage": "http://RecordRTC.org/",
"tonicExampleFilename": "npm-test.js",
"_id": "recordrtc@",
"_from": "recordrtc@",
"devDependencies": {
"grunt": "0.4.5",
"grunt-bump": "0.7.0",
"grunt-cli": "0.1.13",
"grunt-contrib-clean": "0.6.0",
"grunt-contrib-concat": "0.5.1",
"grunt-contrib-copy": "0.8.2",
"grunt-contrib-jshint": "0.11.3",
"grunt-contrib-uglify": "0.11.0",
"grunt-contrib-watch": "1.1.0",
"grunt-jsbeautifier": "0.2.10",
"grunt-replace": "0.11.0",
"load-grunt-tasks": "3.4.0",
"terser-webpack-plugin": "^4.1.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"dependencies": {}
}