Coder Social home page Coder Social logo

muaz-khan / recordrtc Goto Github PK

View Code? Open in Web Editor NEW
6.4K 176.0 1.7K 6.68 MB

RecordRTC is WebRTC JavaScript library for audio/video as well as screen activity recording. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac and Windows.

Home Page: https://www.webrtc-experiment.com/RecordRTC/

License: MIT License

HTML 36.64% JavaScript 62.20% PHP 0.68% C# 0.29% CSS 0.18% ASP.NET 0.01%
recordrtc record-audio record-video mediarecorder mediarecorder-api mediastreamrecorder webrtc-recording record-screen webrtc

recordrtc's People

Contributors

alex-sokolov avatar andersdjohnson avatar andreasehret avatar bradyisom avatar brianpursley avatar fzngagan avatar hovsep avatar jackbravo avatar jafarakhondali avatar jeffgammon avatar jimlowrey avatar jmlacroix avatar jonklein avatar kolorafa avatar lmm-git avatar marclaporte avatar melonmanchan avatar muaz-khan avatar pangwa avatar pattyland avatar rainshen49 avatar robinnorth avatar samuelweckstrom avatar shelnutt2 avatar shivamaroracnx avatar stijnvanderpol avatar stoneman1 avatar thijstriemstra avatar tongdada avatar ypt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

recordrtc's Issues

Web page crash on post recorded data to server.

I use this example to post audio and video data: https://github.com/muaz-khan/RecordRTC/blob/master/RecordRTC-to-Nodejs/static/index.html

Everything is OK with 1 - 2 min video&audio.

But when I try to post a ~5 min video&audio with 1280x720 resolution my Chrome page crashes..

Most likely root cause is a very-very long string in post request object? contents: audio.dataURL

started recording video stream.
canvas resolutions 1280 * 720
video width/height 1280 * 720
started recording audio stream.
sample-rate 44100
buffer-size 16384
Stopped recording video stream.
stopRecording... blob:http%3A//185.22.62.47%3A8080/8471dd12-0013-4881-902b-f7fb9aa2faf7
Stopped recording audio stream.
stopRecording A... blob:http%3A//185.22.62.47%3A8080/4db81dba-b17d-462e-9d8a-e0f922edef58
audio/wav -> 52.9 MB
video/webm -> 104 MB

unable to upload large file size to server using the following javascript and asp code

I have tried uploading recorded web page session of 30 minutes to the server in the form of blob and save it as .mp4 file on the server location but the file is not the file which is recorded its a corrupted file, I am using the following asp.net and javascript code

document.getElementById('stop').onclick = function() {
    recorder.stop(function(blob) {
        var recordedBlob = blob;
        uploadToServer(recordedBlob);
    });
};

function uploadToServer(blob) {
    var formData = new FormData();
    var filetype = 'video';
    var fileName = "recording" + Math.random(0, 1) + ".mp4";

    formData.append(filetype + '-filename', fileName);
    formData.append(filetype + '-blob', blob);

    xhreq('Home/PostRecordedAudioVideo', formData, function(fName) {
        window.open(fName);
    });
}

function xhreq(url, data, callback) {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200) {
            alert("request steady State");
        }
    };
    request.open('POST', url);
    request.send(data);
}

ASP.net:

[HttpPost]
public ActionResult PostRecordedAudioVideo() {
    try {
        foreach(string upload in Request.Files) {
            var path = AppDomain.CurrentDomain.BaseDirectory + "uploads\\";
            var file = Request.Files[upload];
            if (file == null)
                continue;
            file.SaveAs(Path.Combine(path, Request.Form[0]));
        }
    } catch (Exception) {

    }
    return Json((Request.Form[0]));;
}

In Chrome, video recording eventually starts staggering/faltering after doing one or more longer recordings

When recording a video in Chrome (46.0.2490.71), the end result starts out with a smooth frame rate, but eventually it will start to stagger/falter. I have reproduced this on this RecordRTC demo site:
https://www.webrtc-experiment.com/RecordRTC/

Reproduction scenarios I have used:
1)

  • Start a new Chrome browser
  • Record 10 min, watch the recording (with or without seeking), recording is fine
  • Record another 5 min, watch the recording (with or without seeking), recording will start to stagger/falter after 1-3 min.
  • Start a new Chrome browser
  • Record 5 min, watch the recording (with or without seeking), recording is fine
  • Record another 5 minutes, watch the recording (with or without seeking), recording is fine
  • Record another 5 minutes, watch the recording (with or without seeking), recording will start to stagger/falter after 1-3 min.

