Как получить доступ к камере изнутри webview в Titanium Appcelerator

Question

Я почти закончил разработку приложения HTML5 с помощью Appcelerator, и у меня есть одна функция, которую можно добавить, которая является функцией, позволяющей пользователю делать снимок при отправке клиент сообщение через приложение. На экране отображается конкретный div, который содержит форму сообщения, и я хотел бы, чтобы пользователь мог снимать фотографию со своего телефона и автоматически прикреплял ее к сообщению, которое затем отправляется на наш сервер.

Однако, после охоты вокруг, я в тупике, как заставить ее работать. Хотя API показывает Javascript, чтобы заставить камеру работать, я не могу получить доступ к ней, и я не знаю, где должен быть найден вызов API. Это происходит в файле app.js или в собственном файле, или это не имеет особого значения, где это называется? Любая помощь/совет будут оценены по этому поводу.

EDIT
Благодаря Dragon, я сделал следующие изменения в мой код:

index.html

 <div class="col-square"> 
      <a href="#" onclick="Ti.App.fireEvent('app:fromWebView');"><i class="fa fa-camera fa-squareBlock"></i><br />Take Photo</a> 
     </div> 

<script type="text/javascript"> 
    Ti.App.addEventListener("app:fromTitanium", function(e) { 
     alert(e.message); 
    }); 
</script> 

app.js

Ti.App.addEventListener('app:fromWebView', function(e){ 

    Titanium.Media.showCamera({ 

    success:function(event) 
    {  
     var image = event.media; 
     var file = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,"userImg.jpg"); 
     file.write(image); 
     var data = file.nativePath; 

     Ti.App.fireEvent('app:fromTitanium', {message: "photo taken fine"}); 

    }, 
    cancel:function() 
    { 
    }, 
    error:function(error) 
    { 
     var a = Titanium.UI.createAlertDialog({title:'Camera'}); 
     if (error.code == Titanium.Media.NO_CAMERA) 
     { 
     a.setMessage('Please run this test on device'); 
     } 
     else 
     { 
     a.setMessage('Unexpected error: ' + error.code); 
     } 
     a.show(); 
    }, 
    showControls:false, // don't show system controls 
    mediaTypes:Ti.Media.MEDIA_TYPE_PHOTO, 
    autohide:false // tell the system not to auto-hide and we'll do it ourself 
    }); 
}); 

Однако в этом случае кнопка открывает камеру вверх. Но, когда фотография берется и выбирается, она возвращается к экрану, но ничего не происходит. Затем он дает эту ошибку в отладке - «Ti не определено». Когда я затем определяю Ti, он вернет «App undefined».

Особенность этого заключается в том, что если я удалю код, который будет обрабатывать данные, отправляемые из app.js, в webview, он отлично работает, даже если код для открытия камеры из веб-браузера достаточно близок к тому же код?

Answer 1

вот что вы можете сделать:

Внутри вашего WebView вызова и события и записи слушателя событий внутри родительского WebView. Что-то, как это будет идти в WebView:

<button onclick="Ti.App.fireEvent('app:fromWebView', { message: 'event fired from WebView, handled in Titanium' });">fromWebView</button> 

Вслед за чем-то вроде этого внутри родительских JS в WebView:

Ti.App.addEventListener('app:fromWebView', function(e) { 
    alert(e.message); 
    //Here you can call the camera api. 
}) 

для отправки изображения на WebView следовать обратному процессу.

Не забудьте проверить номер Docs.

Надеюсь, что это поможет.

Answer 2

Я всегда избегаю слушателей Слушателей в мире «Сети» в Титане. Когда вы вызываете «fireEvent» из своего веб-представления, вы переходите мост из песочницы webview в родной мир. Вот где Titanium снимает картинку и сохраняет ее в файловой системе. Чтобы Titanium сообщила, что веб-просмотр завершен, я рекомендую evalJS. Гораздо надежнее.

Ниже приведен пример использования фотогалереи вместо камеры. Гораздо проще протестировать в симуляторе.Просто замените Titanium.Media.openPhotoGallery на Titanium.Media.showCamera, чтобы вместо этого использовать камеру.

app.js

var win = Ti.UI.createWindow({ 
    background : 'white', 
    title : 'camera test' 
}); 

var webview = Ti.UI.createWebView({ 
    url : 'test.html' 
}); 

win.add(webview); 
win.open(); 

Ti.App.addEventListener('choosePicture', function(e) { 

    var filename = e.filename; 

    Titanium.Media.openPhotoGallery({ 

     success : function(event) { 
      var image = event.media; 
      var file = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory, filename); 
      file.write(image); 
      var full_filename = file.nativePath; 
      webview.evalJS('photoDone("' + full_filename + '");'); 

     }, 
     cancel : function() { 
     }, 
     error : function(error) { 
      var a = Titanium.UI.createAlertDialog({ 
       title : 'Camera' 
      }); 
      if (error.code == Titanium.Media.NO_CAMERA) { 
       a.setMessage('Please run this test on device'); 
      } else { 
       a.setMessage('Unexpected error: ' + error.code); 
      } 
      a.show(); 
     }, 
     showControls : false, // don't show system controls 
     mediaTypes : Ti.Media.MEDIA_TYPE_PHOTO, 
     autohide : true 
    }); 
}); 

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>My HTML Page</title> 
     <style> 
      body { 
       padding-top: 20px 
      } 
     </style> 
     <script> 
      var photoNumber = 0; 
      function doShowCamera() { 
       photoNumber++; 
       Ti.App.fireEvent('choosePicture', { 
        filename : photoNumber + ".png" 
       }); 
      } 

      function photoDone(filename) { 
       var img = document.getElementById('myPhoto'); 
       img.src = filename; 
      } 

     </script> 
    </head> 
    <body> 
     <img id="myPhoto" width="300" height="400"/> 
     <input type="button" value="Show Pictures" onclick="doShowCamera();" /> 
    </body> 
</html> 

Ti.App.addEventListener вызов может быть в любом месте вашего кода Titanium (не в ваших webviews) до тех пор, поскольку он запускается только один раз. app.js является таким же хорошим местом, как и любое его.