Skip to content

Commit

Permalink
Add screencast and small improvment for configuration
Browse files Browse the repository at this point in the history
  • Loading branch information
@QVDev
QVDev committed Sep 19, 2019
1 parent 493a001 commit 2f306ba
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 40 deletions.
9 changes: 5 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,15 @@
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<script src="https://cdn.jsdelivr.net/gh/QVDev/[email protected].6/js/GunRecorder.js"></script>
<script src="https://cdn.jsdelivr.net/gh/QVDev/[email protected].6/js/GunStreamer.js"></script>
<script src="https://cdn.jsdelivr.net/gh/QVDev/[email protected].6/js/GunViewer.js"></script>
<script src="https://cdn.jsdelivr.net/gh/QVDev/[email protected].6/js/mediabuffer.js"></script>
<script src="https://cdn.jsdelivr.net/gh/QVDev/[email protected].7/js/GunRecorder.js"></script>
<script src="https://cdn.jsdelivr.net/gh/QVDev/[email protected].7/js/GunStreamer.js"></script>
<script src="https://cdn.jsdelivr.net/gh/QVDev/[email protected].7/js/GunViewer.js"></script>
<script src="https://cdn.jsdelivr.net/gh/QVDev/[email protected].7/js/mediabuffer.js"></script>
</head>

<body>
<button type="button" onclick="gunRecorder.startCamera()">Start Camera</button>
<button type="button" onclick="gunRecorder.startScreenCapture()">Start ScreenCapture</button>
<button id="record_button" type="button" onclick="gunRecorder.record()">Start Recording</button>
<br><br>
Streamer<br>
Expand Down
33 changes: 22 additions & 11 deletions js/GunRecorder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,6 @@ var recordSate = {
UNKNOWN: 4,
};

const RECORDER_TIME_SLICE = 150;
const CAMERA_OPTIONS = {
video: {
facingMode: "environment",
frameRate: 24
}, audio: false
}