So it seems to have something to do with the total time you are recording in Chrome, but it doesn't seem to be a constant number of minutes. It is also likely that it varies across different client machines (?)

Problem converting ogg to mp3

Hi , i used RecordRTC and implemented with angular js, audio recording is working fine in mozila and recorded blob type is ogg, so i saving file in server in ogg format. but i need it inmp3 format as we have to support in different phone os. So i further converting using ffmpeg (exec('/usr/bin/ffmpeg -i /var/www/dtswork/bluejaypt/us/bjaypt/uploads/index.ogg -acodec libmp3lame /var/www/dtswork/bluejaypt/us/bjaypt/uploads/index.mp3 2>&1')) using above command but its giving "/var/www/dtswork/bluejaypt/us/bjaypt/uploads/index.ogg: End of file"

Please help its urgent

Error while recording screen

Whenever I try to record screen, it says "Multi-capturing of screen is not allowed. Capturing process is denied. Are you enabled flag: "Enable screen capture support in getUserMedia"?"
Could you please help me figure out if I am missing anything?

How to difine audio type in MRecordRTC

Currently i try to Audio Recording using MRecordRTC. I found one problem that when i record a audio in chrome it return blob with wav format. And when i record using same code in fire fox it return blob with ogg format. I need a one fix type either wav or ogg.

is this possible using MRecordRTC?

Recording small clips; no callback fired

When I record really small clips (< 3 seconds) the stopRecording callback isn't fired. Tested on OSX Firefox 41.0.1 (audio-only and video-only). Is this expected? Can I change this?

recording audio only works the first time, any subsequent recordings are 44bytes

I'm using RecordRTC to record audio. This works fine, at least the first time. Any subsequent recordings (without reloading the browser) result in a 44 bytes wav file ("audio/wav -> 44.0 Bytes"). I'm only using RecordRTC in Chrome btw.

The version from "Feb 12, 2015, 08:32:23" doesn't show this behaviour yet, it keeps recording just fine. But Chrome is deprecating some event this version is using, so updating would be good.

Direct record

Hello dear,

Can i record stream from live url like rtmp, hsl or any kind of live???

if yes can you show me how??? by the way, is there any place a donation can take place?

Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL'

I am using RecordRTC for recording video on chrome and recording files are webm and wav.
When I do stop recording I am not able to stop recording and getting error as below:

RecordRTC.js:1169 Something went wrong. Maybe WebP format is not supported in the current browser.
RecordRTC.js:109 Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

Please suggest what is happening here, and why such error is occurring ?

CanvasRecording doesn't work on firefox

@muaz-khan
On using CanvasRecording in firefox , When I click start recording it throws an error in console like "The UA cannot provide the codec or recording option that has been requested".
This occurs on creating a new MediaRecorder, where the stream is of "CanvasCaptureMediaStream "
Could you suggest me a solution??

P.S : I enabled the value to true for 'canvas.capturestream.enabled' in about:config. So that's not a problem.

RecordRTC Audio into Ogg Chrome

Hi !

First thanks a lot for all the work done.

When I use RecordRTC demo in Chrome (v 43.0.2357.81 - 64bits) with Audio into OGG selected, the downloaded file is in WAV format.

Is that normal ? Is it possible to record audio in OGG with Chrome ?

I tried to set the options like this :

var options = {
    mimeType : 'audio/ogg',
    bitsPerSecond: 128000
};

But this is not working...

Regards

startRecording error using Edge

Hello. I've used this library in my own small project and with the demos. I get firefox and chrome to work successfully, but have issues doing recording in edge. The last version of edge I tried is 20.10240.16384. It seems to have the problem when stopping the recording. It may not start correctly, and hence why I'm getting this error.

I see this error in my console:

It seems that "startRecording" is not invoked for audio recorder
RecordRTC.js (147,13)

If RecordRTC called from an iframe it doesn't records the full screen

In order to understand, I have a site and inside of it there is an iframe that loads the RecordRTC file and plays a video. From the iframe I am able to get a reference to the body tag of the outer div. So lets say:

  <div id="container">
    <iframe> 
       <!-- Here are loaded the JS files that record the webpage using RecordRTC -->

