|
@@ -0,0 +1,82 @@
|
|
|
+<button id="btn-start-recording">Start</button>
|
|
|
+<button id="btn-stop-recording" disabled>Stop</button>
|
|
|
+
|
|
|
+<script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>
|
|
|
+<script>
|
|
|
+ var wsUri = getWebSocketEndpoint() + "/system/file_system/lowmemUpload?filename=" + encodeURIComponent(new Date().toLocaleString().replaceAll(" ","").replaceAll("/","").replaceAll(":","").replaceAll(",","")) + ".webm&path=user%3A%2F";
|
|
|
+var video = document.querySelector('video');
|
|
|
+var websocket;
|
|
|
+
|
|
|
+function getWebSocketEndpoint(){
|
|
|
+ let protocol = "wss://";
|
|
|
+ if (location.protocol !== 'https:') {
|
|
|
+ protocol = "ws://";
|
|
|
+ }
|
|
|
+ let port = window.location.port;
|
|
|
+ if (window.location.port == ""){
|
|
|
+ if (location.protocol !== 'https:') {
|
|
|
+ port = "80";
|
|
|
+ }else{
|
|
|
+ port = "443";
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ let wsept = (protocol + window.location.hostname + ":" + port);
|
|
|
+ return wsept;
|
|
|
+ }
|
|
|
+
|
|
|
+function captureCamera(callback) {
|
|
|
+ navigator.mediaDevices.getDisplayMedia({
|
|
|
+ displaySurface: 'monitor',
|
|
|
+ logicalSurface: true,
|
|
|
+ cursor: 'always'
|
|
|
+ }).then(function(camera) {
|
|
|
+ callback(camera);
|
|
|
+ }).catch(function(error) {
|
|
|
+ alert('Unable to capture your camera. Please check console logs.');
|
|
|
+ console.error(error);
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function stopRecordingCallback() {
|
|
|
+ recorder.camera.stop();
|
|
|
+ recorder = null;
|
|
|
+}
|
|
|
+
|
|
|
+var recorder;
|
|
|
+
|
|
|
+document.getElementById('btn-start-recording').onclick = function() {
|
|
|
+ this.disabled = true;
|
|
|
+ websocket = new WebSocket(wsUri);
|
|
|
+ //websocket.binaryType = 'blob';
|
|
|
+
|
|
|
+ captureCamera(function(camera) {
|
|
|
+
|
|
|
+ recorder = RecordRTC(camera, {
|
|
|
+ recorderType: MediaStreamRecorder,
|
|
|
+ mimeType: 'video/webm',
|
|
|
+ timeSlice: 100, // pass this parameter
|
|
|
+ getNativeBlob: true,
|
|
|
+ ondataavailable: function(blob) {
|
|
|
+ websocket.send(blob);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ recorder.startRecording();
|
|
|
+
|
|
|
+ // release camera on stopRecording
|
|
|
+ recorder.camera = camera;
|
|
|
+
|
|
|
+ document.getElementById('btn-stop-recording').disabled = false;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+document.getElementById('btn-stop-recording').onclick = function() {
|
|
|
+ this.disabled = true;
|
|
|
+ recorder.stopRecording(stopRecordingCallback);
|
|
|
+ websocket.send("done");
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<footer style="margin-top: 20px;"><small id="send-message"></small></footer>
|
|
|
+<script src="https://www.webrtc-experiment.com/common.js"></script>
|