Как включить фронтальную камеру в Phonegap

Открытие веб-камеры на веб-сайте с использованием HTML5 и Js со следующим кодом.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="headBoxingStyle.css"/>
  </head>
  <body style="overflow: hidden">
    <div id="headtrack"></div>
    <canvas id='canvas' width='100' height='100'></canvas>
    <video width="100" height="100"></video>
  </body>
</html>

<script type="text/javascript">
var onFailSoHard = function(e)
{
    console.log('failed',e);
}

window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia ||  navigator.webkitGetUserMedia;

var video = document.querySelector('video');

if(navigator.getUserMedia)
{
  navigator.getUserMedia({video: true},function(stream) {
    video.src = window.URL.createObjectURL(stream);
  }, onFailSoHard);
}

document.getElementById('snapshot').onclick = function() { 
  var canvas = document.getElementById('canvas'); 
  var ctx = canvas.getContext('2d'); 
  ctx.drawImage(video,0,0); 
} 
</script>

Но как открыть переднюю камеру устройства через Phonegap. Никаких снимков или видеозаписывающих устройств не будет, а просто отобразится вид с передней камеры. На данный момент установлен плагин камеры Phonegap, добавлены разрешения и протестирован пример кода на Phonegap, который работает нормально, но приведенный выше код показывает только символ воспроизведения, как на картинке.

Вот разрешения

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera"android:required="false" />
<uses-feature android:name="android.hardware.camera.front" android:required="false" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Изображение, отображаемое на устройстве с приведенным выше кодом

API PhoneGap версии 3.1.0


person user3210416    schedule 25.01.2015    source источник
comment
Какой плагин API вы используете? Захват или медиа?   -  person Purus    schedule 25.01.2015
comment
Телефонная щель версии 3.1.0   -  person Nic    schedule 25.01.2015


Ответы (4)


Согласно документации Phonegap, вы можете указать, какую камеру открывать, или предоставить кнопку для переключения между оборудование передней и задней камеры

navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );

здесь cameraOptions есть много атрибутов, но вам нужно направление камеры

 {cameraDirection:1}; 

Где

Camera.Direction = {
    BACK : 0,      // Use the back-facing camera
    FRONT : 1      // Use the front-facing camera
};
person Murtaza Khursheed Hussain    schedule 02.02.2015
comment
где вы инициализируете камеру? Это параметры, которые необходимо передать методу getPicture, чтобы открыть фронтальную камеру. - person Murtaza Khursheed Hussain; 08.02.2015
comment
Вы всегда можете написать свой собственный модуль для телефонной связи, и в большинстве случаев эта штука работает, поэтому она называется quirks. - person Murtaza Khursheed Hussain; 22.09.2016
comment
Приведенный выше код не работает на моем Samsung Galaxy S5. - person Kiran Muralee; 11.01.2017
comment
прошло два года с момента публикации ответа. конечно, они что-то изменили в SDK. - person Murtaza Khursheed Hussain; 12.01.2017

В Cordova (ранее PhoneGap) вы не можете получить изображение через navigator.getUserMedia (насколько мне известно, и я также не смог найти его в исходном коде JavaScript для плагинов камеры). Вместо этого вам нужно использовать API подключаемых модулей камеры. . При этом вы используете камеру для получения изображения следующим образом (из документации плагина)

navigator.camera.getPicture(onSuccess, onFail, { 
  destinationType: Camera.DestinationType.FILE_URI
  cameraDirection: Camera.Direction.FRONT // or Camera.Direction.BACK for back camera
});

function onSuccess(imageURI) {
  var image = document.getElementById('myImage');
  image.src = imageURI;
}

function onFail(message) {
  alert('Failed because: ' + message);
}

где параметр destinationType используется для определения того, вызывается ли обратный вызов успеха с данными в кодировке Base64 или с URI изображения. Как указано в разделе options вы можете выбрать направление камеры с помощью параметра cameraDirection, как показано в примере.

Однако вы должны заметить, что подключаемый модуль камеры указывает в своем особенности Android, которые

Любое значение cameraDirection приводит к фотографии, обращенной назад.

Так что, к сожалению, с этим плагином невозможно программно установить камеру как переднюю.

person Roope Hakulinen    schedule 05.02.2015
comment
Как бы вы реализовали это в приведенном выше коде? Не требуется запись изображения или видео, просто чтобы открыть переднюю камеру - person user3210416; 07.02.2015
comment
Я не согласен с этим. getusermedia отлично работает в IOS с помощью Cordova. Он также нормально работает на Android, предоставляя вам развертывание с пешеходным переходом. - person Lee Brindley; 16.08.2016
comment
@ Lee2808 Lee2808 Я не думаю, что вопрошающий использовал Crosswalk, а вопрос был об Android? Переход не используется по умолчанию, и в некоторых случаях он не подходит, поэтому его не следует использовать. - person Roope Hakulinen; 16.08.2016
comment
@RoopeHakulinen согласен, что не было упоминания о пешеходном переходе - лично я не вижу другого варианта использования, кроме необходимости запуска на (действительно) устройствах с низкими характеристиками, где вы бы его не использовали. Я сделал комментарий для будущих читателей: если они не хотят использовать плагин камеры на Android, то для Android есть работающая альтернатива. Моя формулировка была слишком сильной в ответ на ваш ответ! - person Lee Brindley; 16.08.2016

@RoopeHakulinen: я использовал getusermedia в приложениях Cordova для Android без использования Crosswalk. Мне также пришлось добавить следующее в мой config.xml, чтобы разрешения камеры работали.

 xmlns:android="http://schemas.android.com/apk/res/android" in the widget tag.

а потом

<config-file mode="merge" parent="/*" target="app/src/main/AndroidManifest.xml">
        <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
        <uses-permission android:name="android.permission.CAMERA" />
        <uses-feature android:name="android.hardware.camera" />
        <uses-feature android:name="android.hardware.camera.autofocus" />
        <uses-permission android:name="android.permission.RECORD_AUDIO" />           
</config-file>

Я также использовал плагин разрешений, чтобы авторизовать разрешение камеры в самом начале (при запуске) вместо того, чтобы запрашивать разрешение позже.

<plugin name="cordova-plugin-android-permissions" spec="^1.0.0" />
person Moinkhan    schedule 12.12.2019

  • Пункт списка

Установите это для ANDROID:

(in app/res/xml/config.xml)
<feature name="Camera">
    <param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
</feature>


(in app/AndroidManifest)
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, cameraDirection:1, destinationType:        destinationType.DATA_URL}); }
  • при успехе :function cameraCallback(imageData) { var image = document.getElementById('myImage'); image.src = "data:image/jpeg;base64," + imageData; }

  • Направление камеры:

    Camera.Direction = { BACK : 0, // Использовать заднюю камеру FRONT : 1 // Использовать переднюю камеру };

person Sachin G S    schedule 06.02.2015