So basically from the iframe I get a reference to body, and pass it to the builder RecordRTC(stream, options). It records the page but it doesn't records what is inside the iframe tag. Also, it doesn't record the mouse movement.

Original site (the video element is part of the iframe):
captura de tela 2015-03-25 as 04 07 45 pm

Resulting video:
captura de tela 2015-03-25 as 04 07 55 pm

Error in version 5.1.0

TypeError: Storage.AudioContext is not a constructor
I have the following error in Firefox, any ideas?

StereoAudioRecorder doesn't actually fully disconnect

While leveraging RecordRTC in Chrome, I stumbled on the fact that the script node does not actually stop firing when "stopRecording()" is fired on the RecordRTC instance.

I'm not sure if this is the correct fix, but testing locally revealed that modifying the StereoAudioRecorder's stop function to also disconnect the __stereoAudioRecorderJavacriptNode instance resolved the problem.

this.stop = function(callback) {
...
    // to make sure onaudioprocess stops firing
    audioInput.disconnect();
    __stereoAudioRecorderJavacriptNode.disconnect(); // New line
...
}

Basically, without this, it seems that the __stereoAudioRecorderJavacriptNode.onaudioprocess keeps firing, with the "recording" flag set to true, resulting in the following being called over and over, without end.

__stereoAudioRecorderJavacriptNode.onaudioprocess = function (e) {
...
    if (!recording) {
        audioInput.disconnect();
        return;
    }
...
}

Also, when performing multiple recordings, some recordings ended up with a blob that only contained the 44 header bytes (and no data). Haven't been able to prove it, but my running theory is that due to having multiple script nodes actively firing, the data was never processed properly by the desired script node. Haven't been able to reproduce this after introducing this fix locally.

Trouble saving long videos

We've had great success running RecordRTC in a NW.js app (formerly node-webkit).

We're having an issue, however, with longer recordings. In our app, since we have a node.js context via NW.js, we're doing something like this to write the recording to a file (simplified for readability):

videoRTC.stopRecording(function(url) {
  var blob = videoRTC.getBlob();
  var fs = require('fs');
  var reader = new FileReader();

  reader.addEventListener('loadend', function() {
    fs.writeFile('/scratch/video.webm', reader.result, function() {});
  })

  reader.readAsArrayBuffer(blob);
});

When we record a video less than 9 minutes, this all works fine. In the loadend callback on reader, we get a proper ArrayBuffer object in reader.result with a normal byteLength and we can write that file to disk just fine.

However, after about 9 minutes of recording, in the loadend callback, reader.result does not exist, and reader.error gives us:

{ 
  error: FileError,
  code: 1,
  message: "A requested file or directory could not be found at the time an operation was processed."name: "NotFoundError"
}

Before calling reader.readAsArrayBuffer(blob), blob.size does show a file size, usually around 100mb, so I think there's data in there. The problem seems to be when we read that out into binary data to be saved to a file.

We had various other strange behavior reading the data out of the blob in total and in slices, but this has been the most consistent, concrete error.

Anyone else encountering this?

stopRecording not calling callback

I'm using RecordRTC as the example, however, the stopRecording function is not calling the callback function.

The following messages are displaying:

initializing video stream recorder message
started recording video stream.
Stopped recording video stream.

But that's all. I'm using TweenMax and I get the following warning when I load RecordRTC:

'webkitRequestAnimationFrame' is vendor-specific. Please use the standard 'requestAnimationFrame' instead.

Hope that helps.

RecordRTC File Size and Tracking Problems for asp.net MVC 5 app

I am building an application for ASP.Net MVC 5, in which I need to record a live video and audio stream from the webcam/microphone. I have decided to use your web app based solution, RecordRTC. I have used the demo from, your github as a starting point, and modified it for my specifications.

The problem I am having is that I am unable to determine how to reduce the size of the webm that is being created. Right now it is about 1.7MB a second, my goal is for it to be 4-10MB a minute.

Also the file that is created from this does not possess time metadata, meaning I cannot use the seek-bar to go to a specific time. i.e. it says 3 secs have elapsed 0 remain, and still runs.

Any help would be appreciated.

NOTE: I am aware that support for the below code will only work in Firefox. I will simply wait for Chrome to add support, and therefore have removed the workaround you have in the demo for Chrome..


