Skip to content

Commit

Permalink
Added video-seeking fixer to index.html demo.
Browse files Browse the repository at this point in the history
  • Loading branch information
muaz-khan committed Jan 20, 2019
1 parent a2a4ba0 commit cf0af4c
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 5 deletions.
49 changes: 48 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<script>window.demoVersion = '2019.01.13';</script>
<script>window.demoVersion = '2019.01.20';</script>

<!--
> Muaz Khan - www.MuazKhan.com
Expand Down Expand Up @@ -83,6 +83,9 @@
<!-- web streams API polyfill to support Firefox -->
<script src="https://unpkg.com/@mattiasbuelens/web-streams-polyfill/dist/polyfill.min.js"></script>

<!-- ../libs/DBML.js to fix video seeking issues -->
<script src="https://cdn.webrtc-experiment.com/EBML.js"></script>

<!-- for Edge/FF/Chrome/Opera/etc. getUserMedia support -->
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="https://cdn.webrtc-experiment.com/DetectRTC.js"> </script>
Expand Down Expand Up @@ -152,6 +155,11 @@ <h2 class="header" style="margin: 0;">
<button id="btn-start-recording">Start Recording</button>
<button id="btn-pause-recording" style="display: none; font-size: 15px;">Pause</button>

<div style="display: inline-block;">
<input type="checkbox" id="chk-fixSeeking" style="margin:0;width:auto;" title="Fix video seeking issues?">
<label for="chk-fixSeeking" style="font-size: 15px;margin:0;width: auto;cursor: pointer;-webkit-user-select:none;user-select:none;" title="Fix video seeking issues?">Fix Seeking Issues?</label>
</div>

<hr style="border-top: 0;border-bottom: 1px solid rgb(189, 189, 189);margin: 4px -12px;margin-top: 8px;">
<select class="media-resolutions">
<option value="default">Default resolutions</option>
Expand Down Expand Up @@ -288,6 +296,8 @@ <h2 class="header" style="margin: 0;">
btnStartRecording.disabled = false;
recordingMedia.disabled = false;
mediaContainerFormat.disabled = false;

chkFixSeeking.parentNode.style.display = 'inline-block';
};

btnStartRecording.onclick = function(event) {
Expand Down Expand Up @@ -354,6 +364,22 @@ <h2 class="header" style="margin: 0;">
url = URL.createObjectURL(blob);
}

if(chkFixSeeking.checked === true) {
// to fix video seeking issues
getSeekableBlob(button.recordRTC.getBlob(), function(seekableBlob) {
button.recordRTC.getBlob = function() {
return seekableBlob;
};

url = URL.createObjectURL(seekableBlob);

button.recordingEndedCallback(url);
saveToDiskOrOpenNewTab(button.recordRTC);
stopStream();
})
return;
}

button.recordingEndedCallback(url);
saveToDiskOrOpenNewTab(button.recordRTC);
stopStream();
Expand All @@ -377,13 +403,17 @@ <h2 class="header" style="margin: 0;">

button.innerHTML = 'Stop Recording';
button.disabled = false;

chkFixSeeking.parentNode.style.display = 'none';
},
onMediaStopped: function() {
button.innerHTML = 'Start Recording';

if(!button.disableStateWaiting) {
button.disabled = false;
}

chkFixSeeking.parentNode.style.display = 'inline-block';
},
onMediaCapturingFailed: function(error) {
console.error('onMediaCapturingFailed:', error);
Expand Down Expand Up @@ -1875,6 +1905,21 @@ <h2 class="header" style="margin: 0;">
};
</script>

<script>
var chkFixSeeking = document.querySelector('#chk-fixSeeking');
chkFixSeeking.onchange = function() {
if(this.checked === true) {
localStorage.setItem(this.id, 'true');
}
else {
localStorage.removeItem(this.id);
}
};
if(localStorage.getItem(chkFixSeeking.id) === 'true') {
chkFixSeeking.checked = true;
}
</script>

<script>
var chkTimeSlice = document.querySelector('#chk-timeSlice');
var timeSlice = false;
Expand Down Expand Up @@ -1911,6 +1956,7 @@ <h2 class="header" style="margin: 0;">
btnPauseRecording.disabled = true;
if(btnPauseRecording.innerHTML === 'Pause') {
btnStartRecording.disabled = true;
chkFixSeeking.parentNode.style.display = 'none';
btnStartRecording.style.fontSize = '15px';
btnStartRecording.recordRTC.pauseRecording();
recordingPlayer.parentNode.parentNode.querySelector('h2').innerHTML = 'Recording status: paused';
Expand All @@ -1925,6 +1971,7 @@ <h2 class="header" style="margin: 0;">

if(btnPauseRecording.innerHTML === 'Resume Recording') {
btnStartRecording.disabled = false;
chkFixSeeking.parentNode.style.display = 'none';
btnStartRecording.style.fontSize = 'inherit';
btnStartRecording.recordRTC.resumeRecording();
recordingPlayer.parentNode.parentNode.querySelector('h2').innerHTML = '<img src="https://cdn.webrtc-experiment.com/images/progress.gif">';
Expand Down
4 changes: 0 additions & 4 deletions simple-demos/WebAssemblyRecorder.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
<!--
All Copyrights goes to: Google Inc.
Original: https://github.com/GoogleChromeLabs/webm-wasm
-->
<title>WebAssembly Recorder using RecordRTC</title>
<style type="text/css">
body {
Expand Down

0 comments on commit cf0af4c

Please sign in to comment.