@scaleflex/widget-webcam 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 scaleflex
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,189 @@
+# `@scaleflex/widget-webcam`
+
+[![Plugins][plugins-image]](#plugins)
+[![Website][filerobot-image]][sfx-url]
+[![Version][filerobot-version]][version-url]
+[![Scaleflex team][made-by-image]][sfx-url]
+[![License][license-image]][license-url]
+[![CodeSandbox][codeSandbox-image]][codeSandbox-url]
+
+
+<div align='center'>
+<img title="Scaleflex Widget logo" alt="Scaleflex Widget logo" src="https://cdn.scaleflex.com/plugins/filerobot-widget/assets/filerobot_widget_logo_with_fire.png?vh=b2ff09" width="140"/>
+</div>
+
+The webcam plugin for [Scaleflex Media Asset Widget](https://www.npmjs.com/package/@scaleflex/widget-core) gives the possibility to take a photo and record video from the built-in camera and process them for uploading directly.
+
+## Usage
+
+### NPM
+
+```bash
+npm install --save @scaleflex/widget-webcam
+```
+
+### YARN
+
+```bash
+yarn add @scaleflex/widget-webcam
+```
+
+then
+
+```js
+import Webcam from '@scaleflex/widget-webcam'
+...
+...
+...
+scaleflexWidget.use(Webcam, propertiesObject)
+```
+
+### CDN
+
+The plugin from CDN is found inside `Scaleflex` global object `Scaleflex.Webcam`
+
+```js
+const Webcam = window.ScaleflexWidget.Webcam
+...
+...
+...
+scaleflexWidget.use(Webcam, propertiesObject)
+```
+
+### Plugin's styles
+
+```js
+import '@scaleflex/widget-core/dist/style.css'
+import '@scaleflex/widget-webcam/dist/style.css'
+```
+
+or if you prefer the minified version
+
+```js
+import '@scaleflex/widget-core/dist/style.min.css'
+import '@scaleflex/widget-webcam/dist/style.min.css'
+```
+
+> The plugin's css file should be imported after the [Core's css file](../@scaleflex/widget-core/#modules-styles) for having the styles shown correctly.
+
+
+## Properties
+
+### `title`
+
+<u>Type:</u> `string`.
+
+<u>Default:</u> `'Camera'`
+
+The title shown in the top bar of the panel.
+
+### `countdown: `
+
+<u>Type:</u> `number`.
+
+<u>Default:</u> `0/false`
+
+When capturing a photo, wait the amount of this countdown in seconds and then capture the photo with showing an informer message with the seconds left & Smile text when countdown is passed.
+
+### `modes`
+
+<u>Type:</u> `array`.
+
+<u>Default:</u> `all modes allowed`
+
+The modes allowed for the user:
+  - `video-audio`: Records a video file including the audio.
+  - `video-only`: Records a video file excluding audio.
+  - `audio-only`: Records audio only but no video.
+  - `picture`: Takes a photo from the camera.
+
+### `mirror`
+
+<u>Type:</u> `boolean`.
+
+<u>Default:</u> `true`
+
+Defines if you need to mirror the (preview image) or not.
+
+### `facingMode`
+
+<u>Type:</u> `string`.
+
+<u>Default:</u> `'user'`
+
+`In case device has multiple cameras this option gives the possibility to choose which one should be used:
+  - `user`: The video source is facing toward the user; this includes, for example, the front-facing camera on a smartphone.
+  - `environment`: The video source is facing away from the user, thereby viewing their environment. This is the back camera on a smartphone.
+  - `left`: The video source is facing toward the user but to their left, such as a camera aimed toward the user but over their left shoulder.
+  - `right`: The video source is facing toward the user but to their right, such as a camera aimed toward the user but over their right shoulder.
+
+### `preferredImageMimeType`
+
+<u>Type:</u> `string`.
+
+<u>Default:</u> `'image/jpeg'`
+
+Defines the captured image mime type ex. `image/png` if not defined or defined some un-supported mime type from the browser then `image/jpeg` would be used.
+
+### `preferredVideoMimeType`
+
+<u>Type:</u> `string`.
+
+<u>Default:</u> `null`
+
+The mime type for the recorded video to be saved with if you provided un-supported mime type then the browser's default would be used, if you left it `null` then if found any suitable type inside [`allowedFileTypes`](../core/README.md/#restrictions) it would be used.
+
+### `showRecordingLength`
+
+<u>Type:</u> `boolean`.
+
+<u>Default:</u> `true`
+
+Whether to show the video's recording length or not while it is in progress.
+
+### `isRecordIconHidden`
+
+<u>Type:</u> `boolean`.
+
+<u>Default:</u> `false`
+
+If set to `true`, the record button in webcam will be disabled preventing users from recording videos.
+
+### `locale`
+
+<u>Type:</u> `object`.
+
+<u>Default:</u>
+
+```js
+strings: {
+  smile: 'Smile!',
+  takePicture: 'Take a picture',
+  startRecording: 'Begin video recording',
+  stopRecording: 'Stop video recording',
+  allowAccessTitle: 'Please allow access to your camera',
+  allowAccessDescription: 'In order to take pictures or record video with your camera, please allow camera access for this site.',
+  noCameraTitle: 'Camera Not Available',
+  noCameraDescription: 'In order to take pictures or record video, please connect a camera device',
+  recordingStoppedMaxSize: 'Recording stopped because the file size is about to exceed the limit',
+  recordingLength: 'Recording length %{recording_length}'
+}
+```
+
+Customizing some of the translations or the language's strings and replace the default locale.
+
+<!-- Variables -->
+
+[npm-url]: https://www.npmjs.com/package/@scaleflex/widget-webcam
+[license-url]: https://opensource.org/licenses/MIT
+[sfx-url]: https://www.scaleflex.com/
+[version-url]: https://www.npmjs.com/package/@scaleflex/widget-webcam
+[codeSandbox-url]: https://codesandbox.io/s/filerobot-widget-v3-c5l9th
+
+[npm-image]: https://img.shields.io/npm/v/@telus/remark-config.svg?style=for-the-badge&logo=npm
+[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge
+[made-by-image]: https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg?style=for-the-badge
+[plugins-image]: https://img.shields.io/static/v1?label=Scaleflex&message=Plugins&color=yellow&style=for-the-badge
+[filerobot-image]: https://img.shields.io/static/v1?label=Scaleflex&message=website&color=orange&style=for-the-badge
+[filerobot-version]: https://img.shields.io/npm/v/@scaleflex/widget-webcam?label=Version&style=for-the-badge&logo=npm
+[codeSandbox-image]: https://img.shields.io/badge/CodeSandbox-black?style=for-the-badge&logo=CodeSandbox

package/lib/CameraScreen.js

@@ -0,0 +1,86 @@
+import { useEffect, useRef } from 'react';
+import { Photos, Video2 } from '@scaleflex/icons';
+import formatSeconds from '@scaleflex/widget-utils/lib/formatSeconds';
+import Styled from './Webcam.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function isModeAvailable(modes, mode) {
+  return modes.indexOf(mode) !== -1;
+}
+var CameraScreen = function CameraScreen(_ref) {
+  var showRecordingLength = _ref.showRecordingLength,
+    supportsRecording = _ref.supportsRecording,
+    modes = _ref.modes,
+    src = _ref.src,
+    mirror = _ref.mirror,
+    isRecording = _ref.isRecording,
+    recordingLengthSeconds = _ref.recordingLengthSeconds,
+    _ref$onSnapshot = _ref.onSnapshot,
+    onSnapshot = _ref$onSnapshot === void 0 ? function () {} : _ref$onSnapshot,
+    _ref$onFocus = _ref.onFocus,
+    onFocus = _ref$onFocus === void 0 ? function () {} : _ref$onFocus,
+    _ref$onStop = _ref.onStop,
+    onStop = _ref$onStop === void 0 ? function () {} : _ref$onStop,
+    _ref$onStartRecording = _ref.onStartRecording,
+    onStartRecording = _ref$onStartRecording === void 0 ? function () {} : _ref$onStartRecording,
+    _ref$onStopRecording = _ref.onStopRecording,
+    onStopRecording = _ref$onStopRecording === void 0 ? function () {} : _ref$onStopRecording,
+    isRecordIconHidden = _ref.isRecordIconHidden;
+  var videoElement = useRef();
+  var formattedRecordingLengthSeconds = formatSeconds(recordingLengthSeconds);
+  var shouldShowRecordButton = supportsRecording && !isRecordIconHidden && (isModeAvailable(modes, 'video-only') || isModeAvailable(modes, 'audio-only') || isModeAvailable(modes, 'video-audio'));
+  var shouldShowSnapshotButton = isModeAvailable(modes, 'picture');
+  var shouldShowRecordingLength = supportsRecording && showRecordingLength && isRecording;
+  useEffect(function () {
+    onFocus();
+    return function () {
+      onStop();
+    };
+  }, []);
+  useEffect(function () {
+    if (videoElement !== null && videoElement !== void 0 && videoElement.current) {
+      videoElement.current.srcObject = src;
+    }
+  }, [src]);
+  var renderRecordingButton = function renderRecordingButton() {
+    if (isRecording) {
+      return /*#__PURE__*/_jsx(Styled.StopRecodingButton, {
+        onClick: onStopRecording,
+        children: /*#__PURE__*/_jsx(Styled.StopRecordingIcon, {})
+      });
+    }
+    return /*#__PURE__*/_jsx(Styled.IconButton, {
+      color: "primary",
+      onClick: onStartRecording,
+      children: /*#__PURE__*/_jsx(Video2, {
+        size: 26
+      })
+    });
+  };
+  return /*#__PURE__*/_jsxs(Styled.WebcamContainer, {
+    className: "filerobot filerobot-Webcam-container",
+    children: [/*#__PURE__*/_jsx(Styled.VideoContainer, {
+      className: "filerobot-Webcam-videoContainer",
+      children: /*#__PURE__*/_jsx(Styled.Video, {
+        ref: videoElement,
+        mirror: mirror,
+        autoPlay: true,
+        className: "filerobot-Webcam-video",
+        muted: true,
+        playsInline: true
+      })
+    }), /*#__PURE__*/_jsxs(Styled.ButtonsContainer, {
+      className: "filerobot-Webcam-buttonContainer",
+      children: [shouldShowRecordingLength && /*#__PURE__*/_jsxs(Styled.RecordingLengthContainer, {
+        children: [/*#__PURE__*/_jsx(Styled.RecordingIcon, {}), formattedRecordingLengthSeconds || '00:00']
+      }), shouldShowSnapshotButton && /*#__PURE__*/_jsx(Styled.IconButton, {
+        color: "primary",
+        onClick: onSnapshot,
+        hidden: isRecording,
+        children: /*#__PURE__*/_jsx(Photos, {
+          size: 26
+        })
+      }), shouldShowRecordButton && renderRecordingButton()]
+    })]
+  });
+};
+export default CameraScreen;

package/lib/PermissionsScreen.js

@@ -0,0 +1,26 @@
+import { CameraNotAvailable, CameraNoAccess } from '@scaleflex/icons';
+import Styled from './Webcam.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var PermissionsScreen = function PermissionsScreen(_ref) {
+  var hasCamera = _ref.hasCamera,
+    i18n = _ref.i18n;
+  return /*#__PURE__*/_jsxs(Styled.PermissonsWrapper, {
+    className: "filerobot-Webcam-permissons",
+    children: [/*#__PURE__*/_jsx(Styled.IconWrapper, {
+      children: hasCamera ? /*#__PURE__*/_jsx(CameraNotAvailable, {
+        className: "filerobot-Webcam-permissonsIcon",
+        size: 100
+      }) : /*#__PURE__*/_jsx(CameraNoAccess, {
+        className: "filerobot-Webcam-permissonsIcon",
+        size: 100
+      })
+    }), /*#__PURE__*/_jsx(Styled.Title, {
+      className: "filerobot-Webcam-title",
+      children: hasCamera ? i18n('webcamAllowAccessTitle') : i18n('webcamNoCameraAvailableText')
+    }), /*#__PURE__*/_jsx(Styled.Description, {
+      className: "filerobot-Webcam-description",
+      children: hasCamera ? i18n('webcamAllowAccessDescriptionText') : i18n('webcamNoCameraDescriptionText')
+    })]
+  });
+};
+export default PermissionsScreen;

package/lib/Webcam.styled.js

@@ -0,0 +1,78 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled, { keyframes, css } from 'styled-components';
+import { IconButton as SfxIconButton } from '@scaleflex/ui/core';
+import { FV, PC } from '@scaleflex/widget-common';
+var pluseKeyframes = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: scale(0.95);\n    box-shadow: 0 0 0 0 rgba(246, 61, 61, 0.7);\n  }\n\n  70% {\n    transform: scale(1);\n    box-shadow: 0 0 0 10px rgba(246, 61, 61, 0);\n  }\n\n  100% {\n    transform: scale(0.95);\n    box-shadow: 0 0 0 0 rgba(246, 61, 61, 0);\n  }\n"])));
+var PulseAnimation = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  animation: ", " 2s infinite;\n"])), pluseKeyframes);
+var WebcamContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  position: relative;\n"])));
+var VideoContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  flex: 1;\n  flex-grow: 1;\n  overflow: hidden;\n  position: relative;\n  padding: 24px;\n  background-color: ", ";\n"])), function (_ref) {
+  var palette = _ref.theme.palette;
+  return palette[PC.BackgroundActive];
+});
+var Video = styled.video(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  max-width: calc(100% - 48px);\n  max-height: calc(100% - 48px);\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  margin: auto;\n  transform: ", ";\n"])), function (_ref2) {
+  var mirror = _ref2.mirror;
+  return mirror ? 'scaleX(-1)' : 'scaleX  (1)';
+});
+var ButtonsContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  height: 100px;\n  padding: 24px 32px;\n  column-gap: 12px;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  border-top: 1px solid ", ";\n"])), function (_ref3) {
+  var palette = _ref3.theme.palette;
+  return palette[PC.BordersSecondary];
+});
+var IconButton = styled(SfxIconButton)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 52px;\n  height: 52px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  padding: 0;\n  transition: all 300ms ease-in-out;\n"])));
+var StopRecodingButton = styled(IconButton)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  border: 0;\n  background-color: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_ref4) {
+  var palette = _ref4.theme.palette;
+  return palette[PC.Error];
+}, function (_ref5) {
+  var palette = _ref5.theme.palette;
+  return palette[PC.ErrorHover];
+});
+var StopRecordingIcon = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 17.88px;\n  height: 17.88px;\n  border-radius: 2px;\n  background-color: ", ";\n"])), function (_ref6) {
+  var palette = _ref6.theme.palette;
+  return palette[PC.BackgroundSecondary];
+});
+var RecordingIcon = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  width: 14px;\n  height: 14px;\n  background-color: ", ";\n  border-radius: 50%;\n  ", "\n"])), function (_ref7) {
+  var palette = _ref7.theme.palette;
+  return palette[PC.Error];
+}, PulseAnimation);
+var PermissonsWrapper = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  padding: 0 32px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  row-gap: 8px;\n"])));
+var IconWrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  width: 100px;\n  height: 100px;\n  color: ", ";\n"])), function (_ref8) {
+  var palette = _ref8.theme.palette;
+  return palette[PC.BackgroundPrimaryStateless];
+});
+var Title = styled.p(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  margin: 0;\n  font-size: 24px;\n  color: ", ";\n  ", ";\n"])), function (_ref9) {
+  var palette = _ref9.theme.palette;
+  return palette[PC.TextPrimary];
+}, function (_ref10) {
+  var typography = _ref10.theme.typography;
+  return typography.font[FV.LabelExtraLarge];
+});
+var Description = styled.p(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  margin: 0;\n  width: 408px;\n  text-align: center;\n  ", ";\n  color: ", ";\n"])), function (_ref11) {
+  var typography = _ref11.theme.typography;
+  return typography.font[FV.TextLarge];
+}, function (_ref12) {
+  var palette = _ref12.theme.palette;
+  return palette[PC.TextSecondary];
+});
+var RecordingLengthContainer = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 124px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10;\n  color: ", ";\n  background-color: ", ";\n  border-radius: 4%;\n  padding: 12px 16px;\n  display: flex;\n  align-items: center;\n  column-gap: 12px;\n  font-size: 24px;\n  line-height: 28px;\n  font-weight: 500;\n  min-width: 119px;\n  height: 52px;\n"])), function (_ref13) {
+  var palette = _ref13.theme.palette;
+  return palette[PC.ButtonPrimaryText];
+}, function (_ref14) {
+  var palette = _ref14.theme.palette;
+  return palette[PC.Extra_0_9_Overlay];
+});
+var Styled = {
+  WebcamContainer: WebcamContainer,
+  VideoContainer: VideoContainer,
+  Video: Video,
+  ButtonsContainer: ButtonsContainer,
+  IconButton: IconButton,
+  PermissonsWrapper: PermissonsWrapper,
+  IconWrapper: IconWrapper,
+  Title: Title,
+  Description: Description,
+  StopRecodingButton: StopRecodingButton,
+  StopRecordingIcon: StopRecordingIcon,
+  RecordingIcon: RecordingIcon,
+  RecordingLengthContainer: RecordingLengthContainer
+};
+export default Styled;

package/lib/common.slice.js

@@ -0,0 +1,30 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { createSlice } from '@reduxjs/toolkit';
+import { PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
+var initialState = {
+  cameraReady: false,
+  hasCamera: null,
+  cameraError: null,
+  recordingLengthSeconds: 0,
+  isRecording: false
+};
+var commonSlice = createSlice({
+  name: PLUGINS_IDS.WEBCAM,
+  initialState: initialState,
+  reducers: {
+    webcamCommonStateUpdated: function webcamCommonStateUpdated(state, action) {
+      return _objectSpread(_objectSpread({}, state), action.payload);
+    }
+  }
+});
+var webcamCommonStateUpdated = commonSlice.actions.webcamCommonStateUpdated;
+export { webcamCommonStateUpdated };
+export var selectWebcamCommonState = function selectWebcamCommonState(state) {
+  return state[PLUGINS_IDS.WEBCAM];
+};
+export default commonSlice.reducer;

package/lib/defaultLocale.js

@@ -0,0 +1,13 @@
+export default {
+  webcamSmileInfo: 'Smile!',
+  webcamTakePictureTitle: 'Take a picture',
+  webcamStartRecordingTitle: 'Begin video recording',
+  webcamStopRecordingTitle: 'Stop video recording',
+  webcamAllowAccessTitle: 'Please allow access to your camera',
+  webcamAllowAccessDescriptionText: 'In order to take pictures or record video with your camera, please allow camera access for this site.',
+  webcamNoCameraAvailableText: 'Camera Not Available',
+  webcamNoCameraDescriptionText: 'In order to take pictures or record video, please connect a camera device',
+  webcamRecordingStoppedMaxSizeInfo: 'Recording stopped because the file size is about to exceed the limit',
+  webcamRecordingLengthLabel: 'Recording length %{recording_length}',
+  webcamWaitFewSecsAndTryInfo: 'Preparing camera, please wait few seconds and click record again'
+};