feat: camera widget (#8069)
* feat: Camera Widget
-- Scaffold the basic structure of the widget
* feat: Camera Widget
-- Prototype a feature, taking picture
* feat: Camera Widget
-- Add types for MediaRecorder
-- Define media capture status and action types
-- Prototype basic video recording, playing features
* feat: Camera Widget
-- Implement video player
-- Add timer for recording and playing video
-- Add permission and error handling logic
-- Add device selectors
* feat: Camera Widget
-- Place control buttons above device inputs layer
-- Make the widget fully responsive
* feat: Camera Widget
-- Change the color of caret-down icon to white
-- Remove overlaying of web cam and video player
-- Add some padding for device inputs
* feat: Camera Widget
-- Add black background to the container of the widget
* feat: Camera Widget
-- Change the widget icon
* feat: Camera Widget
-- Implement the mute feature of a mic or a camera
* feat: Camera Widget
-- Check media device permissions before getting started
* feat: Camera Widget
-- Add a fullscreen control
* feat: Camera Widget
-- Set error text color to white
-- Change the layout of control panel
* feat: Camera Widget
-- Apply layout change for control panel according to app layout change
* feat: Camera Widget
-- Add a new derived property, videoURL
* feat: Switch Group Widget
-- Adopt theme changes
* feat: Camera Widget
-- Make background grey in case of both error and disabled status
* feat: Camera Widget
-- Update npm dependencies
* feat: Camera Widget
-- Fix on #8788, using muted property
* feat: Camera Widget
-- Show off the microphone setting icon only if the current mode is video
-- Set isMirrored property to true by default
* feat: Camera Widget
-- Add photo viewer
* feat: Camera Widget
-- Add onImageCapture, onRecordingStart, onRecordingStop actions instead of onMediaCapture
* feat: Camera Widget
-- Expose meta properties for the widget
* feat: Camera Widget
-- Fix on responsiveness issue
* feat: Camera Widget
-- Add type definitions for MediaStream recording
* feat: Camera Widget
-- Hide isMirroed property for video mode
* feat: Camera Widget
-- Wrap all the controls with TooltipComponent
* feat: Camera Widget
-- Implement enter, exit full screen feature
* feat: Camera Widget
-- Add a widget icon for entity explorer
* feat: Camera Widget
-- Fix on the typo for the label of onRecordingStop property
* feat: Camera Widget
-- Enable/disable media tracks
* feat: Camera Widget
-- Set the video's height to 100% in fullscreen mode
* feat: Camera Widget
-- Add overlayers on Webcam
* feat: Camera Widget
-- Set position to relative on fullscreen wrapper div
-- Set the photo viewer's height to 100%
* feat: Camera Widget
-- Add image, mediaCaptureStatus, timer meta properties to keep UI states when the widget is dragged
* feat: Camera Widget
-- Refactor code base, eliminating commented code blocks
* feat: Camera Widget
-- Revert all the changes needed for keeping status when the widget is dragged
-- Set mirroed property to false for video mode
2021-12-24 14:06:59 +00:00
|
|
|
import { CameraModeTypes } from "./constants";
|
2022-01-21 10:19:10 +00:00
|
|
|
import IconSVG from "./icon.svg";
|
|
|
|
|
import Widget from "./widget";
|
feat: camera widget (#8069)
* feat: Camera Widget
-- Scaffold the basic structure of the widget
* feat: Camera Widget
-- Prototype a feature, taking picture
* feat: Camera Widget
-- Add types for MediaRecorder
-- Define media capture status and action types
-- Prototype basic video recording, playing features
* feat: Camera Widget
-- Implement video player
-- Add timer for recording and playing video
-- Add permission and error handling logic
-- Add device selectors
* feat: Camera Widget
-- Place control buttons above device inputs layer
-- Make the widget fully responsive
* feat: Camera Widget
-- Change the color of caret-down icon to white
-- Remove overlaying of web cam and video player
-- Add some padding for device inputs
* feat: Camera Widget
-- Add black background to the container of the widget
* feat: Camera Widget
-- Change the widget icon
* feat: Camera Widget
-- Implement the mute feature of a mic or a camera
* feat: Camera Widget
-- Check media device permissions before getting started
* feat: Camera Widget
-- Add a fullscreen control
* feat: Camera Widget
-- Set error text color to white
-- Change the layout of control panel
* feat: Camera Widget
-- Apply layout change for control panel according to app layout change
* feat: Camera Widget
-- Add a new derived property, videoURL
* feat: Switch Group Widget
-- Adopt theme changes
* feat: Camera Widget
-- Make background grey in case of both error and disabled status
* feat: Camera Widget
-- Update npm dependencies
* feat: Camera Widget
-- Fix on #8788, using muted property
* feat: Camera Widget
-- Show off the microphone setting icon only if the current mode is video
-- Set isMirrored property to true by default
* feat: Camera Widget
-- Add photo viewer
* feat: Camera Widget
-- Add onImageCapture, onRecordingStart, onRecordingStop actions instead of onMediaCapture
* feat: Camera Widget
-- Expose meta properties for the widget
* feat: Camera Widget
-- Fix on responsiveness issue
* feat: Camera Widget
-- Add type definitions for MediaStream recording
* feat: Camera Widget
-- Hide isMirroed property for video mode
* feat: Camera Widget
-- Wrap all the controls with TooltipComponent
* feat: Camera Widget
-- Implement enter, exit full screen feature
* feat: Camera Widget
-- Add a widget icon for entity explorer
* feat: Camera Widget
-- Fix on the typo for the label of onRecordingStop property
* feat: Camera Widget
-- Enable/disable media tracks
* feat: Camera Widget
-- Set the video's height to 100% in fullscreen mode
* feat: Camera Widget
-- Add overlayers on Webcam
* feat: Camera Widget
-- Set position to relative on fullscreen wrapper div
-- Set the photo viewer's height to 100%
* feat: Camera Widget
-- Add image, mediaCaptureStatus, timer meta properties to keep UI states when the widget is dragged
* feat: Camera Widget
-- Refactor code base, eliminating commented code blocks
* feat: Camera Widget
-- Revert all the changes needed for keeping status when the widget is dragged
-- Set mirroed property to false for video mode
2021-12-24 14:06:59 +00:00
|
|
|
|
|
|
|
|
export const CONFIG = {
|
|
|
|
|
type: Widget.getWidgetType(),
|
|
|
|
|
name: "Camera", // The display name which will be made in uppercase and show in the widgets panel ( can have spaces )
|
|
|
|
|
iconSVG: IconSVG,
|
|
|
|
|
needsMeta: true, // Defines if this widget adds any meta properties
|
|
|
|
|
isCanvas: false, // Defines if this widget has a canvas within in which we can drop other widgets
|
2022-06-17 03:12:47 +00:00
|
|
|
searchTags: ["photo", "video recorder"],
|
feat: camera widget (#8069)
* feat: Camera Widget
-- Scaffold the basic structure of the widget
* feat: Camera Widget
-- Prototype a feature, taking picture
* feat: Camera Widget
-- Add types for MediaRecorder
-- Define media capture status and action types
-- Prototype basic video recording, playing features
* feat: Camera Widget
-- Implement video player
-- Add timer for recording and playing video
-- Add permission and error handling logic
-- Add device selectors
* feat: Camera Widget
-- Place control buttons above device inputs layer
-- Make the widget fully responsive
* feat: Camera Widget
-- Change the color of caret-down icon to white
-- Remove overlaying of web cam and video player
-- Add some padding for device inputs
* feat: Camera Widget
-- Add black background to the container of the widget
* feat: Camera Widget
-- Change the widget icon
* feat: Camera Widget
-- Implement the mute feature of a mic or a camera
* feat: Camera Widget
-- Check media device permissions before getting started
* feat: Camera Widget
-- Add a fullscreen control
* feat: Camera Widget
-- Set error text color to white
-- Change the layout of control panel
* feat: Camera Widget
-- Apply layout change for control panel according to app layout change
* feat: Camera Widget
-- Add a new derived property, videoURL
* feat: Switch Group Widget
-- Adopt theme changes
* feat: Camera Widget
-- Make background grey in case of both error and disabled status
* feat: Camera Widget
-- Update npm dependencies
* feat: Camera Widget
-- Fix on #8788, using muted property
* feat: Camera Widget
-- Show off the microphone setting icon only if the current mode is video
-- Set isMirrored property to true by default
* feat: Camera Widget
-- Add photo viewer
* feat: Camera Widget
-- Add onImageCapture, onRecordingStart, onRecordingStop actions instead of onMediaCapture
* feat: Camera Widget
-- Expose meta properties for the widget
* feat: Camera Widget
-- Fix on responsiveness issue
* feat: Camera Widget
-- Add type definitions for MediaStream recording
* feat: Camera Widget
-- Hide isMirroed property for video mode
* feat: Camera Widget
-- Wrap all the controls with TooltipComponent
* feat: Camera Widget
-- Implement enter, exit full screen feature
* feat: Camera Widget
-- Add a widget icon for entity explorer
* feat: Camera Widget
-- Fix on the typo for the label of onRecordingStop property
* feat: Camera Widget
-- Enable/disable media tracks
* feat: Camera Widget
-- Set the video's height to 100% in fullscreen mode
* feat: Camera Widget
-- Add overlayers on Webcam
* feat: Camera Widget
-- Set position to relative on fullscreen wrapper div
-- Set the photo viewer's height to 100%
* feat: Camera Widget
-- Add image, mediaCaptureStatus, timer meta properties to keep UI states when the widget is dragged
* feat: Camera Widget
-- Refactor code base, eliminating commented code blocks
* feat: Camera Widget
-- Revert all the changes needed for keeping status when the widget is dragged
-- Set mirroed property to false for video mode
2021-12-24 14:06:59 +00:00
|
|
|
defaults: {
|
|
|
|
|
widgetName: "Camera",
|
2022-01-21 10:19:10 +00:00
|
|
|
rows: 33,
|
|
|
|
|
columns: 25,
|
feat: camera widget (#8069)
* feat: Camera Widget
-- Scaffold the basic structure of the widget
* feat: Camera Widget
-- Prototype a feature, taking picture
* feat: Camera Widget
-- Add types for MediaRecorder
-- Define media capture status and action types
-- Prototype basic video recording, playing features
* feat: Camera Widget
-- Implement video player
-- Add timer for recording and playing video
-- Add permission and error handling logic
-- Add device selectors
* feat: Camera Widget
-- Place control buttons above device inputs layer
-- Make the widget fully responsive
* feat: Camera Widget
-- Change the color of caret-down icon to white
-- Remove overlaying of web cam and video player
-- Add some padding for device inputs
* feat: Camera Widget
-- Add black background to the container of the widget
* feat: Camera Widget
-- Change the widget icon
* feat: Camera Widget
-- Implement the mute feature of a mic or a camera
* feat: Camera Widget
-- Check media device permissions before getting started
* feat: Camera Widget
-- Add a fullscreen control
* feat: Camera Widget
-- Set error text color to white
-- Change the layout of control panel
* feat: Camera Widget
-- Apply layout change for control panel according to app layout change
* feat: Camera Widget
-- Add a new derived property, videoURL
* feat: Switch Group Widget
-- Adopt theme changes
* feat: Camera Widget
-- Make background grey in case of both error and disabled status
* feat: Camera Widget
-- Update npm dependencies
* feat: Camera Widget
-- Fix on #8788, using muted property
* feat: Camera Widget
-- Show off the microphone setting icon only if the current mode is video
-- Set isMirrored property to true by default
* feat: Camera Widget
-- Add photo viewer
* feat: Camera Widget
-- Add onImageCapture, onRecordingStart, onRecordingStop actions instead of onMediaCapture
* feat: Camera Widget
-- Expose meta properties for the widget
* feat: Camera Widget
-- Fix on responsiveness issue
* feat: Camera Widget
-- Add type definitions for MediaStream recording
* feat: Camera Widget
-- Hide isMirroed property for video mode
* feat: Camera Widget
-- Wrap all the controls with TooltipComponent
* feat: Camera Widget
-- Implement enter, exit full screen feature
* feat: Camera Widget
-- Add a widget icon for entity explorer
* feat: Camera Widget
-- Fix on the typo for the label of onRecordingStop property
* feat: Camera Widget
-- Enable/disable media tracks
* feat: Camera Widget
-- Set the video's height to 100% in fullscreen mode
* feat: Camera Widget
-- Add overlayers on Webcam
* feat: Camera Widget
-- Set position to relative on fullscreen wrapper div
-- Set the photo viewer's height to 100%
* feat: Camera Widget
-- Add image, mediaCaptureStatus, timer meta properties to keep UI states when the widget is dragged
* feat: Camera Widget
-- Refactor code base, eliminating commented code blocks
* feat: Camera Widget
-- Revert all the changes needed for keeping status when the widget is dragged
-- Set mirroed property to false for video mode
2021-12-24 14:06:59 +00:00
|
|
|
mode: CameraModeTypes.CAMERA,
|
|
|
|
|
isDisabled: false,
|
|
|
|
|
isVisible: true,
|
|
|
|
|
isMirrored: true,
|
|
|
|
|
version: 1,
|
|
|
|
|
},
|
|
|
|
|
properties: {
|
|
|
|
|
derived: Widget.getDerivedPropertiesMap(),
|
|
|
|
|
default: Widget.getDefaultPropertiesMap(),
|
|
|
|
|
meta: Widget.getMetaPropertiesMap(),
|
|
|
|
|
config: Widget.getPropertyPaneConfig(),
|
2022-08-09 13:05:36 +00:00
|
|
|
contentConfig: Widget.getPropertyPaneContentConfig(),
|
|
|
|
|
styleConfig: Widget.getPropertyPaneStyleConfig(),
|
feat: camera widget (#8069)
* feat: Camera Widget
-- Scaffold the basic structure of the widget
* feat: Camera Widget
-- Prototype a feature, taking picture
* feat: Camera Widget
-- Add types for MediaRecorder
-- Define media capture status and action types
-- Prototype basic video recording, playing features
* feat: Camera Widget
-- Implement video player
-- Add timer for recording and playing video
-- Add permission and error handling logic
-- Add device selectors
* feat: Camera Widget
-- Place control buttons above device inputs layer
-- Make the widget fully responsive
* feat: Camera Widget
-- Change the color of caret-down icon to white
-- Remove overlaying of web cam and video player
-- Add some padding for device inputs
* feat: Camera Widget
-- Add black background to the container of the widget
* feat: Camera Widget
-- Change the widget icon
* feat: Camera Widget
-- Implement the mute feature of a mic or a camera
* feat: Camera Widget
-- Check media device permissions before getting started
* feat: Camera Widget
-- Add a fullscreen control
* feat: Camera Widget
-- Set error text color to white
-- Change the layout of control panel
* feat: Camera Widget
-- Apply layout change for control panel according to app layout change
* feat: Camera Widget
-- Add a new derived property, videoURL
* feat: Switch Group Widget
-- Adopt theme changes
* feat: Camera Widget
-- Make background grey in case of both error and disabled status
* feat: Camera Widget
-- Update npm dependencies
* feat: Camera Widget
-- Fix on #8788, using muted property
* feat: Camera Widget
-- Show off the microphone setting icon only if the current mode is video
-- Set isMirrored property to true by default
* feat: Camera Widget
-- Add photo viewer
* feat: Camera Widget
-- Add onImageCapture, onRecordingStart, onRecordingStop actions instead of onMediaCapture
* feat: Camera Widget
-- Expose meta properties for the widget
* feat: Camera Widget
-- Fix on responsiveness issue
* feat: Camera Widget
-- Add type definitions for MediaStream recording
* feat: Camera Widget
-- Hide isMirroed property for video mode
* feat: Camera Widget
-- Wrap all the controls with TooltipComponent
* feat: Camera Widget
-- Implement enter, exit full screen feature
* feat: Camera Widget
-- Add a widget icon for entity explorer
* feat: Camera Widget
-- Fix on the typo for the label of onRecordingStop property
* feat: Camera Widget
-- Enable/disable media tracks
* feat: Camera Widget
-- Set the video's height to 100% in fullscreen mode
* feat: Camera Widget
-- Add overlayers on Webcam
* feat: Camera Widget
-- Set position to relative on fullscreen wrapper div
-- Set the photo viewer's height to 100%
* feat: Camera Widget
-- Add image, mediaCaptureStatus, timer meta properties to keep UI states when the widget is dragged
* feat: Camera Widget
-- Refactor code base, eliminating commented code blocks
* feat: Camera Widget
-- Revert all the changes needed for keeping status when the widget is dragged
-- Set mirroed property to false for video mode
2021-12-24 14:06:59 +00:00
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default Widget;
|