Skip to content

Commit

Permalink
Added recordrtc@5.2.6 Finally fixed #68
Browse files Browse the repository at this point in the history 
Recorded video:
https://vimeo.com/152119435
  • Loading branch information
@muaz-khan
muaz-khan committed Jan 18, 2016
1 parent 73fe379 commit 7f3a49e
Show file tree
Hide file tree
Showing 12 changed files with 290 additions and 200 deletions.
5 changes: 3 additions & 2 deletions Canvas-Recording/README.md
View file
Expand Up @@ -43,8 +43,7 @@ recorder.stopRecording(function(url) {
<script>
var canvas = document.querySelector('canvas');
var recorder = new CanvasRecorder(window.canvasElementToBeRecorded, {
disableLogs: false,
showMousePointer: true
disableLogs: false
});
// start recording <canvas> drawings
Expand All @@ -62,6 +61,8 @@ Live Demo:

* https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/record-canvas-drawings.html

Watch a video: https://vimeo.com/152119435

=

[RecordRTC](https://www.webrtc-experiment.com/RecordRTC/) is a server-less (entire client-side) JavaScript library can be used to record WebRTC audio/video media streams. It supports cross-browser audio/video recording.
Expand Down
16 changes: 4 additions & 12 deletions Canvas-Recording/canvas-designer.js
View file
Expand Up @@ -54,11 +54,11 @@
textarea = find('code-text'),
lineWidth = 5,
strokeStyle = '#6c96c8',
fillStyle = 'transparent',
fillStyle = 'white',
globalAlpha = 1,
globalCompositeOperation = 'source-over',
lineCap = 'round',
font = '15px Verdana',
font = '35px Verdana',
lineJoin = 'round';

// -------------------------------------------------------------
Expand All @@ -83,7 +83,7 @@
var context = getContext('main-canvas'),
tempContext = getContext('temp-canvas');

window.canvasElementToBeRecorded = context.canvas;
window.canvasElementToBeRecorded = tempContext.canvas;

// -------------------------------------------------------------

Expand Down Expand Up @@ -2826,13 +2826,5 @@

addEvent(document, 'keyup', onkeyup);

// -------------------------------------------------------------

// -------------------------------------------------------------
// scripts on this page directly touches DOM-elements
// removing or altering anything may cause failures in the UI event handlers
// it is used only to bring collaboration for canvas-surface
// -------------------------------------------------------------
var lastPoint = [];
var selfId = (Math.random() * 10000).toString().replace('.', '');
points[points.length] = ['rect', [0, 0, context.canvas.width, context.canvas.height, drawHelper.getOptions()]];
})();
1 change: 1 addition & 0 deletions Canvas-Recording/index.html
View file
Expand Up @@ -130,6 +130,7 @@ <h2>Welcome to <a href="https://www.webrtc-experiment.com/RecordRTC/" contentedi
<script src="https://cdn.webrtc-experiment.com/screenshot.js"></script>
<script src="https://cdn.webrtc-experiment.com/RecordRTC/Whammy.js"></script>
<script src="https://cdn.webrtc-experiment.com/RecordRTC/CanvasRecorder.js"></script>
<script src="https://cdn.webrtc-experiment.com/RecordRTC/MediaStreamRecorder.js"></script>
<script src="https://cdn.WebRTC-Experiment.com/gumadapter.js"></script>

<script>
Expand Down
59 changes: 40 additions & 19 deletions Canvas-Recording/record-canvas-drawings.html
View file
Expand Up @@ -330,11 +330,17 @@
width: 120px;
}

input[type=number] {
font-size: 13px!important;
border: 1px solid rgb(9, 159, 243);
padding: 5px 10px;
}

</style>
</head>
<body>
<section class="design-surface">
<canvas id="temp-canvas" style="opacity:0;"></canvas>
<canvas id="temp-canvas"></canvas>
<canvas id="main-canvas"></canvas>
</section>

Expand Down Expand Up @@ -501,61 +507,76 @@
<script>
var params = {
tools: JSON.stringify({
line: true,
image: true,
pencil: true,
pencil: true,
/*image: true,
line: true,
dragSingle: true,
dragMultiple: true,
eraser: true,
rectangle: true,
arc: true,
bezier: true,
quadratic: true,
text: true
text: true*/
}),
selectedIcon: 'pencil'
}
</script>
<script src="https://cdn.webrtc-experiment.com/RecordRTC/Canvas-Recording/canvas-designer.js"></script>
<script src="https://cdn.webrtc-experiment.com/RecordRTC/Whammy.js"></script>
<script src="https://cdn.webrtc-experiment.com/RecordRTC/CanvasRecorder.js"></script>
<script src="https://cdn.webrtc-experiment.com/RecordRTC/MediaStreamRecorder.js"></script>