class GunRecorder {
constructor(config) {
this.video = document.getElementById(config.video_id);
Expand All @@ -24,6 +16,8 @@ class GunRecorder {
audioBitsPerSecond: config.audioBitsPerSecond,
videoBitsPerSecond: config.videoBitsPerSecond
}
this.recordInterval = config.recordInterval
this.cameraOptions = config.cameraOptions
this.experimental = config.experimental;
this.debug = config.debug;
this.setRecordingState(recordSate.UNKNOWN);
Expand All @@ -38,10 +32,10 @@ class GunRecorder {
this.mediaRecorder = new MediaRecorder(gunRecorder.video.captureStream(), this.recorderOptions);
this.mediaRecorder.ondataavailable = gunRecorder.onDataAvailable;
if (this.experimental) {
this.experimentalTimerId = setInterval(this.experimentalTimer, RECORDER_TIME_SLICE);
this.experimentalTimerId = setInterval(this.experimentalTimer, this.recordInterval);
this.mediaRecorder.start();
} else {
this.mediaRecorder.start(RECORDER_TIME_SLICE);
this.mediaRecorder.start(this.recordInterval);
}
this.changeRecordState();
} else {
Expand All @@ -65,7 +59,24 @@ class GunRecorder {
}
var gunRecorder = this;
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(CAMERA_OPTIONS).then(function (stream) {
navigator.mediaDevices.getUserMedia(this.cameraOptions).then(function (stream) {
gunRecorder.video.srcObject = stream;
gunRecorder.video.play();
});
this.setRecordingState(recordSate.STOPPED);
} else {
this.setRecordingState(recordSate.NOT_AVAILABLE);
}
}

startScreenCapture() {
if (this.recordSate == recordSate.RECORDING || this.recordSate == recordSate.STOPPED) {
this.debugLog("ScreenCast already started no need to do again");
return;
}
var gunRecorder = this;
if (navigator.mediaDevices.getDisplayMedia && navigator.mediaDevices.getDisplayMedia) {
navigator.mediaDevices.getDisplayMedia(this.cameraOptions).then(function (stream) {
gunRecorder.video.srcObject = stream;
gunRecorder.video.play();
});
Expand Down
2 changes: 1 addition & 1 deletion js/GunViewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ class GunViewer {
constructor(config) {
this.mimeType = config.mimeType;
this.video = document.getElementById(config.streamerId);
this.mediaBuffer = new Mediabuffer(this.video, null, null);
this.mediaBuffer = new Mediabuffer(this.video, null, null, true, null, config.catchup);
this.mediaSource = new MediaSource();
this.debug = config.debug;
this.lastTime = 0;
Expand Down
38 changes: 27 additions & 11 deletions js/integration.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,25 @@
const MIMETYPE_VIDEO_AUDIO = 'video/webm; codecs="opus,vp8"';
const MIMETYPE_VIDEO_ONLY = 'video/webm; codecs="vp8"';
const MIMETYPE_AUDIO_ONLY = 'video/webm; codecs="opus"';

const MIME_TYPE_USE = MIMETYPE_VIDEO_ONLY;

//Config for camera recorder
const CAMERA_OPTIONS = {
video: {
width: 320,
height: 280,
facingMode: "environment",
frameRate: 16
}, audio: false//Enable for sound make sure to change the MIME type to AUDIO_VIDEO
}


//Configure GunViewer
var viewer_config = {
mimeType: MIMETYPE_VIDEO_ONLY,
mimeType: MIME_TYPE_USE,
streamerId: "qvdev",//ID of the streamer
catchup: true,//Skip to last frame when there is to much loading. Set to false to increase smooth playback but with latency
debug: false,//For debug logs
}

Expand All @@ -13,21 +28,21 @@ var gunViewer = new GunViewer(viewer_config);
//Configure GUN to pass to streamer
var peers = ['https://gunmeetingserver.herokuapp.com/gun'];
var opt = { peers: peers, localStorage: false, radisk: false };
var gunDB = Gun(opt);
// var gunDB = Gun(opt);

// Get data from gun and pass along to viewer
gunDB.get("qvdev").on(function (data) {
gunViewer.onStreamerData(data);
});
// // Get data from gun and pass along to viewer
// gunDB.get("qvdev").on(function (data) {
// gunViewer.onStreamerData(data);
// });


//Config for the GUN GunStreamer
var streamer_config = {
dbRecord: "gunmeeting",//The root of the streams
streamId: "qvdev",//The user id you wanna stream
gun: gunDB,//Gun instance
streamId: "qvdev",//The user id you wanna stream
// gun: gunDB,//Gun instance
debug: false,//For debug logs
// onStreamerData: gunViewer.onStreamerData,//If you want manually handle the data manually
onStreamerData: gunViewer.onStreamerData,//If you want manually handle the data manually
url: "https://cdn.jsdelivr.net/gh/QVDev/[email protected]/js/parser_worker.js"//webworker load remote
}

Expand All @@ -51,14 +66,15 @@ var onRecordStateChange = function (state) {
}
}

//Config for the gun recorder
var recorder_config = {
mimeType: MIMETYPE_VIDEO_ONLY,
mimeType: MIME_TYPE_USE,
video_id: "record_video",//Video html element id
onDataAvailable: gunStreamer.onDataAvailable,//MediaRecorder data available callback
onRecordStateChange: onRecordStateChange,//Callback for recording state
audioBitsPerSecond: 6000,//Audio bits per second this is the lowest quality
videoBitsPerSecond: 100000,//Video bits per second this is the lowest quality
recordInterval: 150,//Interval of the recorder higher will increase delay but more buffering. Lower will not do much. Due limitiation of webm
cameraOptions: CAMERA_OPTIONS,//The camera and screencast options see constant
experimental: true,//This is custom time interval and very unstable with audio. Only video is more stable is interval quick enough? Audio
debug: false//For debug logs
}
Expand Down
29 changes: 16 additions & 13 deletions js/mediabuffer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,13 @@
* based on http://detectmobilebrowsers.com/ by Chad Smith
*/

function Mediabuffer(element, progressCallback, readyCallback, disableMobileCheck, forceFullDownload) {
function Mediabuffer(element, progressCallback, readyCallback, disableMobileCheck, forceFullDownload, catchup) {
this.element = element;
this.progressCallback = progressCallback;
this.readyCallback = readyCallback;
this.disableMobileCheck = typeof disableMobileCheck !== 'undefined' ? disableMobileCheck : false;
this.forceFullDownload = typeof forceFullDownload !== 'undefined' ? forceFullDownload : false;
this.catchup = typeof catchup !== 'undefined' ? catchup : true;

this.loadStartTime = 0;
this.percentBuffered = 0;
Expand All @@ -47,17 +48,17 @@ Mediabuffer.prototype.getAverageDelay = function () {
}

Mediabuffer.prototype.load = function () {
// if (!this.disableMobileCheck && this.isMobileBrowser()) {
// // mobile browser, so fail gracefully
// this.readyCallback();
// } else {
this.element.preload = "auto";
this.element.load();
if (!this.disableMobileCheck && this.isMobileBrowser()) {
// mobile browser, so fail gracefully
this.readyCallback();
} else {
this.element.preload = "auto";
this.element.load();

this.boundProgress = this.progress.bind(this);
this.boundProgress = this.progress.bind(this);

this.element.addEventListener('progress', this.boundProgress, true);
// }
this.element.addEventListener('progress', this.boundProgress, true);
}
};

Mediabuffer.prototype.progress = function () {
Expand Down Expand Up @@ -100,9 +101,11 @@ Mediabuffer.prototype.chromeBugWorkaround = function () {

}

let reduceDelay = (this.element.buffered.end(0) - this.getAverageDelay())
if (reduceDelay > this.element.currentTime) {
this.element.currentTime = reduceDelay;
if (this.catchup) {
let reduceDelay = (this.element.buffered.end(0) - this.getAverageDelay())
if (reduceDelay > this.element.currentTime) {
this.element.currentTime = reduceDelay;
}
}
};

Expand Down

0 comments on commit 2f306ba

Please sign in to comment.