#3279 Record Video Uploader: Added support for camera switching.

unacms · Mar 23, 2021 · 1efe5b5 · 1efe5b5
1 parent 73032cc
commit 1efe5b5
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 3 deletions.
diff --git a/inc/js/classes/BxDolUploader.js b/inc/js/classes/BxDolUploader.js
@@ -492,7 +492,8 @@ BxDolUploaderCrop.prototype = BxDolUploaderSimple.prototype;
 function BxDolUploaderRecordVideo (sUploaderObject, sStorageObject, sUniqId, options) {
     this._camera = null;
     this._blob = null;
-    this._recorder = null
+    this._recorder = null;
+    this._camera_type = 'user';
 
     this._audio_bitrate = undefined !== options.audio_bitrate ? parseInt(options.audio_bitrate) : 128000;
     this._video_bitrate = undefined !== options.video_bitrate ? parseInt(options.video_bitrate) : 1000000;
@@ -520,15 +521,33 @@ function BxDolUploaderRecordVideo (sUploaderObject, sStorageObject, sUniqId, opt
         $('#' + this._sFormContainerId + ' .bx-uploader-record-video-controls').hide();
     }
 
+    this.switchCamera = function () {
+        this._camera_type = this._camera_type == 'user' ? 'environment' : 'user';
+
+        this.releaseCamera();
+        this.onShowPopup();
+    }
+
     this.onShowPopup = function () {
         var $this = this;
-        navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function(camera) {
+
+        navigator.mediaDevices.getUserMedia({ audio: true, video: {facingMode: this._camera_type} }).then(function(camera) {
             $this._camera = camera;
             $this.showCameraCapture();
 
             $('#' + $this._sFormContainerId + ' .bx-uploader-recording-start').show();
             $('#' + $this._sFormContainerId + ' .bx-uploader-recording-stop').hide();
             $('#' + $this._sFormContainerId + ' .bx-uploader-record-video-controls').show();
+
+            navigator.mediaDevices.enumerateDevices().then(function(mediaDevices){
+                let constraints = navigator.mediaDevices.getSupportedConstraints();
+                if ($this.getDevicesNum(mediaDevices) > 1 && typeof constraints.facingMode != 'undefined' && constraints.facingMode) {
+                    $('#' + $this._sFormContainerId + ' .bx-record-camera-switch').show();
+                } else {
+                    $('#' + $this._sFormContainerId + ' .bx-record-camera-switch').hide();
+                }
+            });
+
         }).catch(function(error) {
             $this._showError(_t('_sys_uploader_camera_capture_failed'));
         });
@@ -553,6 +572,7 @@ function BxDolUploaderRecordVideo (sUploaderObject, sStorageObject, sUniqId, opt
             return;
         }
 
+        $("#" + this._sFormContainerId + " .bx-btn.bx-btn-primary:not(.bx-crop-upload)").hide();
         $('#' + this._sFormContainerId + ' .bx-uploader-recording-start').hide();
         $('#' + this._sFormContainerId + ' .bx-uploader-recording-stop').show();
 
@@ -573,6 +593,7 @@ function BxDolUploaderRecordVideo (sUploaderObject, sStorageObject, sUniqId, opt
             $this._recorder.destroy();
             $this._recorder = null;
 
+            $("#" + $this._sFormContainerId + " .bx-btn.bx-btn-primary:not(.bx-crop-upload)").show();
             if (bSubmitWhenReady)
                 $this.submitRecording($('#' + $this._sFormContainerId + ' form').get(0));
         });
@@ -645,6 +666,14 @@ function BxDolUploaderRecordVideo (sUploaderObject, sStorageObject, sUniqId, opt
             });
         }
     }
+
+    this.getDevicesNum = function(mediaDevices) {
+        let count = 0;
+        mediaDevices.forEach(mediaDevice => {
+            if (mediaDevice.kind === 'videoinput') count++;
+        });
+        return count;
+    }
 }
 
 BxDolUploaderRecordVideo.prototype = BxDolUploaderSimple.prototype;

diff --git a/modules/boonex/english/data/langs/system/en.xml b/modules/boonex/english/data/langs/system/en.xml
@@ -3385,6 +3385,7 @@ If it is not enabled then please consider implement this optimization, since it
 	<string name="_sys_uploader_record_video_start_button"><![CDATA[Start Recording]]></string>
 	<string name="_sys_uploader_record_video_stop_button"><![CDATA[Stop Recording]]></string>
 	<string name="_sys_uploader_record_video_mb"><![CDATA[Mb]]></string>
+	<string name="_sys_uploader_record_video_switch_camera"><![CDATA[Switch camera]]></string>
 	<string name="_sys_uploader_upload_canceled"><![CDATA[Too bad. Upload canceled.]]></string>
 	<string name="_sys_uploader_camera_capture_failed"><![CDATA[We were unable to initialize your camera.]]></string>
 	<string name="_sys_uploader_unsupported_browser"><![CDATA[Your browser doesn't support video recording. You can try <strong>Google Chrome</strong> or <strong>Mozilla FireFox</strong> instead.]]></string>

diff --git a/modules/boonex/russian/data/langs/system/ru.xml b/modules/boonex/russian/data/langs/system/ru.xml
@@ -3282,6 +3282,7 @@
 	<string name="_sys_uploader_record_video_start_button"><![CDATA[Начать запись]]></string>
 	<string name="_sys_uploader_record_video_stop_button"><![CDATA[Прекратить запись]]></string>
 	<string name="_sys_uploader_record_video_mb"><![CDATA[Мб]]></string>
+	<string name="_sys_uploader_record_video_switch_camera"><![CDATA[Переключить камеру]]></string>
 	<string name="_sys_uploader_unsupported_browser"><![CDATA[Ваш браузер не поддерживает запись видео. Попробуйте <strong>Google Chrome</strong> или <strong>Mozilla FireFox</strong>.]]></string>
 	<string name="_sys_edit_profile"><![CDATA[Редактировать профиль]]></string>
 	<string name="_sys_exit"><![CDATA[Закончить]]></string>    

diff --git a/template/css/uploaders.css b/template/css/uploaders.css
@@ -88,6 +88,11 @@
     text-align: center;
     margin: 0.2rem 0;
 }
+.bx-record-camera-switch {
+    margin-bottom: 0.5rem;
+    text-align: right;
+    display: none;
+}
 
 @keyframes bx-uploader-recording-animation {
     0% {opacity: 0;}

diff --git a/template/uploader_form_record_video.html b/template/uploader_form_record_video.html
@@ -1,5 +1,4 @@
 <div id="__form_container_id__" class="bx-uploader-form-cont bx-popup-width">
-
     <form enctype="multipart/form-data" method="POST" action="<bx_url_root />storage_uploader.php" onsubmit="__uploader_instance_name__.submitRecording(this); return false;">
 
         <div class="bx-uploader-loading">
@@ -12,6 +11,9 @@
             <div class="bx-def-padding-sec-bottom" id="__errors_container_id__"></div>
 
             <div class="bx-record-video-preview">
+                <div class="bx-record-camera-switch bx-def-font">
+                    <a href="#" onclick="__uploader_instance_name__.switchCamera();return false;" title="<bx_text:_sys_uploader_record_video_switch_camera />"><i class="sys-icon sys-colored sync-alt"> Switch camera</i></a>
+                </div>
                 <video autoplay style="width: 100%;" id="bx-upoloader-camera-capture"></video>
                 <video autoplay controls style="width: 100%;" id="bx-upoloader-recording-preview"></video>
                 <div class="bx-record-video-preview-filesize"></div>