<div class="start-top-recording" style="position: absolute;bottom: 0;right: 184px;z-index: 9;">
<span style="vertical-align:middle;">Fps: </span><input type="number" id="fps" value="10" min="0" max="1000">
<button id="start">Start Canvas Recording</button>
<button id="stop" disabled>Stop</button>
</div>

<script>
var recorder = new CanvasRecorder(window.canvasElementToBeRecorded, {
disableLogs: false,
showMousePointer: true
});
if(!!navigator.mozGetUserMedia) {
alert('This demo seems NOT supported in Firefox.');
}

var recorder;

document.getElementById('start').onclick = function() {
document.getElementById('start').disabled = true;

recorder = new CanvasRecorder(window.canvasElementToBeRecorded, {
frameInterval: document.getElementById('fps').value || 10, // 10 frames per second
disableLogs: false,
onEncodingCallback: function(framesRemaining, numberOfFrames) {
// console.log(framesRemaining, ' remaining out of ', numberOfFrames);
}
});

recorder.record();
setTimeout(function() {
document.getElementById('stop').disabled = false;
}, 1000);
};
document.getElementById('stop').onclick = function() {
this.disabled = true;
recorder.stop(function(blob) {
var video = document.createElement('video');
video.src = URL.createObjectURL(blob);
video.setAttribute('style', 'height: 100%; position: absolute; top:0; left:0;z-index:9999;width:100%;');
document.body.appendChild(video);
video.controls = true;
video.play();
});
this.disabled = true;

document.body.innerHTML = '<h1 style="font-size:30px;text-align:center;margin:15px;color:red;font-weight:normal;">Please check page title for the encoding progress.<br><br>Frames are being encoded to generate a HD smooth WebM!<br><br><small>Please never click "kill" button; otherwise the entire encoding process will be crashed.</small></h1>';

setTimeout(function() {
recorder.stop(function(blob) {
var video = document.createElement('video');
video.src = URL.createObjectURL(blob);
video.setAttribute('style', 'height: 100%; position: absolute; top:0; left:0;z-index:9999;width:100%;');
document.body.appendChild(video);
video.controls = true;
video.play();
});
}, 100);
};

window.onbeforeunload = function() {
document.getElementById('start').disabled = false;
document.getElementById('stop').disabled = true;
};
</script>

</body>
</html>
39 changes: 35 additions & 4 deletions README.md
View file
Expand Up @@ -90,8 +90,8 @@ It is suggested to link specific release:
E.g.

```html
<!-- use 5.2.4 or any other version -->
<script src="https://github.com/muaz-khan/RecordRTC/releases/download/5.2.4/RecordRTC.js"></script>
<!-- use 5.2.6 or any other version -->
<script src="https://github.com/muaz-khan/RecordRTC/releases/download/5.2.6/RecordRTC.js"></script>
```

There are some other NPM packages regarding RecordRTC:
Expand Down Expand Up @@ -254,8 +254,8 @@ recordRTC.stopRecording(function(gifURL) {
You can say it: "HTML/Canvas Recording using RecordRTC"!

```html
<script src="//cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
<script src="//cdn.webrtc-experiment.com/screenshot.js"></script>
<script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
<script src="https://cdn.webrtc-experiment.com/screenshot.js"></script>

<div id="elementToShare" style="width:100%;height:100%;background:green;"></div>
<script>
Expand All @@ -275,6 +275,37 @@ recordRTC.stopRecording(function(videoURL) {

See a demo: [/Canvas-Recording/](https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/)

## Record `<canvas>`

You can even record Canvas2D drawings:

```html
<script src="https://cdn.webrtc-experiment.com/RecordRTC/Whammy.js"></script>
<script src="https://cdn.webrtc-experiment.com/RecordRTC/CanvasRecorder.js"></script>
<canvas></canvas>
<script>
var canvas = document.querySelector('canvas');
var recorder = new CanvasRecorder(window.canvasElementToBeRecorded, {
disableLogs: false
});
// start recording <canvas> drawings
recorder.record();
// a few minutes later
recorder.stop(function(blob) {
var url = URL.createObjectURL(blob);
window.open(url);
});
</script>
```

Live Demo:

* https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/record-canvas-drawings.html

Watch a video: https://vimeo.com/152119435

# API Reference

## `initRecorder`
Expand Down

0 comments on commit 7f3a49e

Please sign in to comment.