collab-project
diff --git a/‎examples/screen-animation.html‎
Lines changed: 92 additions & 0 deletions b/‎examples/screen-animation.html‎
Lines changed: 92 additions & 0 deletions
@@ -0,0 +1,92 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Screen-only Example - Record Plugin for Video.js</title>
+
+    <link href="../node_modules/video.js/dist/video-js.min.css" rel="stylesheet">
+    <link href="../dist/css/videojs.record.css" rel="stylesheet">
+    <link href="assets/css/examples.css" rel="stylesheet">
+
+    <script src="../node_modules/video.js/dist/video.min.js"></script>
+    <script src="../node_modules/recordrtc/RecordRTC.js"></script>
+    <script src="../node_modules/webrtc-adapter/out/adapter.js"></script>
+
+    <script src="../dist/videojs.record.js"></script>
+
+    <script src="browser-workarounds.js"></script>
+
+    <style>
+        /* change player background color */
+        
+        #myScreen {
+            background-color: #c3c4bc;
+        }
+    </style>
+</head>
+
+<body>
+
+    <video id="myScreen" playsinline class="video-js vjs-default-skin"></video>
+
+    <script>
+        /* eslint-disable */
+        var options = {
+            controls: true,
+            width: 800,
+            height: 450,
+            fluid: false,
+            bigPlayButton: false,
+            controlBar: {
+                volumePanel: false,
+                fullscreenToggle: false
+            },
+            plugins: {
+                record: {
+                    screen: true,
+                    displayMilliseconds: false,
+                    animation: true,
+                    animationQuality: 20,
+                    animationFrameRate: 200,
+                    maxLength: 5,
+                    debug: true
+                }
+            }
+        };
+
+        // apply some workarounds for certain browsers
+        applyVideoWorkaround();
+        applyScreenWorkaround();
+
+        var player = videojs('myScreen', options, function() {
+            // print version information at startup
+            var msg = 'Using video.js ' + videojs.VERSION +
+                ' with videojs-record ' + videojs.getPluginVersion('record') +
+                ' and recordrtc ' + RecordRTC.version;
+            videojs.log(msg);
+        });
+
+        // error handling
+        player.on('deviceError', function() {
+            console.warn('device error:', player.deviceErrorCode);
+        });
+
+        player.on('error', function(element, error) {
+            console.error(error);
+        });
+
+        // snapshot is available
+        player.on('finishRecord', function() {
+            // the blob object contains the image data that
+            // can be downloaded by the user, stored on server etc.
+            console.log('screen recording ready: ', player.recordedData);
+            player.record().saveAs({
+                gif: 'hari.gif'
+            })
+        });
+    </script>
+
+</body>
+
+</html>