Javascript 如何在Tianium Appcelerator中从webview内部访问摄像头_Javascript_Android Camera_Appcelerator_Ios Camera

Javascript 如何在Tianium Appcelerator中从webview内部访问摄像头

javascript

Javascript 如何在Tianium Appcelerator中从webview内部访问摄像头,javascript,android-camera,appcelerator,ios-camera,Javascript,Android Camera,Appcelerator,Ios Camera,我已经几乎完成了用Appcelerator开发HTML5应用程序的工作，我还需要添加一个功能，允许用户在通过应用程序向客户端发送消息时拍照。有一个特定的div显示，其中包含消息表单，我希望用户能够与他们的手机拍照，并将其自动附加到消息，然后提交到我们的服务器然而，在四处打猎之后，我对如何让它工作感到困惑。虽然API显示了使相机工作的Javascript，但我似乎无法访问它，而且我不知道API调用应该位于何处。它是放在app.js文件中，还是它自己的文件中，或者它在哪里调用并不重要？在此方面如有

我已经几乎完成了用Appcelerator开发HTML5应用程序的工作，我还需要添加一个功能，允许用户在通过应用程序向客户端发送消息时拍照。有一个特定的div显示，其中包含消息表单，我希望用户能够与他们的手机拍照，并将其自动附加到消息，然后提交到我们的服务器

然而，在四处打猎之后，我对如何让它工作感到困惑。虽然API显示了使相机工作的Javascript，但我似乎无法访问它，而且我不知道API调用应该位于何处。它是放在app.js文件中，还是它自己的文件中，或者它在哪里调用并不重要？在此方面如有任何帮助/建议，将不胜感激

编辑
多亏了Dragon，我对代码做了以下更改：

index.html

但是，在这种情况下，该按钮可以很好地打开相机。但是，当拍摄并选择照片时，它会返回到屏幕，但什么也没有发生。然后，它在调试中给出此错误-“Ti未定义”。当我定义Ti时，它将返回“App未定义”

奇怪的是，如果我删除将处理从app.js发送到webview的数据的代码，它工作正常，即使从webview打开相机的代码与相同的代码非常接近？

以下是您可以做的：

在webview中调用和事件，并在webview的父级中编写事件侦听器。类似的内容将出现在webview中：

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

要将图像发送到webview，请执行相反的过程

别忘了检查一下房间

希望有帮助。

在钛合金的“网络”世界中，我总是避免使用事件侦听器。当您从webview调用“fireEvent”时，您正在跨越从webview沙箱到本机世界的桥梁。这就是Titanium拍摄照片并将其保存到文件系统的地方。为了让Tianium告诉webview它已经完成了，我推荐evalJS。更可靠

下面是一个使用照片库而不是相机的示例。更容易在模拟器中测试。只需将

tianium.Media.openPhotoGallery

替换为

tianium.Media.showCamera

即可使用相机

app.js

test.html


我的HTML页面
身体{
顶部填充：20px
}
var-photoNumber=0；
函数doShowCamera（）{
photoNumber++；
Ti.App.fireEvent（'choosePicture'{
文件名：photoNumber+“.png”
});
}
函数photoDone（文件名）{
var img=document.getElementById（'myPhoto'）；
img.src=文件名；
}

Ti.App.addEventListener

调用可以在Tianium代码中的任何位置（而不是在Web视图中），只要它只运行一次。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
  });
});

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

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

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
    });
});

<!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>