| <!doctype html> |
| <!-- Copyright 2019 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. --> |
| <html> |
| <head> |
| <title>$i18n{name}</title> |
| <meta charset="utf-8"> |
| <!-- main.css contains all :root styles require to be loaded first. --> |
| <link rel="stylesheet" href="/css/main.css"> |
| <link rel="stylesheet" href="/css/focus_ring.css"> |
| <link rel="stylesheet" href="/css/inkdrop.css"> |
| <link rel="stylesheet" href="/css/ptz_panel.css"> |
| <link rel="stylesheet" href="/css/ptz_toast.css"> |
| <link rel="stylesheet" href="/css/ripple.css"> |
| <script src="/js/mojo/mojo_bindings_lite.js"></script> |
| <script src="/js/mojo/time.mojom-lite.js"></script> |
| <script src="/js/mojo/camera_metadata_tags.mojom-lite.js"></script> |
| <script src="/js/mojo/camera_metadata.mojom-lite.js"></script> |
| <script src="/js/mojo/camera_common.mojom-lite.js"></script> |
| <script src="/js/mojo/image_capture.mojom-lite.js"></script> |
| <script src="/js/mojo/geometry.mojom-lite.js"></script> |
| <script src="/js/mojo/range.mojom-lite.js"></script> |
| <script src="/js/mojo/camera_intent.mojom-lite.js"></script> |
| <script src="/js/mojo/camera_app.mojom-lite.js"></script> |
| <script src="/js/mojo/camera_app_helper.mojom-lite.js"></script> |
| <script type="module" src="/js/init.js"></script> |
| </head> |
| <body class="sound mirror mic grid-3x3 view-splash"> |
| <div id="view-camera"> |
| <div id="preview-box"> |
| <div id="preview-viewport"> |
| <img id="review-photo-result" class="preview-content" |
| aria-hidden="true"> |
| <video id="review-video-result" class="preview-content"></video> |
| <div class="buttons circle centered-overlay"> |
| <button id="play-result-video" tabindex="0" |
| i18n-label="play_result_video_button"></button> |
| </div> |
| <video id="preview-video" class="preview-content"></video> |
| <div id="expert-controls"> |
| <div id="preview-info" class="expert-control-row metadata-row |
| mode-on"> |
| <span class="title">Info</span> |
| <div id="preview-resolution" class="metadata value"></div> |
| <div id="preview-device-name" class="metadata value"></div> |
| </div> |
| <div id="preview-stat" class="expert-control-row metadata-row |
| mode-on"> |
| <span class="title">Stat</span> |
| <div id="preview-fps" class="metadata value"></div> |
| <div id="preview-num-faces" class="metadata value"></div> |
| </div> |
| <div id="preview-af" class="expert-control-row metadata-row"> |
| <span class="title">AF</span> |
| <div id="preview-focus-distance" class="metadata value"></div> |
| <div id="preview-af-state" class="metadata value"></div> |
| </div> |
| <div id="preview-ae" class="expert-control-row metadata-row"> |
| <span class="title">AE</span> |
| <div id="preview-sensitivity" class="metadata value"></div> |
| <div id="preview-exposure-time" class="metadata value"></div> |
| <div id="preview-frame-duration" class="metadata value"></div> |
| <div id="preview-ae-antibanding-mode" class="metadata value"> |
| </div> |
| <div id="preview-ae-state" class="metadata value"></div> |
| </div> |
| <div id="preview-awb" class="expert-control-row metadata-row"> |
| <span class="title">AWB</span> |
| <div id="preview-wb-gain-red" class="metadata value"></div> |
| <div id="preview-wb-gain-blue" class="metadata value"></div> |
| <div id="preview-awb-state" class="metadata value"></div> |
| </div> |
| <div class="video-option-row expert-control-row"> |
| <span class="title">Profile</span> |
| <select id="video-profile" tabindex="0"> |
| <!-- Generate in runtime --> |
| </select> |
| </div> |
| <div id="bitrate-slider" class="video-option-row |
| expert-control-row"> |
| <span class="title">Bitrate</span> |
| <input type="range" min="1" tabindex="0"> |
| <div id="bitrate-multiplier" class="value"></div> |
| <div id="bitrate-number" class="value"></div> |
| </div> |
| </div> |
| <canvas id="preview-face-overlay" class="preview-content"></canvas> |
| <div id="preview-grid"> |
| <div id="preview-grid-horizontal"></div> |
| <div id="preview-grid-vertical"></div> |
| </div> |
| <div id="preview-focus"> |
| <object id="preview-focus-aim" type="image/svg+xml" |
| data="/images/camera_focus_aim.svg" |
| tabindex="-1" hidden></object> |
| </div> |
| <div class="barcode-scan-box centered-overlay"></div> |
| <div class="snackbar" aria-live="polite"></div> |
| <div id="camera-mode" class="centered-overlay"></div> |
| </div> |
| <div id="barcode-chip-url-container" |
| class="invisible barcode-chip-container"> |
| <div class="barcode-chip-url"> |
| <a target="_blank"></a> |
| </div> |
| <div class="circle"> |
| <button class="barcode-copy-button" tabindex="0" |
| i18n-label="barcode_copy_link_button"></button> |
| </div> |
| </div> |
| <div id="barcode-chip-text-container" |
| class="invisible barcode-chip-container" |
| role="dialog" i18n-label="barcode_text_detected" |
| aria-live="polite" aria-describedby="barcode-chip-text-content"> |
| <div class="barcode-chip-text"> |
| <div id="barcode-chip-text-content"></div> |
| <button id="barcode-chip-text-expand" |
| aria-expanded="false"></button> |
| </div> |
| <div class="circle"> |
| <button class="barcode-copy-button" tabindex="0" |
| i18n-label="barcode_copy_text_button"></button> |
| </div> |
| </div> |
| </div> |
| <div id="video-snapshot-holder" class="buttons right-stripe circle"> |
| <button id="video-snapshot" tabindex="0" |
| i18n-label="take_video_snapshot_button"></button> |
| </div> |
| <div id="shutters-group" class="buttons right-stripe circle"> |
| <button id="recordvideo" class="shutter" tabindex="0" |
| i18n-label="record_video_start_button"> |
| <div class="red-dot"></div> |
| <div class="white-square"></div> |
| </button> |
| <button id="start-takephoto" class="shutter" tabindex="0" |
| i18n-label="take_photo_button"></button> |
| <button id="stop-takephoto" class="shutter" tabindex="0" |
| i18n-label="take_photo_cancel_button"></button> |
| </div> |
| <div id="pause-recordvideo-holder" class="buttons right-stripe circle"> |
| <button id="pause-recordvideo" tabindex="0" |
| i18n-label="record_video_pause_button"> |
| <div class="red-dot"></div> |
| <div class="two-bars"></div> |
| </button> |
| </div> |
| <div class="bottom-stripe right-stripe buttons circle"> |
| <button id="gallery-enter" tabindex="0" |
| i18n-label="gallery_button" hidden></button> |
| </div> |
| <div id="mode-selector" class="bottom-stripe"> |
| <div id="modes-group" class="buttons"> |
| <div class="mode-item"> |
| <input type="radio" name="mode" |
| data-mode="video" tabindex="0" |
| i18n-aria="switch_record_video_button"> |
| <span i18n-text="label_switch_record_video_button" |
| aria-hidden="true"></span> |
| </div> |
| <div class="mode-item"> |
| <input type="radio" name="mode" |
| data-mode="photo" tabindex="0" |
| i18n-aria="switch_take_photo_button"> |
| <span i18n-text="label_switch_take_photo_button" |
| aria-hidden="true"></span> |
| </div> |
| <div class="mode-item"> |
| <input type="radio" name="mode" |
| data-mode="square" tabindex="0" |
| i18n-aria="switch_take_square_photo_button"> |
| <span i18n-text="label_switch_take_square_photo_button" |
| aria-hidden="true"></span> |
| </div> |
| <div class="mode-item"> |
| <input type="radio" name="mode" |
| data-mode="portrait" tabindex="0" |
| i18n-aria="switch_take_portrait_bokeh_photo_button"> |
| <span i18n-text="label_switch_take_portrait_bokeh_photo_button" |
| aria-hidden="true"></span> |
| </div> |
| </div> |
| </div> |
| <div id="banner" class="horizontal-center-stripe" aria-live="polite"> |
| <div id="banner-title"> |
| <div id="banner-title-icon"></div> |
| <span id="banner-title-text" i18n-text="banner_title"></span> |
| </div> |
| <div id="banner-msg"> |
| <span i18n-text="banner_msg"></span> |
| </div> |
| <button id="banner-close" i18n-label="banner_close_button"></button> |
| </div> |
| <div id="confirm-result-groups" class="buttons right-stripe circle"> |
| <button id="confirm-result" tabindex="0" |
| i18n-label="confirm_review_button"></button> |
| <button id="cancel-result" tabindex="0" |
| i18n-label="cancel_review_button"></button> |
| </div> |
| <div class="bottom-stripe left-stripe buttons circle"> |
| <button id="switch-device" tabindex="0" |
| i18n-label="switch_camera_button"></button> |
| </div> |
| <div id="ptz-toast" class="hidden" i18n-aria="label_new_control_toast" |
| tabindex="0"> |
| <span i18n-text="new_control_toast" aria-hidden="true"></span> |
| </div> |
| |
| <div id="options-group" class="left-stripe buttons"> |
| <button id="open-ptz-panel" tabindex="0" aria-haspopup="true" |
| i18n-label="open_ptz_panel_button"> |
| <div class="ripple"></div> |
| <div class="ripple ripple-2nd"></div> |
| <div class="ripple ripple-3rd"></div> |
| </button> |
| <input type="checkbox" id="toggle-timer" tabindex="0" |
| data-state="timer" data-key="toggleTimer"> |
| <input type="checkbox" id="toggle-grid" tabindex="0" |
| i18n-label="toggle_grid_button" data-state="grid" |
| data-key="toggleGrid"> |
| <input type="checkbox" id="toggle-mirror" tabindex="0" |
| i18n-label="toggle_mirror_button" data-state="mirror" checked> |
| <input type="checkbox" id="toggle-fps" tabindex="0" |
| i18n-label="toggle_60fps_button" |
| i18n-tooltip-true="label_60fps" |
| i18n-tooltip-false="label_30fps"> |
| </div> |
| <div class="top-stripe left-stripe buttons"> |
| <button id="open-settings" tabindex="0" |
| i18n-label="settings_button" aria-haspopup="true"></button> |
| </div> |
| <div id="record-time" class="top-stripe horizontal-center-stripe" hidden> |
| <div class="icon"></div> |
| <div id="paused-msg" i18n-text="record_video_paused_msg"></div> |
| <div id="record-time-msg"></div> |
| </div> |
| <div class="top-stripe right-stripe buttons"> |
| <input id="toggle-mic" type="checkbox" tabindex="0" |
| i18n-label="toggle_mic_button" data-state="mic" |
| data-key="toggleMic" checked> |
| </div> |
| <div class="top-stripe right-stripe circle buttons"> |
| <input id="toggle-barcode" type="checkbox" |
| tabindex="0" i18n-label="toggle_barcode_button"> |
| </div> |
| <div class="centered-overlay"> |
| <div id="timer-tick-msg"></div> |
| </div> |
| </div> |
| <div id="view-ptz-panel"> |
| <div id="ptz-panel"> |
| <div id="reset-all-container"> |
| <button id="ptz-reset-all" class="inkdrop" tabindex="0"> |
| <div class="icon"></div> |
| <div class="text" i18n-text="ptz_reset_all_button"></div> |
| </button> |
| </div> |
| <div id="panel-container"> |
| <button id="tilt-up" class="inkdrop" i18n-label="tilt_up_button" |
| tabindex="0"></button> |
| <button id="pan-right" class="inkdrop" i18n-label="pan_right_button" |
| tabindex="0"></button> |
| <button id="tilt-down" class="inkdrop" i18n-label="tilt_down_button" |
| tabindex="0"></button> |
| <button id="pan-left" class="inkdrop" i18n-label="pan_left_button" |
| tabindex="0"></button> |
| <button id="zoom-in" class="inkdrop" i18n-label="zoom_in_button" |
| tabindex="0"></button> |
| <button id="zoom-out" class="inkdrop" i18n-label="zoom_out_button" |
| tabindex="0"></button> |
| <div id="ptz-divider1" class="ptz-divider"></div> |
| <div id="ptz-divider2" class="ptz-divider"></div> |
| <div id="ptz-divider3" class="ptz-divider"></div> |
| <div id="ptz-divider4" class="ptz-divider"></div> |
| <div id="ptz-zoom-divider" class="ptz-divider"></div> |
| </div> |
| </div> |
| </div> |
| <div id="view-settings"> |
| <div class="menu"> |
| <div class="menu-header circle"> |
| <button class="icon" tabindex="0" i18n-aria="back_button"></button> |
| <div id="settings-header" i18n-text="settings_button"></div> |
| </div> |
| <button id="settings-gridtype" class="menu-item inkdrop" tabindex="0" |
| aria-describedby="gridtype-desc"> |
| <div class="icon"></div> |
| <div> |
| <div i18n-text="grid_type_button"></div> |
| <div id="gridtype-desc" class="description" aria-hidden="true"> |
| <span i18n-text="label_grid_3x3" i18n-aria="aria_grid_3x3"></span> |
| <span i18n-text="label_grid_4x4" i18n-aria="aria_grid_4x4"></span> |
| <span i18n-text="label_grid_golden"></span> |
| </div> |
| </div> |
| <div class="icon end"></div> |
| </button> |
| <button id="settings-timerdur" class="menu-item inkdrop" tabindex="0" |
| aria-describedby="timerdur-desc"> |
| <div class="icon"></div> |
| <div> |
| <div i18n-text="timer_duration_button"></div> |
| <div id="timerdur-desc" class="description" aria-hidden="true"> |
| <span i18n-text="label_timer_3s"></span> |
| <span i18n-text="label_timer_10s"></span> |
| </div> |
| </div> |
| <div class="icon end"></div> |
| </button> |
| <button id="settings-resolution" class="menu-item inkdrop" tabindex="0"> |
| <div class="icon"></div> |
| <div i18n-text="camera_resolution_button"> |
| </div> |
| <div class="icon end"></div> |
| </button> |
| <button id="settings-expert" class="menu-item inkdrop" tabindex="0"> |
| <div class="icon"></div> |
| <div i18n-text="expert_mode_button"> |
| </div> |
| <div class="icon end"></div> |
| </button> |
| <button id="settings-feedback" class="menu-item inkdrop" tabindex="0"> |
| <div class="icon"></div> |
| <div i18n-text="feedback_button"></div> |
| </button> |
| <button id="settings-help" class="menu-item inkdrop" tabindex="0"> |
| <div class="icon"></div> |
| <div i18n-text="help_button"></div> |
| </button> |
| </div> |
| </div> |
| <div id="view-grid-settings"> |
| <div class="menu"> |
| <div class="menu-header circle"> |
| <button class="icon" tabindex="0" i18n-aria="back_button"></button> |
| <div i18n-text="grid_type_button"></div> |
| </div> |
| <label class="menu-item circle inkdrop"> |
| <input id="grid-3x3" class="icon" type="radio" tabindex="0" |
| name="gridtype" data-state="grid-3x3" data-key="toggle3x3" |
| checked> |
| <span i18n-text="label_grid_3x3" i18n-aria="aria_grid_3x3"></span> |
| </label> |
| <label class="menu-item circle inkdrop"> |
| <input id="grid-4x4" class="icon" type="radio" tabindex="0" |
| name="gridtype" data-state="grid-4x4" data-key="toggle4x4"> |
| <span i18n-text="label_grid_4x4" i18n-aria="aria_grid_4x4"></span> |
| </label> |
| <label class="menu-item circle inkdrop"> |
| <input id="grid-golden" class="icon" type="radio" tabindex="0" |
| name="gridtype" data-state="grid-golden" |
| data-key="toggleGolden"> |
| <span i18n-text="label_grid_golden"></span> |
| </label> |
| </div> |
| </div> |
| <div id="view-timer-settings"> |
| <div class="menu"> |
| <div class="menu-header circle"> |
| <button class="icon" tabindex="0" i18n-aria="back_button"></button> |
| <div i18n-text="timer_duration_button"></div> |
| </div> |
| <label class="menu-item circle inkdrop"> |
| <input id="timer-3s" class="icon" type="radio" tabindex="0" |
| name="timerdur" data-state="timer-3s" data-key="toggle3sec" |
| checked> |
| <span i18n-text="label_timer_3s"></span> |
| </label> |
| <label class="menu-item circle inkdrop"> |
| <input id="timer-10s" class="icon" type="radio" tabindex="0" |
| name="timerdur" data-state="timer-10s" data-key="toggle10sec"> |
| <span i18n-text="label_timer_10s"></span> |
| </label> |
| </div> |
| </div> |
| <div id="view-resolution-settings"> |
| <div class="menu"> |
| <div class="menu-header circle"> |
| <button class="icon" tabindex="0" i18n-aria="back_button"></button> |
| <div i18n-text="camera_resolution_button"></div> |
| </div> |
| <div id="builtin-photo-header" class="menu-item" |
| i18n-text="label_switch_take_photo_button"></div> |
| <button id="settings-front-photores" |
| class="menu-item resol-item photo-item inkdrop" tabindex="0" |
| aria-describedby="front-photores-desc"> |
| <div> |
| <div i18n-text="label_front_camera"></div> |
| <div id="front-photores-desc" class="description" |
| aria-hidden="true"> |
| <span></span> |
| </div> |
| </div> |
| <div class="icon end"></div> |
| </button> |
| <button id="settings-back-photores" |
| class="menu-item resol-item photo-item inkdrop" tabindex="0" |
| aria-describedby="back-photores-desc"> |
| <div> |
| <div i18n-text="label_back_camera"></div> |
| <div id="back-photores-desc" class="description" aria-hidden="true"> |
| <span></span> |
| </div> |
| </div> |
| <div class="icon end"></div> |
| </button> |
| <div id="builtin-video-header" class="menu-item" |
| i18n-text="label_switch_record_video_button"></div> |
| <button id="settings-front-videores" |
| class="menu-item resol-item video-item inkdrop" tabindex="0" |
| aria-describedby="front-videores-desc"> |
| <div> |
| <div i18n-text="label_front_camera"></div> |
| <div id="front-videores-desc" class="description" |
| aria-hidden="true"> |
| <span></span> |
| </div> |
| </div> |
| <div class="icon end"></div> |
| </button> |
| <button id="settings-back-videores" |
| class="menu-item resol-item video-item inkdrop" tabindex="0" |
| aria-describedby="back-videores-desc"> |
| <div> |
| <div i18n-text="label_back_camera"></div> |
| <div id="back-videores-desc" class="description" aria-hidden="true"> |
| <span></span> |
| </div> |
| </div> |
| <div class="icon end"></div> |
| </button> |
| </div> |
| </div> |
| <div id="view-photo-resolution-settings"> |
| <div class="menu" data-name="photores"> |
| <div class="menu-header circle"> |
| <button class="icon" tabindex="0" i18n-aria="back_button"></button> |
| <div i18n-text="photo_resolution_button"></div> |
| </div> |
| </div> |
| </div> |
| <div id="view-video-resolution-settings"> |
| <div class="menu" data-name="videores"> |
| <div class="menu-header circle"> |
| <button class="icon" tabindex="0" i18n-aria="back_button"></button> |
| <div i18n-text="video_resolution_button"></div> |
| </div> |
| </div> |
| </div> |
| <div id="view-expert-settings"> |
| <div class="menu"> |
| <div class="menu-header circle"> |
| <button class="icon" tabindex="0" i18n-aria="back_button"></button> |
| <div i18n-text="expert_mode_button"></div> |
| </div> |
| <label class="menu-item inkdrop"> |
| <input id="expert-show-metadata" class="icon" type="checkbox" |
| tabindex="0" data-state="show-metadata" |
| data-key="showMetadata"> |
| <span i18n-text="expert_preview_metadata"></span> |
| </label> |
| <label class="menu-item inkdrop"> |
| <input id="expert-save-metadata" class="icon" type="checkbox" |
| tabindex="0" data-state="save-metadata" |
| data-key="saveMetadata"> |
| <span i18n-text="expert_save_metadata"></span> |
| </label> |
| <label class="menu-item inkdrop"> |
| <input id="expert-print-performance-logs" class="icon" type="checkbox" |
| tabindex="0" data-state="print-performance-logs" |
| data-key="printPerformanceLogs"> |
| <span i18n-text="expert_print_performance_logs"></span> |
| </label> |
| <label class="menu-item inkdrop"> |
| <input class="icon" id="custom-video-parameters" |
| type="checkbox" tabindex="0" |
| data-state="custom-video-parameters" |
| data-key="customVideoParameters"> |
| <span i18n-text="expert_custom_video_parameters"></span> |
| </label> |
| <label id="expert-enable-document-mode-on-all-cameras-item" |
| class="menu-item"> |
| <input class="icon" id="expert-enable-document-mode-on-all-cameras" |
| type="checkbox" tabindex="0" |
| data-state="enable-document-mode-on-all-cameras" |
| data-key="enableDocumentModeOnAllCameras"> |
| <span i18n-text="expert_enable_document_mode_on_all_cameras"></span> |
| </label> |
| <label class="menu-item inkdrop"> |
| <input class="icon" type="checkbox" tabindex="0" |
| data-state="enable-multistream-recording" |
| data-key="enableMultistreamRecording"> |
| <span i18n-text="expert_multistream_recording"></span> |
| </label> |
| <label class="menu-item inkdrop"> |
| <input id="expert-enable-expert-mode" class="icon" type="checkbox" |
| tabindex="0" data-state="expert" |
| data-key="expert"> |
| <span i18n-text="expert_enable_expert_mode"></span> |
| </label> |
| </div> |
| </div> |
| <div id="spinner" class="centered-overlay"></div> |
| <div id="view-splash"></div> |
| <div id="view-warning"> |
| <div id="error-msg" aria-live="polite"></div> |
| </div> |
| <div id="view-message-dialog" class="dialog"> |
| <div class="dialog-popup" role="dialog" aria-labelledby="dialog-msg"> |
| <div class="dialog-msg dialog-msg-holder"></div> |
| <div class="dialog-buttons"> |
| <button class="dialog-negative-button" tabindex="0" |
| i18n-text="dialog_cancel_button"></button> |
| <button class="dialog-positive-button" tabindex="0" |
| i18n-text="dialog_ok_button"></button> |
| </div> |
| </div> |
| </div> |
| <div id="toast" class="centered-overlay" aria-live="polite"></div> |
| <div id="focus-ring"></div> |
| <div id="tooltip" aria-hidden="true"></div> |
| <audio id="sound-tick-final" src="/sounds/tick_final.ogg"> |
| <audio id="sound-tick-inc" src="/sounds/tick_inc.ogg"> |
| <audio id="sound-tick-start" src="/sounds/tick_start.ogg"> |
| <audio id="sound-shutter" src="/sounds/shutter.ogg"> |
| <audio id="sound-rec-start" src="/sounds/record_start.ogg"> |
| <audio id="sound-rec-end" src="/sounds/record_end.ogg"> |
| <audio id="sound-rec-pause" src="/sounds/record_pause.ogg"> |
| <template id="preview-video-template"> |
| <video id="preview-video" class="preview-content" aria-hidden="true" |
| muted></video> |
| </template> |
| <template id="resolution-item-template"> |
| <label class="menu-item circle resolution-option inkdrop"> |
| <input class="icon" type="radio" tabindex="0"> |
| <span></span> |
| </label> |
| </template> |
| <template id="extcam-resolution-item-template"> |
| <div class="menu-item external-camera title-item" |
| i18n-text="label_external_camera"></div> |
| <button class="menu-item external-camera resol-item photo-item inkdrop" |
| tabindex="0"> |
| <div> |
| <div i18n-text="photo_resolution_button"></div> |
| <div class="description" aria-hidden="true"> |
| <span></span> |
| </div> |
| </div> |
| <div class="icon end"></div> |
| </button> |
| <button class="menu-item external-camera resol-item video-item inkdrop" |
| tabindex="0"> |
| <div> |
| <div i18n-text="video_resolution_button"></div> |
| <div class="description" aria-hidden="true"> |
| <span></span> |
| </div> |
| </div> |
| <div class="icon end"></div> |
| </button> |
| </template> |
| <template id="video-profile-option-template"> |
| <option></option> |
| </template> |
| <template id="inkdrop-template"> |
| <div class="inkdrop-ripple"></div> |
| </template> |
| </body> |
| </html> |