Move js code for webcam tool - refs BT#12835

main/document/webcam_clip.php

@@ -18,6 +18,7 @@ $_SESSION['whereami'] = 'document/webcamclip';
 $this_section = SECTION_COURSES;
 $nameTools = get_lang('WebCamClip');
 $htmlHeadXtra[] = api_get_js_simple(api_get_path(WEB_PATH).'web/assets/webcamjs/webcam.js');
+$htmlHeadXtra[] = api_get_js('webcam_recorder.js');
 $groupRights = Session::read('group_member_with_upload_rights');
 
 api_protect_course_script();

main/inc/lib/javascript/webcam_recorder.js

@@ -0,0 +1,107 @@
+(function () {
+    var config = {
+        selectors: {
+            btnFreeze: '#btnCapture',
+            btnUnFreeze: '#btnClean',
+            btnSave: '#btnSave',
+            btnAuto: '#btnAuto',
+            btnStop: '#btnStop',
+            camera: '#chamilo-camera',
+            results: '#upload_results'
+        },
+        urlReceiver: '',
+        video: {
+            fps: 1000,
+            maxTime: 60000,
+            maxClip: 25
+        }
+    };
+
+    function snap() {
+        Webcam.snap(function (dataUri) {
+            Webcam.upload(dataUri, config.urlReceiver, function (code, response) {
+                $(config.selectors.results).html(
+                    '<h3>' + response + '</h3>'
+                    + '<div>'
+                    + '<img src="' + dataUri + '" class="webcamclip_bg">'
+                    + '</div>'
+                );
+            });
+        });
+    };
+
+    var videoInterval = 0;
+
+    function startVideo() {
+        var counter = 0;
+        videoInterval = window.setInterval(function () {
+            counter++;
+
+            window.setTimeout(function () {
+                stopVideo();
+            }, config.video.maxTime);
+
+            if (config.video.maxClip >= counter) {
+                snap();
+            } else {
+                stopVideo();
+            }
+        }, config.video.fps);
+    }
+
+    function stopVideo() {
+        if (!videoInterval) {
+            return;
+        }
+
+        window.clearTimeout(videoInterval);
+    }
+
+    window.RecordWebcam = {
+        init: function (params) {
+            config = $.extend(true, config, params);
+
+            $(document).on('ready', function () {
+                Webcam.set({
+                    width: 320,
+                    height: 240,
+                    image_format: 'jpeg',
+                    jpeg_quality: 90
+                });
+                Webcam.attach(config.selectors.camera);
+
+                $('video').addClass('skip');
+
+                $(config.selectors.btnFreeze).on('click', function (e) {
+                    e.preventDefault();
+
+                    Webcam.freeze();
+                });
+
+                $(config.selectors.btnUnFreeze).on('click', function (e) {
+                    e.preventDefault();
+
+                    Webcam.unfreeze();
+                });
+
+                $(config.selectors.btnSave).on('click', function (e) {
+                    e.preventDefault();
+
+                    snap();
+                })
+
+                $(config.selectors.btnAuto).on('click', function (e) {
+                    e.preventDefault();
+
+                    startVideo();
+                });
+
+                $(config.selectors.btnStop).on('click', function (e) {
+                    e.preventDefault();
+
+                    stopVideo();
+                });
+            })
+        }
+    };
+})();

main/template/default/document/webcam.tpl

@@ -31,87 +31,12 @@
         <div id="upload_results" class="center-block" style="background-color:#ffffff;"></div>
     </div>
 </div>
-
 <script>
-    Webcam.set({
-        width: 320,
-        height: 240,
-        image_format: 'jpeg',
-        jpeg_quality: 90
-    });
-    Webcam.attach('#chamilo-camera');
-    //This line Fix a minor bug that made a conflict with a videochat feature in another module file
-    $('video').addClass('skip');
-</script>
-<script language="JavaScript">
-    $(document).ready(function () {
-        $('#btnCapture').on('click', function (e) {
-            e.preventDefault();
-            Webcam.freeze();
-        });
-
-        $('#btnClean').on('click', function (e) {
-            e.preventDefault();
-            Webcam.unfreeze();
-        });
-
-        $('#btnSave').on('click', function (e) {
-            e.preventDefault();
-            snap();
-        });
-
-        $('#btnAuto').on('click', function (e) {
-            e.preventDefault();
-            start_video();
-        });
-
-        $('#btnStop').on('click', function (e) {
-            e.preventDefault();
-            stop_video();
-        });
-    });
-
-    function snap() {
-        Webcam.snap(function (data_uri) {
-            var clip_filename = '{{ filename }}';
-            var url = '{{ _p.web_main }}document/webcam_receiver.php?webcamname=' + escape(clip_filename) + '&webcamdir={{ webcam_dir }}&webcamuserid={{ user_id }}';
-            Webcam.upload(data_uri, url, function (code, response) {
-                $('#upload_results').html(
-                    '<h3>' + response + '</h3>' +
-                    '<div>' +
-                    '<img src="' + data_uri + '" class="webcamclip_bg">' +
-                    '</div>' +
-                    '<p hidden="true">' + code + '</p>'
-                );
-            });
-        });
-    }
-</script>
-<script>
-    var interval = null;
-    var timeout = null;
-    var counter = 0;
-    var fps = 1000;//one frame per second
-    var maxclip = 25;//maximum number of clips
-    var maxtime = 60000;//stop after one minute
-
-    function stop_video() {
-        interval = window.clearInterval(interval);
-        return false;
-    }
-
-    function start_video() {
-        interval = window.setInterval("clip_send_video()", fps);
-    }
-
-    function clip_send_video() {
-        counter++;
-        timeout = setTimeout('stop_video()', maxtime);
-        if (maxclip >= counter) {
-            snap();// clip and upload
-        }
-        else {
-            interval = window.clearInterval(interval);
+    RecordWebcam.init({
+        urlReceiver: '{{ _p.web_main }}document/webcam_receiver.php?webcamname='
+            + escape('{{ filename }}') + '&webcamdir={{ webcam_dir }}&webcamuserid={{ user_id }}',
+        video: {
+            maxClip: 10
         }
-    }
+    });
 </script>