< script >
  //script 1
  document.createElement('article')< /script>


<script>
//script 2
        function PostBlob(blob, fileType, fileName) {
            / / FormData
var formData = new FormData();
formData.append(fileType + '-filename', fileName);
formData.append(fileType + '-blob', blob);

// progress-bar
var hr = document.createElement('hr');
container.appendChild(hr);
var strong = document.createElement('strong');
strong.id = 'percentage';
strong.innerHTML = fileType + ' upload progress: ';
container.appendChild(strong);
var progress = document.createElement('progress');
container.appendChild(progress);

// POST the Blob using XHR2
xhr('/Video/PostRecordedAudioVideo', formData, progress, percentage, function(fName) {
  container.appendChild(document.createElement('hr'));
  var mediaElement = document.createElement(fileType);

  var source = document.createElement('source');
  source.src = location.href + 'Files/' + fName.replace(/"/g, '');

  if (fileType == 'video') source.type = 'video/webm; codecs="vp8, vorbis"';
  if (fileType == 'audio') source.type = 'audio/ogg';

  mediaElement.appendChild(source);

  mediaElement.controls = true;
  container.appendChild(mediaElement);
  mediaElement.play();

  progress.parentNode.removeChild(progress);
  strong.parentNode.removeChild(strong);
  hr.parentNode.removeChild(hr);
});
}

var record = document.getElementById('record');
var stop = document.getElementById('stop');

var audio = document.querySelector('audio');

var recordVideo = document.getElementById('record-video');
var preview = document.getElementById('preview');

var container = document.getElementById('container');

var recordAudio, recordVideo;
record.onclick = function() {
  record.disabled = true;
  navigator.getUserMedia({
    audio: {
      mandatory: {
        googEchoCancellation: false,
        googAutoGainControl: false,
        googNoiseSuppression: false,
        googHighpassFilter: false,
        sampleRate: true
      },
      optional: []
    },
    video: true
  }, function(stream) {
    preview.src = window.URL.createObjectURL(stream);
    preview.play();

    //var legalBufferValues = [256, 512, 1024, 2048, 4096, 8192, 16384];
    // sample-rates in at least the range 22050 to 96000.
    recordAudio = RecordRTC(stream, {
      onAudioProcessStarted: function() {}
    });
    recordAudio.startRecording();

    stop.disabled = false;
  }, function(error) {
    alert(JSON.stringify(error, null, '\t'));
  });
};

var fileName;
stop.onclick = function() {
  record.disabled = false;
  stop.disabled = true;

  preview.src = '';

  fileName = Math.round(Math.random() * 99999999) + 99999999 + ".webm";

  recordAudio.stopRecording(function(url) {
    preview.src = url;
    PostBlob(blob, 'video', fileName);
  });
};

function xhr(url, data, progress, percentage, callback) {
  var request = new XMLHttpRequest();
  request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200) {
      callback(request.responseText);
    }
  };

  if (url.indexOf('/Video/DeleteFile') == -1) {
    request.upload.onloadstart = function() {
      percentage.innerHTML = 'Upload started...';
    };

    request.upload.onprogress = function(event) {
      progress.max = event.total;
      progress.value = event.loaded;
      percentage.innerHTML = 'Upload Progress ' + Math.round(event.loaded / event.total * 100) + "%";
    };

    request.upload.onload = function() {
      percentage.innerHTML = 'Saved!';
    };
  }

  request.open('POST', url);
  request.send(data);
}; < /script>

<!-- language: lang-html -->

@{ ViewBag.Title = "Video Record"; }
<--Script 1 goes here-->
<!-- script used for audio/video/gif recording -->
@Scripts.Render("~/bundles/RTCRecording")
<article>
  <section class="experiment">
    <p style="text-align:center;">
      <video id="preview" controls style="border: 1px solid rgb(15, 158, 238);"></video>
    </p>
    <hr />
    <button id="record">Record</button>
    <button id="stop" disabled>Stop</button>
    <div id="container" style="padding:1em 2em;"></div>
  </section>
  <--Script 2 goes here-->
</article>

createObjectURL TypeError while save Video in Chrome

