Как автоматически открыть камеру

Чтобы захватить изображение с мобильного устройства с помощью кода React js, я использую следующий код

 <input type = "file" accept = "image/*" capture onChange = {this.loadFile}/>

Этот входной тег зависит от переменных состояния при реагировании. Когда входной тег будет отрисован, сначала он попросит пользователя нажать кнопку «выбрать файл», а затем откроет камеру. Итак, можем ли мы открыть камеру напрямую, чтобы кнопка «Выбрать файл» не появлялась, а непосредственно при изменении значений состояния камера открывалась? Функция обработчика loadFile: -

loadFile = (event: any) => {
    var reader = new FileReader();
    reader.onload = function() {
      output: HTMLImageElement;
      var output = document.getElementById("output");
      output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
    // console.info(event.target.files[0]);
    this.setState({
      activeCameraToggle: 0,
      photo1: event.target.files[0]
    });
  };

Поделитесь, пожалуйста, кодом вашей функции обработчика?

Hemadri Dasari 17.09.2018 12:05

обновил вопрос

rockz 17.09.2018 12:06

Измените accept с "image/*" на "image/*;capture=camera".

JediBurrell 17.09.2018 12:10

не сработало @JediBurrell, я хочу, чтобы кнопка "выбрать файл" не появлялась, а камера открывалась напрямую

rockz 17.09.2018 12:15

Я бы возненавидел, если бы вы могли открыть камеру без моего согласия!

Poul Bak 17.09.2018 12:19

@PoulBak Вы не можете, пользователю придется щелкнуть элемент input, чтобы открыть его.

JediBurrell 17.09.2018 12:23

@JeriBurrell, ну, тогда вы ответили на вопрос ОП.

Poul Bak 17.09.2018 12:25

@rockz Оказывается, предыдущий метод больше не работает, и решение, которое предлагает W3, заключается в использовании MediaStream API. Это гораздо более тяжелое решение, которое экономит пользователю всего один клик. Почему именно вы хотите пропустить подсказку?

JediBurrell 17.09.2018 12:30

подробно расскажите о своей функции

Vaibhav S 17.09.2018 12:54
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
9
383
1

Ответы 1

Проверьте эту библиотеку:

https://github.com/react-community/react-native-image-picker

После добавления в свой проект сделайте следующее:

// Launch Camera:
ImagePicker.launchCamera(options, (response)  => {
 // Same code as in above section!
});

Это проект React Native? Похоже, речь идет о веб-React.

stef 17.09.2018 18:10

Другие вопросы по теме