forked from muaz-khan/RecordRTC
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvideo-mirror-recording.html
106 lines (82 loc) · 3.04 KB
/
video-mirror-recording.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<style>
html, body, video{
margin: 0!important;
padding: 0!important;
}
video {
width: 100%;
}
.grid {
text-align: center;
display: grid;
grid-gap: 10px;
grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);
}
</style>
<title>Record Video Mirror | RecordRTC</title>
<h1>Record Video Mirror</h1>
<div class="grid">
<div>
<h2>Original Camera</h2>
<video id="video-preview" controls autoplay playsinline></video>
</div>
<div>
<h2>Canvas Preview (Mirror)</h2>
<video id="canvas-preview" controls autoplay playsinline></video>
</div>
</div>
<script src="/RecordRTC.js"></script>
<script>
var videoPreview = document.getElementById('video-preview');
var canvasPreview = document.getElementById('canvas-preview');
var logoImage = document.getElementById('logo-image');
var waitImage = document.getElementById('wait-image');
navigator.mediaDevices.getUserMedia({video: true, audio: true}).then(function(camera) {
videoPreview.muted = true;
videoPreview.srcObject = camera;
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.style = 'position: absolute; top: 0; left: 0; opacity: 0; margin-top: -9999999999; margin-left: -9999999999; top: -9999999999; left: -9999999999; z-index: -1;';
document.body.appendChild(canvas);
var canvasStream = canvas.captureStream();
var audioPlusCanvasStream = new MediaStream();
getTracks(canvasStream, 'video').forEach(function(videoTrack) {
audioPlusCanvasStream.addTrack(videoTrack);
});
getTracks(camera, 'audio').forEach(function(audioTrack) {
audioPlusCanvasStream.addTrack(audioTrack);
});
var recorder = RecordRTC(audioPlusCanvasStream, {
type: 'video'
});
canvasPreview.srcObject = canvasStream;
recorder.setRecordingDuration(5 * 1000).onRecordingStopped(function() {
var blob = recorder.getBlob();
recorder = null;
camera.stop();
canvasPreview.src = canvasPreview.srcObject = null;
videoPreview.muted = false;
videoPreview.src = URL.createObjectURL(blob);
});
recorder.startRecording();
(function looper() {
if(!recorder) return; // ignore/skip on stop-recording
canvas.width = videoPreview.clientWidth;
canvas.height = videoPreview.clientHeight;
context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
context.translate(canvas.width, 0);
context.scale(-1, 1);
context.drawImage(videoPreview, 0, 0, canvas.width, canvas.height);
context.setTransform(1, 0, 0, 1, 0, 0);
context.restore();
// repeat (looper)
setTimeout(looper, 10);
})();
}).catch(function(error) {
alert('Unable to capture camera. Please check console logs.');
console.error(error);
});
</script>
<footer style="margin-top: 20px;"><small id="send-message"></small></footer>
<script src="https://www.webrtc-experiment.com/common.js"></script>