I am getting error in console as "Something went wrong. Maybe WebP format is not supported in the current browser". I am using chrome browser for my testing.
which recorder is used for Chrome. Is the recorder is Whammy recorder ?
Inside RecordRTC.js I added console.log lines at function 'stopRecording'. I received below messages in my console.

RecordRTC.js:94 - stopped recording audio stream.
RecordRTC.js:109 - blob: {"type":"audio/wav","size":5537836}
RecordRTC.js:112 - createObjectURLblob:https%3A//dev.phonon.in/4babbb9f-ecac-4c87-bda8-d79226ee62a0
RecordRTC.js:94 - stopped recording video stream.
RecordRTC.js:1176 - Something went wrong. Maybe WebP format is not supported in the current
RecordRTC.js:109 - blob: []
RecordRTC.js:111 - Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided

Here I am getting blob as blank.
Please suggest how to debug the issue and find the resolution.

navigator is undefined error

I get an error navigator is undefined in 5.2.0 and 5.1.x at this line

var isEdge = navigator.userAgent.indexOf('Edge') !== -1 && (!!navigator.msSaveBlob || !!navigator.msSaveOrOpenBlob);

In particular, 5.1.0 works.

InvalidCharacterError and Stream does not contain audio track

Hi Muaz

I am trying to record a video+audio stream with Node.js on Firefox, but it doesn't seem to work. I have two problems:

  1. When I try to use "new RecortRTC" with config.type="audio", I get the error "your stream does not contain audio track", even though I allow Firefox to have access to my microphone.
    Here is my console log:
"Asking recording" cVEtGxq6EQ:1869:5
"Starting recording for room cVEtGxq6EQ!" cVEtGxq6EQ:1749:4
"started recording audio stream." RecordRTC.js:92:13
uncaught exception: Your stream has no audio tracks. <inconnu>
  1. I managed to get past this first error by setting config.type="video", but then I get a second error. As soon as I try to use ".stopRecording", Firefow throws the error ": InvalidCharacterError: String contains an invalid character". Sometimes this error is replaced by "TypeError: riff.RIFF is undefined".
    Once again, my console log:
"Asking recording" cVEtGxq6EQ:1869:5
"Starting recording for room cVEtGxq6EQ!" cVEtGxq6EQ:1749:4
"started recording video stream." RecordRTC.js:92:13
"canvas resolutions" 320 "*" 240 RecordRTC.js:2053:13
"video width/height" 320 "*" 240 RecordRTC.js:2054:13
"Asking to stop recording" cVEtGxq6EQ:1875:5
"stopRecord" cVEtGxq6EQ:1805:4
"TRACE 1/2" cVEtGxq6EQ:1810:5
"Stopped recording video stream." RecordRTC.js:169:13
: InvalidCharacterError: String contains an invalid character

Finally, here is the code I use:

socket.on("startRecord", function(data)
        {
            console.log("Starting recording for room " + data.webconf_key + "!");
            if(isFirefox)
            {
                navigator.getUserMedia = navigator.mozGetUserMedia;
                navigator.getUserMedia({
                    audio: true,
                    video: true
                }, function(stream) {
                    recordVideo = window.RecordRTC(stream, {
                                type: "audio" //changed to "video" on 2.
                    });
                    recordVideo.startRecording();
                }, function(error) {
                    console.error(error);
                });
            }
            else //is isChrome
            {
                //[...]
            }
        });
        socket.on("stopRecord", function(data)
        {
            console.log("stopRecord");

            if(isFirefox)
            {
                console.log("TRACE 1/2");
                recordVideo.stopRecording(function() {
                    console.log("TRACE 2/2");
                    console.log(window.recordVideo.getBlob());
                });
            }
            else
            {
                //[...]
            }
        });

Also, I am using RecordRTC.js updated at August 23, 2015, 08:32:23

Minifying results to an error

