@uploadcare/file-uploader 1.10.0 → 1.11.0-alpha.1

package/blocks/CameraSource/CameraSource.js

@@ -1,9 +1,45 @@
-import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+//@ts-nocheck
 import { ActivityBlock } from '../../abstract/ActivityBlock.js';
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { canUsePermissionsApi } from '../utils/abilities.js';
 import { debounce } from '../utils/debounce.js';
 import { UploadSource } from '../utils/UploadSource.js';
 
+const DEFAULT_VIDEO_CONFIG = {
+  width: {
+    ideal: 1920,
+  },
+  height: {
+    ideal: 1080,
+  },
+  frameRate: {
+    ideal: 30,
+  },
+};
+
+const DEFAULT_PERMISSIONS = ['camera', 'microphone'];
+
+/**
+ * @param {Number} time
+ * @returns
+ */
+function formatTime(time) {
+  const minutes = Math.floor(time / 60)
+    .toString()
+    .padStart(2, '0');
+  const seconds = Math.floor(time % 60)
+    .toString()
+    .padStart(2, '0');
+  return `${minutes}:${seconds}`;
+}
+
+const DEFAULT_PICTURE_FORMAT = 'image/jpeg';
+const DEFAULT_VIDEO_FORMAT = 'video/webm';
+
+/** @typedef {'photo' | 'video'} CameraTabId */
+
+/** @typedef {'shot' | 'retake' | 'accept' | 'play' | 'stop' | 'pause' | 'resume'} CameraStatus */
+
 export class CameraSource extends UploaderBlock {
   couldBeCtxOwner = true;
   activityType = ActivityBlock.activities.CAMERA;
@@ -11,54 +47,526 @@ export class CameraSource extends UploaderBlock {
   /** @private */
   _unsubPermissions = null;
 
-  init$ = {
-    ...this.init$,
-    video: null,
-    videoTransformCss: null,
-    shotBtnDisabled: true,
-    videoHidden: true,
-    messageHidden: true,
-    requestBtnHidden: canUsePermissionsApi(),
-    cameraSelectOptions: null,
-    cameraSelectHidden: true,
-    l10nMessage: '',
-
-    onCameraSelectChange: (e) => {
-      /** @type {String} */
-      this._selectedCameraId = e.target.value;
-      this._capture();
-    },
-    onCancel: () => {
-      this.historyBack();
-    },
-    onShot: () => {
+  /** @type {BlobPart[]} */
+  _chunks = [];
+
+  /** @type {MediaRecorder | null} */
+  _mediaRecorder = null;
+
+  /** @type {MediaStream | null} */
+  _stream = null;
+
+  /** @type {string | null} */
+  _selectedAudioId = null;
+
+  /** @type {string | null} */
+  _selectedCameraId = null;
+
+  constructor() {
+    super();
+
+    this.init$ = {
+      ...this.init$,
+      video: null,
+      videoTransformCss: null,
+
+      videoHidden: true,
+      messageHidden: true,
+      requestBtnHidden: canUsePermissionsApi(),
+      cameraSelectOptions: null,
+      cameraSelectHidden: true,
+      l10nMessage: '',
+
+      // This is refs
+      switcher: null,
+      panels: null,
+      timer: null,
+
+      timerHidden: true,
+      cameraHidden: true,
+      cameraActionsHidden: true,
+
+      audioSelectOptions: null,
+      audioSelectHidden: true,
+      audioSelectDisabled: true,
+      audioToggleMicorphoneHidden: true,
+
+      tabCameraHidden: true,
+      tabVideoHidden: true,
+
+      currentIcon: 'camera-full',
+      currentTimelineIcon: 'play',
+      toggleMicorphoneIcon: 'microphone',
+
+      /** @type {Number} */
+      _startTime: 0,
+      /** @type {Number} */
+      _elapsedTime: 0,
+      _animationFrameId: null,
+
+      mutableClassButton: 'uc-shot-btn uc-camera-action',
+
+      /** @param {Event} e */
+      onCameraSelectChange: (e) => {
+        this._selectedCameraId = e.target.value;
+        this._capture();
+      },
+
+      /** @param {Event} e */
+      onAudioSelectChange: (e) => {
+        this._selectedAudioId = e.target.value;
+        this._capture();
+      },
+
+      onCancel: () => {
+        this.historyBack();
+      },
+
+      onShot: () => this._shot(),
+
+      onRequestPermissions: () => this._capture(),
+
+      /** General method for photo and video capture */
+      onStartCamera: () => this._chooseActionWithCamera(),
+
+      onStartRecording: () => this._startRecording(),
+
+      onStopRecording: () => this._stopRecording(),
+
+      onToggleRecording: () => this._toggleRecording(),
+
+      onToggleAudio: () => this._toggleEnableAudio(),
+
+      onRetake: () => this._retake(),
+
+      onAccept: () => this._accept(),
+
+      /** @param {MouseEvent} e */
+      onClickTab: (e) => {
+        const id = /** @type {HTMLElement} */ (e.currentTarget).getAttribute('data-id');
+        if (id) this._handleActiveTab(/** @type {CameraTabId} */ (id));
+      },
+    };
+  }
+
+  _chooseActionWithCamera = () => {
+    if (this._activeTab === CameraSource.types.PHOTO) {
       this._shot();
-    },
-    onRequestPermissions: () => {
-      this._capture();
-    },
+    }
+
+    if (this._activeTab === CameraSource.types.VIDEO) {
+      if (this._mediaRecorder?.state === 'recording') {
+        this._stopRecording();
+        return;
+      }
+
+      this._startRecording();
+    }
   };
 
-  /** @private */
-  _onActivate = () => {
-    if (canUsePermissionsApi()) {
-      this._subscribePermissions();
+  _updateTimer = () => {
+    const currentTime = Math.floor((performance.now() - this.$._startTime + this.$._elapsedTime) / 1000);
+
+    if (typeof this.cfg.maxDurationVideoRecord === 'number' && this.cfg.maxDurationVideoRecord > 0) {
+      const remainingTime = this.cfg.maxDurationVideoRecord - currentTime;
+
+      if (remainingTime <= 0) {
+        this.ref.timer.textContent = formatTime(remainingTime);
+        this._stopRecording();
+        return;
+      }
+
+      this.ref.timer.textContent = formatTime(remainingTime);
+    } else {
+      this.ref.timer.textContent = formatTime(currentTime);
+    }
+
+    this._animationFrameId = requestAnimationFrame(this._updateTimer);
+  };
+
+  _startTimer = () => {
+    this.$._startTime = performance.now();
+    this.$._elapsedTime = 0;
+
+    this._updateTimer();
+  };
+
+  _stopTimer = () => {
+    if (this._animationFrameId) cancelAnimationFrame(this._animationFrameId);
+  };
+
+  _startTimeline = () => {
+    const currentTime = this.ref.video.currentTime;
+    const duration = this.ref.video.duration;
+
+    this.ref.line.style.transform = `scaleX(${currentTime / duration})`;
+    this.ref.timer.textContent = formatTime(currentTime);
+    this._animationFrameId = requestAnimationFrame(this._startTimeline);
+  };
+
+  _stopTimeline = () => {
+    if (this._animationFrameId) cancelAnimationFrame(this._animationFrameId);
+  };
+
+  _startRecording = () => {
+    try {
+      this._chunks = [];
+      this._options = {
+        ...this.cfg.optionsMediaRecorder,
+      };
+
+      const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+
+      if (
+        this.cfg.optionsMediaRecorder?.mimeType &&
+        MediaRecorder.isTypeSupported(this.cfg.optionsMediaRecorder.mimeType)
+      ) {
+        this._options.mimeType = this.cfg.optionsMediaRecorder.mimeType;
+      } else if (
+        isFirefox &&
+        this.cfg.optionsMediaRecorder?.mimeType &&
+        MediaRecorder.isTypeSupported(this.cfg.optionsMediaRecorder.mimeType)
+      ) {
+        const mimeType = this.cfg.optionsMediaRecorder?.mimeType;
+
+        if (mimeType && !MediaRecorder.isTypeSupported(mimeType)) {
+          throw new Error(`MIME type ${mimeType} is not supported`);
+        }
+
+        this._options.mimeType = DEFAULT_VIDEO_FORMAT;
+      }
+
+      if (this._stream) {
+        this._mediaRecorder = new MediaRecorder(this._stream, this._options);
+        this._mediaRecorder.start();
+
+        this._mediaRecorder.addEventListener('dataavailable', (e) => {
+          this._chunks.push(e.data);
+        });
+
+        this._startTimer();
+
+        this.classList.add('uc-recording');
+        this._setCameraState(CameraSource.events.PLAY);
+      }
+    } catch (error) {
+      console.error('Failed to start recording', error);
     }
-    this._capture();
   };
 
   /** @private */
-  _onDeactivate = () => {
-    if (this._unsubPermissions) {
-      this._unsubPermissions();
+  _stopRecording = () => {
+    this._mediaRecorder?.addEventListener('stop', () => {
+      this._previewVideo();
+
+      this._stopTimer();
+
+      this._setCameraState(CameraSource.events.STOP);
+    });
+
+    this._mediaRecorder?.stop();
+    this.classList.remove('uc-recording');
+  };
+
+  /** This method is used to toggle recording pause/resume */
+  _toggleRecording = () => {
+    if (this._mediaRecorder?.state === 'recording') return;
+
+    if (!this.ref.video.paused && !this.ref.video.ended && this.ref.video.readyState > 2) {
+      this.set$({
+        currentTimelineIcon: 'play',
+      });
+
+      this.ref.video.pause();
+    } else if (this.ref.video.paused) {
+      this.set$({
+        currentTimelineIcon: 'pause',
+      });
+
+      this.ref.video.play();
     }
+  };
 
-    this._stopCapture();
+  _toggleEnableAudio = () => {
+    this._stream?.getAudioTracks().forEach((track) => {
+      track.enabled = !track.enabled;
+
+      this.$.toggleMicorphoneIcon = !track.enabled ? 'microphone-mute' : 'microphone';
+      this.$.audioSelectDisabled = !track.enabled;
+    });
+  };
+
+  /**
+   * Previewing the video that was recorded on the camera
+   *
+   * @private
+   */
+  _previewVideo = () => {
+    try {
+      const blob = new Blob(this._chunks, {
+        type: this._mediaRecorder?.mimeType,
+      });
+
+      const videoURL = URL.createObjectURL(blob);
+
+      this.ref.video.muted = false;
+      this.ref.video.volume = 1;
+      this.$.video = null;
+      this.ref.video.src = videoURL;
+
+      this.ref.video.addEventListener('play', () => {
+        this._startTimeline();
+      });
+
+      this.ref.video.addEventListener('pause', () => {
+        this._stopTimeline();
+      });
+    } catch (error) {
+      console.error('Failed to preview video', error);
+    }
+  };
+
+  _retake = () => {
+    this._setCameraState(CameraSource.events.RETAKE);
+
+    /** Reset video */
+    if (this._activeTab === CameraSource.types.VIDEO) {
+      this.$.video = this._stream;
+      this.ref.video.muted = true;
+    }
+
+    this.ref.video.play();
+  };
+
+  _accept = () => {
+    this._setCameraState(CameraSource.events.ACCEPT);
+
+    if (this._activeTab === CameraSource.types.PHOTO) {
+      this._canvas?.toBlob((blob) => {
+        const file = this._createFile('camera', 'jpeg', DEFAULT_PICTURE_FORMAT, blob);
+        this._toSend(file);
+      }, DEFAULT_PICTURE_FORMAT);
+      return;
+    }
+
+    const blob = new Blob(this._chunks, {
+      type: this._mediaRecorder?.mimeType,
+    });
+
+    const ext = this._guessExtensionByMime(this._mediaRecorder?.mimeType);
+    const file = this._createFile('video', ext, `video/${ext}`, blob);
+
+    this._toSend(file);
+    this._chunks = [];
+  };
+
+  /** @param {CameraStatus} status */
+  _handlePhoto = (status) => {
+    if (status === CameraSource.events.SHOT) {
+      this.set$({
+        tabVideoHidden: true,
+        cameraHidden: true,
+        tabCameraHidden: true,
+        cameraActionsHidden: false,
+        cameraSelectHidden: true,
+      });
+    }
+
+    if (status === CameraSource.events.RETAKE || status === CameraSource.events.ACCEPT) {
+      this.set$({
+        tabVideoHidden: !this.cfg.enableVideoRecording,
+        cameraHidden: false,
+        tabCameraHidden: false,
+        cameraActionsHidden: true,
+        cameraSelectHidden: this.cameraDevices.length <= 1,
+      });
+    }
+  };
+
+  /** @param {CameraStatus} status */
+  _handleVideo = (status) => {
+    if (status === CameraSource.events.PLAY) {
+      this.set$({
+        timerHidden: false,
+        tabCameraHidden: true,
+
+        cameraSelectHidden: true,
+        audioSelectHidden: true,
+
+        currentTimelineIcon: 'pause',
+        currentIcon: 'square',
+        mutableClassButton: 'uc-shot-btn uc-camera-action uc-stop-record',
+      });
+    }
+
+    if (status === CameraSource.events.STOP) {
+      this.set$({
+        timerHidden: false,
+        cameraHidden: true,
+        audioToggleMicorphoneHidden: true,
+        cameraActionsHidden: false,
+      });
+    }
+
+    if (status === CameraSource.events.RETAKE || status === CameraSource.events.ACCEPT) {
+      this.set$({
+        timerHidden: true,
+        tabCameraHidden: false,
+        cameraHidden: false,
+        cameraActionsHidden: true,
+        audioToggleMicorphoneHidden: !this.cfg.enableAudioRecording,
+        currentIcon: 'video-camera-full',
+        mutableClassButton: 'uc-shot-btn uc-camera-action',
+
+        audioSelectHidden: !this.cfg.enableAudioRecording,
+        cameraSelectHidden: this.cameraDevices.length <= 1,
+      });
+    }
+  };
+
+  /**
+   * @private
+   * @param {CameraStatus} status
+   */
+  _setCameraState = (status) => {
+    if (
+      this._activeTab === CameraSource.types.PHOTO &&
+      (status === 'shot' || status === 'retake' || status === 'accept')
+    ) {
+      this._handlePhoto(status);
+    }
+
+    if (
+      this._activeTab === CameraSource.types.VIDEO &&
+      (status === 'play' ||
+        status === 'stop' ||
+        status === 'retake' ||
+        status === 'accept' ||
+        status === 'pause' ||
+        status === 'resume')
+    ) {
+      this._handleVideo(status);
+    }
   };
 
   /** @private */
-  _handlePermissionsChange = () => {
-    this._capture();
+  _shot() {
+    this._setCameraState('shot');
+
+    this._canvas = document.createElement('canvas');
+    this._ctx = this._canvas.getContext('2d');
+
+    if (!this._ctx) {
+      throw new Error('Failed to get canvas context');
+    }
+
+    this._canvas.height = this.ref.video['videoHeight'];
+    this._canvas.width = this.ref.video['videoWidth'];
+
+    if (this.cfg.cameraMirror) {
+      this._ctx.translate(this._canvas.width, 0);
+      this._ctx.scale(-1, 1);
+    }
+
+    this._ctx.drawImage(this.ref.video, 0, 0);
+    this.ref.video.pause();
+  }
+
+  /**
+   * @private
+   * @param {CameraTabId} tabId
+   */
+  _handleActiveTab = (tabId) => {
+    this.ref.switcher.querySelectorAll('button').forEach((/** @type {HTMLElement} */ btn) => {
+      btn.classList.toggle('uc-active', btn.getAttribute('data-id') === tabId);
+    });
+
+    if (tabId === CameraSource.types.PHOTO) {
+      this.set$({
+        currentIcon: 'camera-full',
+        audioSelectHidden: true,
+        audioToggleMicorphoneHidden: true,
+      });
+    }
+
+    if (tabId === CameraSource.types.VIDEO) {
+      this.set$({
+        currentTimelineIcon: 'play',
+        currentIcon: 'video-camera-full',
+
+        audioSelectHidden: !this.cfg.enableAudioRecording,
+        audioToggleMicorphoneHidden: !this.cfg.enableAudioRecording,
+      });
+    }
+
+    this._activeTab = tabId;
+  };
+
+  /**
+   * @param {'camera' | 'video'} type
+   * @param {'jpeg' | 'webm'} ext
+   * @param {String} format
+   * @param {Blob} blob
+   */
+  _createFile = (type, ext, format, blob) => {
+    const date = Date.now();
+    const name = `${type}-${date}.${ext}`;
+
+    const file = new File([blob], name, {
+      lastModified: date,
+      type: format,
+    });
+
+    return file;
+  };
+
+  /** @param {String | undefined} mime */
+  _guessExtensionByMime(mime) {
+    const knownContainers = {
+      mp4: 'mp4',
+      ogg: 'ogg',
+      webm: 'webm',
+      quicktime: 'mov',
+      'x-matroska': 'mkv',
+    };
+
+    // MediaRecorder.mimeType returns empty string in Firefox.
+    // Firefox record video as WebM now by default.
+    // @link https://bugzilla.mozilla.org/show_bug.cgi?id=1512175
+    if (mime === '') {
+      return 'webm';
+    }
+
+    // e.g. "video/x-matroska;codecs=avc1,opus"
+    if (mime) {
+      // e.g. ["video", "x-matroska;codecs=avc1,opus"]
+      /** @type {string | string[]} */ (mime) = mime.split('/');
+      if (mime?.[0] === 'video') {
+        // e.g. "x-matroska;codecs=avc1,opus"
+        mime = mime.slice(1).join('/');
+        // e.g. "x-matroska"
+        const container = mime?.split(';')[0];
+        // e.g. "mkv"
+        if (knownContainers[container]) {
+          return knownContainers[container];
+        }
+      }
+    }
+
+    // In all other cases just return the base extension for all times
+    return 'avi';
+  }
+
+  /**
+   * The send file to the server
+   *
+   * @param {File} file
+   */
+  _toSend = (file) => {
+    this.api.addFileFromObject(file, { source: UploadSource.CAMERA });
+    this.set$({
+      '*currentActivity': ActivityBlock.activities.UPLOAD_LIST,
+    });
   };
 
   /**
@@ -68,117 +576,208 @@ export class CameraSource extends UploaderBlock {
   _setPermissionsState = debounce((state) => {
     this.classList.toggle('uc-initialized', state === 'granted');
 
+    const visibleAudio = this._activeTab === CameraSource.types.VIDEO && this.cfg.enableAudioRecording;
+    const currentIcon = this._activeTab === CameraSource.types.PHOTO ? 'camera-full' : 'video-camera-full';
+
     if (state === 'granted') {
       this.set$({
         videoHidden: false,
-        shotBtnDisabled: false,
+        cameraHidden: false,
+        tabCameraHidden: false,
         messageHidden: true,
+        timerHidden: true,
+
+        currentIcon,
+        audioToggleMicorphoneHidden: !visibleAudio,
+        audioSelectHidden: !visibleAudio,
       });
     } else if (state === 'prompt') {
       this.$.l10nMessage = 'camera-permissions-prompt';
+
       this.set$({
         videoHidden: true,
-        shotBtnDisabled: true,
+        cameraHidden: true,
+        tabCameraHidden: true,
         messageHidden: false,
       });
+
       this._stopCapture();
     } else {
       this.$.l10nMessage = 'camera-permissions-denied';
 
       this.set$({
         videoHidden: true,
-        shotBtnDisabled: true,
         messageHidden: false,
+
+        tabCameraHidden: false,
+        tabVideoHidden: !this.cfg.enableVideoRecording,
+
+        cameraActionsHidden: true,
+
+        mutableClassButton: 'uc-shot-btn uc-camera-action',
       });
+
       this._stopCapture();
     }
   }, 300);
 
-  /** @private */
-  async _subscribePermissions() {
-    try {
-      // @ts-ignore
-      let permissionsResponse = await navigator.permissions.query({ name: 'camera' });
-      permissionsResponse.addEventListener('change', this._handlePermissionsChange);
-    } catch (err) {
-      console.log('Failed to use permissions API. Fallback to manual request mode.', err);
-      this._capture();
+  _makeStreamInactive = () => {
+    if (!this._stream) return false;
+
+    const audioTracks = this._stream?.getAudioTracks();
+    const videoTracks = this._stream?.getVideoTracks();
+
+    /** @type {MediaStreamTrack[]} */ (audioTracks).forEach((track) => track.stop());
+    /** @type {MediaStreamTrack[]} */ (videoTracks).forEach((track) => track.stop());
+  };
+
+  _stopCapture = () => {
+    if (this._capturing) {
+      this.ref.video.volume = 0;
+      this.$.video?.getTracks()[0].stop();
+      this.$.video = null;
+
+      this._makeStreamInactive();
+
+      this._capturing = false;
     }
-  }
+  };
 
-  /** @private */
-  async _capture() {
-    let constr = {
-      video: {
-        width: {
-          ideal: 1920,
-        },
-        height: {
-          ideal: 1080,
-        },
-        frameRate: {
-          ideal: 30,
-        },
-      },
-      audio: false,
+  _capture = async () => {
+    const constraints = {
+      video: DEFAULT_VIDEO_CONFIG,
+      audio: this.cfg.enableAudioRecording ? {} : false,
     };
+
     if (this._selectedCameraId) {
-      constr.video.deviceId = {
-        exact: this._selectedCameraId,
+      constraints.video = {
+        deviceId: {
+          exact: this._selectedCameraId,
+        },
       };
     }
-    /** @private */
-    this._canvas = document.createElement('canvas');
-    /** @private */
-    this._ctx = this._canvas.getContext('2d');
+
+    if (this._selectedAudioId && this.cfg.enableAudioRecording) {
+      constraints.audio = {
+        deviceId: {
+          exact: this._selectedAudioId,
+        },
+      };
+    }
+
+    // Mute the video to prevent feedback for Firefox
+    this.ref.video.volume = 0;
 
     try {
       this._setPermissionsState('prompt');
-      let stream = await navigator.mediaDevices.getUserMedia(constr);
-      stream.addEventListener('inactive', () => {
+      this._stream = await navigator.mediaDevices.getUserMedia(constraints);
+
+      this._stream.addEventListener('inactive', () => {
         this._setPermissionsState('denied');
       });
-      this.$.video = stream;
+
+      this.$.video = this._stream;
       /** @private */
       this._capturing = true;
       this._setPermissionsState('granted');
-    } catch (err) {
+    } catch (error) {
       this._setPermissionsState('denied');
-      console.error('Failed to capture camera', err);
+      console.log('Failed to capture camera', error);
     }
-  }
+  };
 
-  /** @private */
-  _stopCapture() {
-    if (this._capturing) {
-      this.$.video?.getTracks()[0].stop();
-      this.$.video = null;
-      this._capturing = false;
+  _handlePermissionsChange = () => {
+    this._capture();
+  };
+
+  _permissionAccess = async () => {
+    try {
+      for (const permission of DEFAULT_PERMISSIONS) {
+        // @ts-ignore  https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API
+        this[`${permission}Response`] = await navigator.permissions.query({ name: permission });
+
+        this[`${permission}Response`].addEventListener('change', this._handlePermissionsChange);
+      }
+    } catch (error) {
+      console.log('Failed to use permissions API. Fallback to manual request mode.', error);
+      this._capture();
     }
-  }
+  };
 
-  /** @private */
-  _shot() {
-    this._canvas.height = this.ref.video['videoHeight'];
-    this._canvas.width = this.ref.video['videoWidth'];
-    // @ts-ignore
-    this._ctx.drawImage(this.ref.video, 0, 0);
-    const date = Date.now();
-    const name = `camera-${date}.jpeg`;
-    const format = 'image/jpeg';
-    this._canvas.toBlob((blob) => {
-      let file = new File([blob], name, {
-        lastModified: date,
-        type: format,
-      });
-      this.api.addFileFromObject(file, { source: UploadSource.CAMERA });
-      this.set$({
-        '*currentActivity': ActivityBlock.activities.UPLOAD_LIST,
-      });
-    }, format);
-  }
+  _getPermission = () => {};
+
+  _requestDeviceAccess = async () => {
+    try {
+      await navigator.mediaDevices.getUserMedia({ video: true, audio: this.cfg.enableAudioRecording });
+      await this._getDevices();
+
+      navigator.mediaDevices.addEventListener('devicechange', this._getDevices);
+    } catch (error) {
+      console.log('Failed to get user media', error);
+    }
+  };
+
+  _getDevices = async () => {
+    try {
+      const devices = await navigator.mediaDevices.enumerateDevices();
+
+      this.cameraDevices = devices
+        .filter((device) => device.kind === 'videoinput')
+        .map((device, index) => ({
+          text: device.label.trim() || `${this.l10n('caption-camera')} ${index + 1}`,
+          value: device.deviceId,
+        }));
+
+      this.audioDevices =
+        this.cfg.enableAudioRecording &&
+        devices
+          .filter((device) => device.kind === 'audioinput')
+          .map((device) => ({
+            text: device.label.trim(),
+            value: device.deviceId,
+          }));
+
+      if (this.cameraDevices.length > 1) {
+        this.set$({
+          cameraSelectOptions: this.cameraDevices,
+          cameraSelectHidden: false,
+        });
+      }
+      this._selectedCameraId = this.cameraDevices[0]?.value;
+
+      if (this.audioDevices.length > 1) {
+        this.set$({
+          audioSelectOptions: this.audioDevices,
+          audioSelectHidden: false,
+        });
+      }
+      this._selectedAudioId = this.audioDevices[0]?.value;
+    } catch (error) {
+      console.log('Failed to get devices', error);
+    }
+  };
+
+  _onActivate = async () => {
+    await this._permissionAccess();
+    await this._requestDeviceAccess();
+    await this._capture();
+  };
+
+  _onDeactivate = async () => {
+    if (this._unsubPermissions) {
+      this._unsubPermissions();
+    }
 
-  async initCallback() {
+    /** Calling this method here because safari and firefox don't support the inactive event yet */
+    const isChromium = !!window.chrome;
+    if (!isChromium) {
+      this._setPermissionsState('denied');
+    }
+
+    this._stopCapture();
+  };
+
+  initCallback() {
     super.initCallback();
     this.registerActivity(this.activityType, {
       onActivate: this._onActivate,
@@ -189,30 +788,58 @@ export class CameraSource extends UploaderBlock {
       this.$.videoTransformCss = val ? 'scaleX(-1)' : null;
     });
 
-    try {
-      let deviceList = await navigator.mediaDevices.enumerateDevices();
-      let cameraSelectOptions = deviceList
-        .filter((info) => {
-          return info.kind === 'videoinput';
-        })
-        .map((info, idx) => {
-          return {
-            text: info.label.trim() || `${this.l10n('caption-camera')} ${idx + 1}`,
-            value: info.deviceId,
-          };
-        });
-      if (cameraSelectOptions.length > 1) {
-        this.$.cameraSelectOptions = cameraSelectOptions;
-        this.$.cameraSelectHidden = false;
+    this.subConfigValue('enableAudioRecording', (val) => {
+      this.$.audioToggleMicorphoneHidden = !val;
+      this.$.audioSelectDisabled = !val;
+    });
+
+    this.subConfigValue('enableVideoRecording', (val) => {
+      this.$.tabVideoHidden = !val;
+    });
+
+    this.subConfigValue('defaultCameraTab', (val) => {
+      if (this.cfg.enableVideoRecording) {
+        this._handleActiveTab(val);
+        return;
       }
-      this._selectedCameraId = cameraSelectOptions[0]?.value;
-    } catch (err) {
-      // mediaDevices isn't available for HTTP
-      // TODO: handle this case
+
+      this._handleActiveTab('photo');
+    });
+  }
+
+  _destroy() {
+    for (const permission of DEFAULT_PERMISSIONS) {
+      this[`${permission}Response`].removeEventListener('change', this._handlePermissionsChange);
     }
+
+    navigator.mediaDevices.removeEventListener('devicechange', this._getDevices);
+  }
+
+  async destroyCallback() {
+    super.destroyCallback();
+
+    this._destroy();
   }
 }
 
+CameraSource.types = Object.freeze({
+  PHOTO: 'photo',
+  VIDEO: 'video',
+});
+
+CameraSource.events = Object.freeze({
+  IDLE: 'idle',
+  SHOT: 'shot',
+
+  PLAY: 'play',
+  PAUSE: 'pause',
+  RESUME: 'resume',
+  STOP: 'stop',
+
+  RETAKE: 'retake',
+  ACCEPT: 'accept',
+});
+
 CameraSource.template = /* HTML */ `
   <uc-activity-header>
     <button type="button" class="uc-mini-btn" set="onclick: *historyBack" l10n="@title:back">
@@ -238,6 +865,7 @@ CameraSource.template = /* HTML */ `
   </uc-activity-header>
   <div class="uc-content">
     <video
+      muted
       autoplay
       playsinline
       set="srcObject: video; style.transform: videoTransformCss; @hidden: videoHidden"
@@ -251,8 +879,57 @@ CameraSource.template = /* HTML */ `
         l10n="camera-permissions-request"
       ></button>
     </div>
-    <button type="button" class="uc-shot-btn" set="onclick: onShot; @disabled: shotBtnDisabled">
-      <uc-icon name="camera"></uc-icon>
+  </div>
+
+  <div class="uc-controls">
+    <div ref="switcher" class="uc-switcher" set="@hidden:!timerHidden">
+      <button
+        data-id="photo"
+        type="button"
+        class="uc-switch uc-mini-btn"
+        set="onclick: onClickTab;  @hidden: tabCameraHidden"
+      >
+        <uc-icon name="camera"></uc-icon>
+      </button>
+      <button
+        data-id="video"
+        type="button"
+        class="uc-switch  uc-mini-btn"
+        set="onclick: onClickTab; @hidden: tabVideoHidden"
+      >
+        <uc-icon name="video-camera"></uc-icon>
+      </button>
+    </div>
+
+    <button class="uc-secondary-btn uc-recording-timer" set="@hidden:timerHidden; onclick: onToggleRecording">
+      <uc-icon set="@name: currentTimelineIcon"></uc-icon>
+      <span ref="timer"> 00:00 </span>
+      <span ref="line" class="uc-line"></span>
     </button>
+
+    <div class="uc-camera-actions uc-camera-action" set="@hidden: cameraActionsHidden">
+      <button type="button" class="uc-secondary-btn" set="onclick: onRetake">Retake</button>
+      <button type="button" class="uc-primary-btn" set="onclick: onAccept">Accept</button>
+    </div>
+
+    <button
+      type="button"
+      class="uc-shot-btn uc-camera-action"
+      set="onclick: onStartCamera; @class: mutableClassButton; @hidden: cameraHidden;"
+    >
+      <uc-icon set="@name: currentIcon"></uc-icon>
+    </button>
+
+    <div class="uc-select">
+      <button class="uc-mini-btn uc-btn-microphone" set="onclick: onToggleAudio; @hidden: audioToggleMicorphoneHidden;">
+        <uc-icon set="@name:toggleMicorphoneIcon"></uc-icon>
+      </button>
+
+      <uc-select
+        class="uc-audio-select"
+        set="$.options: audioSelectOptions; onchange: onAudioSelectChange; @hidden: audioSelectHidden; @disabled: audioSelectDisabled"
+      >
+      </uc-select>
+    </div>
   </div>
 `;