Uncaught SyntaxError: Unexpected token ( 42caddd6-cca5-4e7e-b6c3-f4aeb2badb91:1

Code inside:
function (a){postMessage((new FileReaderSync).readAsDataURL(a))}this.onmessage = function (e) {readFile(e.data);}

Using latest from master.

Clear() method seems to be missing

I want to clear the recorded blob object after some interval so I can upload chuck of blob to server, and record another chunk of blob instead of posting completed large file.

While recording, after 2 min of video I am getting array memory out of exception. So to solve that I thought to record the video in chunks and upload that to server in real time and merge that again at server using FFMPEG. So that save blob chunk, I need Clear() method as similar in RecordJs clear() method. I tried to add this method into RecordRTC library byt setting blob to null but it not solve the issue.

Please help to solve this !

How to reduce the size of audio files?

When I record audio by Chrome, the file's size if too big, 1 seconds is about 200 KB around.
I want to know, is there any config to make the file's size smaller?

by the way, I use this lib to achieve voice chat. I do not need the high quality audio.

Any suggestion would help me, thanks in advance.

Audio gets distorted on video resizing

I am using the RecordRTC-to-Nodejs example to record a testimonial video from my application.
The default setup records the videos very fine, but I need them in a bigger size instead of 320x240.
ie: 1920x1080 or 1280x720.

The audio gets distorted (like a robot) when I change the video config to:

var videoConfig = {
     type: 'video',
     recorderType: WhammyRecorder,
     width: 1280,
     height: 720
};

Is there anything I am missing?

Google Chrome Version 45.0.2454.85 (64-bit) on Mac Yosemite OSX

Example doesn't sync audio + video with ffmpeg.exe

Hi,

I am testing the project in a Windows environment with latest ffmpeg (ffmpeg-20151008-git-5911eeb-win64-static) but in local, I noticed that audio has some delay when ffmpeg mix audio & video.

Any idea?

Video recording dropping all frames in Chrome

The issue is around line 2586 of RecordRTC.js in the dropBlackFrames function:

var image = new Image();
image.src = _frames[f].image;
context2d.drawImage(image, 0, 0, canvas.width, canvas.height);

The problem is that the image is not guaranteed to be loaded immediately after setting the src attribute, even though it is a data URL (http://stackoverflow.com/a/4807114/591310). If I put some logging around this code, image.complete is false in many, but not all, of my tests. This causes the entire image to be black and all frames to be dropped from the resulting video file except the first one.

The sample pages do not have this issue, nor does a simple test page that I wrote. However, when I integrate the library into my AngularJS application, it shows up. So, it could be a timing issue, or only show up when the page is more complex.

I am totally willing to put together a PR that fixes this issue. There are a couple of ways that it could be fixed and I wanted feedback before building the PR.

  1. I could rewrite dropBlackFrames to use the onload event of the image element to ensure that the image is loaded before drawing it to the canvas. Since this would change the function to be asynchronous, I would have to add a callback method to the parameters.
  2. I could just add a configuration option to not attempt to drop black frames. That would be a simple fix and get my code working.

Are there other solutions? Or, which of these would you prefer?

Webm Firefox video audio is chopped

Hi,

When I use Firefox to record webcam and audio stream everything is perfect as long as I stay in the Navigator (video plays through

Is it due to the encoding library ? Any other Idea ?

Thanks

set record time

Hi,

how to set video record time. i want record 15 second video only. i use PHP and ffmpeg audio/video example.

Recording fails silently if the microphone is removed. (Chrome and Firefox)

Hey Muaz, Great work! RecordRTC is a great library which works seamlessly across browsers for recording audio.

There is an important case as listed.

  1. We click "Allow" when the browser prompts us for microphone access.
  2. Audio recording works fine, except until it fails silently when the microphone is removed either while recording is in progress, or after recording is stopped and we try to record again.

Web Page session not recording for more than 15 minutes

I am able to save 15 mints recorded web page session onto the server but if this increases to 17 minutes or higher the file received on the server of size 0 kb. I have debug the script and what I have found is that the frames that are obtained contains the images and the images are not corrupted but when these images are encoded to video it is where all issue arise. I have recorded 28 minutes webpage session and when debug, found that the frame array contains 87000 base 64 image elements which means I am obtaining the images but not the video. How can I fix it. Below is the modified code upon your suggestion.

<system.web>

โ€ฆ

    <httpRuntime maxRequestLength="1048576" executionTimeout="3600" />

</system.web>

<system.webServer>

  <requestFiltering>
     <requestLimits maxAllowedContentLength="1048576000" />

  </requestFiltering>

</system.webServer>

setRecordDuration problem

Hello,

I am trying to build a video recording app that which must support pausing / resuming the video recording and also must be limited to 15 seconds of recording time in total.

The problem is that when I set the setRecordDuration to (15 * 1000) it invokes onRecordingStopped callback even if I did pause the recording at the first sec.

Shouldn't it has to be invoked when total recorded duration got to 15 secs?

RecordRTC-over-Socketio problem

Hi Muaz,

I'm trying to test this demo project but can't get it work.
npm install recordrtc-socketio seems to work
node ./node_modules/recordrtc-socketio/server.js tell me that sys is depcrecated. Use util instead. but nothing else.

Then I open http://localhost/patrick/webrtcSocketIO/node_modules/recordrtc-socketio/index.html and get 2 errors :

  • RecordRTC.js:1191:5 TypeError: setting a property that has only a getter I don't know if this one matters
  • recordrtc-socketio:78:17 ReferenceError: io is not defined I think this one is the real problem

I'm totally new to NodeJs... Any help ?
Thanks

large video files are not recording on to the sever.

I am recording video on client side then save it to the sever, I have used your recordRTC to ASP.Net MVC solution and I got success in doing so, but the problem is that when the recorded video exceeds the 3MB size of file it started throwing error and does not save file on the server. The errors are like

RangeError: Maximum call stack size exceeds
Failed to execute createObjectURL no function was found that matched the signature problems

I am using your posted code which is as follow

In Home Controller:

[HttpPost]
public ActionResult PostRecordedAudioVideo() {
    try {

        foreach(string upload in Request.Files) {
            var path = AppDomain.CurrentDomain.BaseDirectory + "uploads\\";
            var file = Request.Files[upload];
            if (file == null)
                continue;
            file.SaveAs(Path.Combine(path, Request.Form[0]));
        }

    } catch (Exception) {

    }
    return Json((Request.Form[0]));
}

Javascript Code:

function UploadToServer(blob) {
    var fileType = 'video';
    var fileName = Math.random(0, 5) + '.webm';
    var formData = new FormData();
    formData.append(fileType + '-filename', fileName);
    formData.append(fileType + '-blob', blob);

    xhr('@Url.Action("PostRecordedAudioVideo","Home")', formData, function(fName) {
        window.open(location.href + 'uploads/' + fName);
    });
}

function xhr(url, data, callback) {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200) {
            callback(location.href + request.responseText);
        }
    };
    request.open('POST', url);
    request.send(data);
}

Is there something I need to add more into the code, if it is already answered please give me the link as I am unable to find help , Keep up the good work and Thanks in advance

I want to record my Peer to Peer video meeting

Hello Sir,

I have developed from your code peer to peer video meeting using WebRTC. Now i want to record that peer to peer meeting session. Can you Please help me how to record peer to peer video meeting session.

Thanks in Advance...

video and webpage session recording related queries

I am using RecordRTC.js for recording video using webcam and recording web page session, I have some queries related
to each features.

Video recording using webcam:

Query
#1)I am saving the recorded video to the local server using your https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-ASPNETMVC

code which is working fine in chrome and opera browsers but not working in firefox as when form data is sent to the server the requested form does not contain
files so is not save on the server. Is it a known issue? what could be the work around for this issue.?
#2)Is there any way around that i can record video also in intenet explorer and safari?

WebPage Session Recording:
#1)I am recording webpage session as video on my local server using RecordRTC.js working fine for chrome but not working for firefox 33.1 and internet explorer 10.0

.I know that IE and firefox doesnot support webp format , is there any way i can encode blob url into the jpeg format and then into mp4 format?

#2) Using the script also slowing down the user experience.What is the reason?
#3) Can I increase the frame rate of the control?

setRecordDuration problem

Well, thank you for the fast update.

I have updated the new commit but now there's another issue occured.

I set the max duration time to 15 * 1000 but now it stops at 7th second. I changed time to 30 * 1000 it stopped at 15th second.

Thanks.

RecordRTC with PHP and ffmpeg audio/video not in sync

I have just tried to use the PHP-and-FFmpeg demo on my ubuntu server. It records the audio and video, uploads the files, but when it plays the merged video after uploading the audio and video are not in sync. It's probably more than 1 second out of sync. Can be tweaked? Or is it a issue with Chrome capturing the seperate audio and video files?

I'm using Chrome 38.0.2125.122 (64-bit) on Ubuntu 14.10 x64 to access with chrome web browser. The back end is a debian/ubuntu server with FFmpeg 2.4.3 (fetched from http://johnvansickle.com/ffmpeg/).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.