android - 英特尔 XDK 相机 View 不工作-6ren

android - 英特尔 XDK 相机 View 不工作

转载作者：行者123 更新时间：2023-11-29 00:17:51

我正在使用英特尔 XDK 创建一个增强现实应用程序。当我在“英特尔应用程序预览”应用程序中加载此应用程序时，当我将设备保持在垂直位置时，我看到红色背景并且没有摄像头 View 。其他一切似乎都正常。为什么我看不到相机 View ？

这是我的代码

<!doctype html>
<html>
  <head>
    <title>Nearby</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="Copyright" content="&copy; 2013, Intel Corporation. All rights reserved." />
    <meta name="Author" content="Nadeesha" />
<!--
 * Copyright (c) 2013, Intel Corporation. All rights reserved.
 * Please see http://software.intel.com/html5/license/samples 
 * and the included README.md file for license terms and conditions.
-->      
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="lib/jquery/jquery-1.8.2.min.js"></script>
    <script src="cordova.js"></script>
      <script src="intelxdk.js"></script>
    <script>
var pin = [
    {"name":"RUSL", "lat":"8.3635595", "lng":"80.5042495"},
    {"name":"Mihinthale", "lat":"8.35059440", "lng":"80.5169444"},
    {"name":"Mihintale Railway Station", "lat":"8.3589425", "lng":"80.50174530"},
    {"name":"Mihintale Forest Reserve", "lat":"8.3783333", "lng":"80.47916669"},
    {"name":"Mihintale Wewa", "lat":"8.3613889", "lng":"80.5052777"},
    {"name":"Mihintalekanda", "lat":"8.35000000", "lng":"80.500000"}
];        
var markersArray = [], bounds;
var myLat = 0, myLng = 0; 
var bearing, distance;
var dataStatus = 0;                

// setup map and listen to deviceready        
$( document ).ready(function() {
    document.addEventListener("deviceready", onDeviceReady, false);
});

// start device compass, accelerometer and geolocation after deviceready        
function onDeviceReady() {
    navigator.splashscreen.hide();
    setupMap();
    // start cordova device sensors
    startAccelerometer();
    startCompass();
    startGeolocation();
}

        // start intel.xdk augmented reality mode, adds camera in background       
function xdkStartAR(){
    intel.xdk.display.startAR(); 
    $('#arView').css('background-color','transparent');
    $('body').css('background-color','transparent');
    document.getElementById('body').style.background = "transparent";
}

// stop intel.xdk augmented reality mode        
function xdkStopAR(){
    intel.xdk.display.stopAR(); 
}        


// setup google maps api        
function setupMap(){
    $("#map").height($(window).height()-60);
    var mapOptions = {
        zoom: 13,
        mapTypeControl: false,
        streetViewControl: false,
        navigationControl: true,
        scrollwheel: false,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
}        

// toggle between list view and map view        
function toggleView(){
    if($(".listView").is(":visible")){
        $(".listView").hide();
        $("#map").height($(window).height()-60);
        $(".mapView").fadeIn(function(){google.maps.event.trigger(map, "resize");map.fitBounds(bounds);});
        $("#viewbtn").html("List");
    } else {
        $(".mapView").hide();
        $(".listView").fadeIn();
        $("#viewbtn").html("Map");
    }
}

// get data from API and store in array, add to list view and create markers on map, calculate         
function loadData(){
    dataStatus = "loading";
    markersArray = [];
    bounds = new google.maps.LatLngBounds();
    // add blue gps marker
    var icon = new google.maps.MarkerImage('http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',new google.maps.Size(30, 28),new google.maps.Point(0,0),new google.maps.Point(9, 28));
    var gpsMarker = new google.maps.Marker({position: new google.maps.LatLng(myLat, myLng), map: map, title: "My Position", icon:icon});
    bounds.extend(new google.maps.LatLng(myLat, myLng));
    markersArray.push(gpsMarker);
    // add all location markers to map and list view and array
    for(var i=0; i< pin.length; i++){
        $(".listItems").append("<div class='item'>"+pin[i].name+"</div>");
        addMarker(i);
        relativePosition(i);
    }
    map.fitBounds(bounds);
    google.maps.event.trigger(map, "resize");
    dataStatus = "loaded";   
}

// add marker to map and in array        
function addMarker(i){
    var marker = new google.maps.Marker({position: new google.maps.LatLng(pin[i].lat, pin[i].lng), map: map, title: pin[i].name});
    bounds.extend(new google.maps.LatLng(pin[i].lat, pin[i].lng));
    markersArray.push(marker);
} 

// clear all markers from map and array        
function clearMarkers() {
    while (markersArray.length) {
        markersArray.pop().setMap(null);
    }
}        

// calulate distance and bearing value for each of the points wrt gps lat/lng        
function relativePosition(i){
    var pinLat = pin[i].lat;
    var pinLng = pin[i].lng;
    var dLat = (myLat-pinLat)* Math.PI / 180;
    var dLon = (myLng-pinLng)* Math.PI / 180;
    var lat1 = pinLat * Math.PI / 180;
    var lat2 = myLat * Math.PI / 180;
    var y = Math.sin(dLon) * Math.cos(lat2);
    var x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon);
    bearing = Math.atan2(y, x) * 180 / Math.PI;
    bearing = bearing + 180;
    pin[i]['bearing'] = bearing;

    var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2); 
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
    distance = 3958.76  * c;
    pin[i]['distance'] = distance;
}

// calculate direction of points and display        
function calculateDirection(degree){
    var detected = 0;
    $("#spot").html("");
    for(var i=0;i<pin.length;i++){
        if(Math.abs(pin[i].bearing - degree) <= 20){
            var away, fontSize, fontColor;
            // varry font size based on distance from gps location
            if(pin[i].distance>1500){
                away = Math.round(pin[i].distance);
                fontSize = "16";
                fontColor = "#ccc";
            } else if(pin[i].distance>500){
                away = Math.round(pin[i].distance);
                fontSize = "24";
                fontColor = "#ddd";
            } else {
                away = pin[i].distance.toFixed(2);
                fontSize = "30";
                fontColor = "#eee";
            }
            $("#spot").append('<div class="name" data-id="'+i+'" style="margin-left:'+(((pin[i].bearing - degree) * 5)+50)+'px;width:'+($(window).width()-100)+'px;font-size:'+fontSize+'px;color:'+fontColor+'">'+pin[i].name+'<div class="distance">'+ away +' miles away</div></div>');
            detected = 1;
        } else {
            if(!detected){
                $("#spot").html("");
            }
        }
    }

} 

// Start watching the geolocation        
function startGeolocation(){
    var options = { timeout: 30000 };
    watchGeoID = navigator.geolocation.watchPosition(onGeoSuccess, onGeoError, options);
}

// Stop watching the geolocation
function stopGeolocation() {
    if (watchGeoID) {
        navigator.geolocation.clearWatch(watchGeoID);
        watchGeoID = null;
    }
}

// onSuccess: Get the current location
function onGeoSuccess(position) {
    document.getElementById('geolocation').innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' + 'Longitude: ' + position.coords.longitude;
    myLat = position.coords.latitude;
    myLng = position.coords.longitude;
    if(!dataStatus){
        loadData();
    }
}

// onError: Failed to get the location
function onGeoError() {
    document.getElementById('log').innerHTML += "onError=.";
} 

// Start watching the compass
function startCompass() {
    var options = { frequency: 100 };
    watchCompassID = navigator.compass.watchHeading(onCompassSuccess, onCompassError, options);
}

// Stop watching the compass
function stopCompass() {
    if (watchCompassID) {
        navigator.compass.clearWatch(watchCompassID);
        watchCompassID = null;
    }
}

// onSuccess: Get the current heading
function onCompassSuccess(heading) {
    var directions = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW', 'N'];
    var direction = directions[Math.abs(parseInt((heading.magneticHeading) / 45) + 0)];
    document.getElementById('compass').innerHTML = heading.magneticHeading + "<br>" + direction;
    document.getElementById('direction').innerHTML = direction;
    var degree = heading.magneticHeading;
    if($("#arView").is(":visible") && dataStatus != "loading"){
        calculateDirection(degree);
    }
}

// onError: Failed to get the heading
function onCompassError(compassError) {
    document.getElementById('log').innerHTML += "onError=."+compassError.code;
}        

// Start checking the accelerometer
function startAccelerometer() {
    var options = { frequency: 100 };
    watchAccelerometerID = navigator.accelerometer.watchAcceleration(onAccelerometerSuccess, onAccelerometerError, options);
}

// Stop checking the accelerometer
function stopAccelerometer() {
    if (watchAccelerometerID) {
        navigator.accelerometer.clearWatch(watchAccelerometerID);
        watchAccelerometerID = null;
    }
}

// onSuccess: Get current accelerometer values
function onAccelerometerSuccess(acceleration) {
    // for debug purpose to print out accelerometer values
    var element = document.getElementById('accelerometer');
    element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br />' +
                        'Acceleration Y: ' + acceleration.y + '<br />' +
                        'Acceleration Z: ' + acceleration.z ;
    if(acceleration.y > 7){
        $("#arView").fadeIn();
        $("#topView").hide();
        document.getElementById('body').style.background = "#d22";
    } else {
        $("#arView").hide();
        $("#topView").fadeIn();
        document.getElementById('body').style.background = "#fff";
    }
}

// onError: Failed to get the acceleration
function onAccelerometerError() {
    document.getElementById('log').innerHTML += "onError.";
}
    </script>
    <style>
body {background-color:#fff;font-family:Arial;margin:0;overflow-x:hidden;-webkit-user-select: none;}
.navbar {background-color:#222;height:40px;padding:10px;text-align:center;color:#fff;font-size:20px;font-weight:bold;line-height:40px;}
.navtitle {text-align:center;margin:auto}
.navbtn {background-color:#333;padding:5px 10px;height:30px;color:#fff;font-size:18px;font-weight:bold;line-height:30px;border-radius:4px;border:1px solid #666} 
#actionbtn {float:right;}
#viewbtn {float:left;}
.query {padding:10px;background-color:#aaa;border-bottom:1px solid #fff;font-size:14px;font-weight:bold;color:#222;}
.item {padding:20px 10px; background-color:#eee;border-bottom:1px solid #fff;font-size:18px;color:#333;text-shadow:0 1px #fff}
.searchbox {padding:5px;background-color:#eee;border-bottom:1px solid #fff;}
#search {box-sizing: border-box;width:100%;height:40px;font-size:16px;border-radius:20px;border:1px solid #bbb}
.mapView {display:none}
#map {height:200px;}
#arView, #topView {display:none;}
#arView{padding:30px 0; height:70px;text-align:center}
.arMessage {color:#ddd;font-size:14px}
#spot {text-align:center}
.name, .distance {text-shadow:0 1px #666}
.name {padding:15px;font-weight:bold;;background-color:#c22;border-radius:40px;margin-bottom:10px}
#direction {color:#d55;font-size:20px;padding:15px;font-weight:bold;;background-color:#a22;border-radius:40px;display:inline-block;margin-bottom:10px;width:40px;line-height:40px}
.distance {font-size:14px;font-weight:normal;}
#debug {border:1px solid #999;display:none}
.heading {background-color:#999;color:#eee;padding:5px;}
#compass, #accelerometer, #geolocation {padding:5px}
    </style>
  </head>
  <body id="body">  
    <div id="arView">
        <div class="arMessage">&uarr;<br>Tilt down to see all places</div>
        <br>
        <div class="arMessage">&larr; Move the device around to find spots &rarr;</div>
        <br>
        <div id="direction"></div>
        <br>
        <div id="spot"></div>
    </div>
    <div id="topView">
        <div class="navbar">
            <div id="actionbtn" class="navbtn"> &crarr; </div>
            <div id="viewbtn" class="navbtn" onclick="toggleView()">Map</div>    
            <div class="navtitle">Nearby</div> 
        </div>
        <div class="listView">
            <div class="listItems"></div>
        </div>
        <div class="mapView">
            <div id="map"></div>
        </div>
    </div>
    <div id="debug">  
        <div class="heading">Geolocation</div>
        <div id="geolocation"></div>
        <div class="heading">Compass</div>
        <div id="compass"></div>
        <div class="heading">Accelerometer</div>
        <div id="accelerometer"></div>
        <div class="heading">Log</div>
        <div id="log"></div>
    </div>      
  </body>
</html>

最佳答案

您没有在函数 onAccelerometerSuccess 中调用 xdkStartAR() 和 xdkStopAR()，因此相机没有启动。

这是正确的 onAccelerometerSuccess:

function onAccelerometerSuccess(acceleration) {
    // for debug purpose to print out accelerometer values
    var element = document.getElementById('accelerometer');
    element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br />' +
                        'Acceleration Y: ' + acceleration.y + '<br />' +
                        'Acceleration Z: ' + acceleration.z ;
    if(acceleration.y > 7){
        $("#arView").fadeIn();
        $("#topView").hide();
        document.getElementById('body').style.background = "#d22";
        xdkStartAR();
    } else {
        $("#arView").hide();
        $("#topView").fadeIn();
        document.getElementById('body').style.background = "#fff";
        xdkStopAR();
    }
}

此外，我还必须先包含 intelxdk.js，然后再包含 cordova.js 才能在应用程序预览中运行:

<script src="intelxdk.js"></script>
<script src="cordova.js"></script>

关于android - 英特尔 XDK 相机 View 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25355922/

文章推荐： Android Sherlock VS AppCompat

文章推荐： Android SDK 管理器获取失败

文章推荐： android - 如何处理 Android 中失败的 AudioFocus 请求？

文章推荐： android - 检测到 iBeacon 时在后台启动应用程序

intel-xdk - 开始学习如何使用英特尔 XDK 的最佳场所
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 4年前关闭。 Improve thi
intel-xdk - 在没有云支持的情况下使用英特尔 XDK 构建我的跨平台应用程序？
我最近开始使用英特尔 XDK。我发现对于每个平台创建，我的代码都会转到英特尔云中心来执行构建。它的一个特性在 Product Brief Intel® XDK 中提到. 我可以在本地构建吗？我的意思是
intel-xdk - 使用英特尔 XDK 构建的应用程序
我正在寻找使用英特尔 XDK 构建的移动应用程序的展示/示例。除了英特尔之外，您还知道哪些主流/流行组织使用英特尔 XDK 在不同平台上制作应用程序？我尝试过 Google 和 Intel 论坛，但没
intel-xdk - 英特尔 XDK 的 Inmobi 广告集成示例？
我正在努力将 inmobi 广告集成到使用 Intelx XDK 构建的混合应用程序(目前为 iOS)中。我正在遵循这个指南: https://www.inmobi.com/support/art/2
intel-xdk - 英特尔 XDK IDE 找不到 CODE 和 DESIGN 按钮
我正在使用英特尔 XDK，但找不到在代码和设计模式之间切换的愚蠢按钮。根据英特尔“入门”视频，它应该在这里: 但我的看起来像这样: 我必须相信我错过了一些简单的事情。最佳答案我发现当你开始一个新项
intel-xdk - 从构建中排除文件夹和文件
我有一个 mercurial 存储库和一些 Visual Studio 文件(我使用的是 TypeScript)，我不想将它们包含在我的 XDK 构建中，但仍需要位于项目目录中。有没有办法让英特尔 X
javascript - 重定向到其他页面英特尔 XDK
实际上我正在 Intel XDK IDE 上进行开发，但我需要重定向到其他页面。谢谢。代码: $(document).on("click", "#ini-sesion", function(
javascript - XDK 上的加速度计未在设备上读取
我正在使用英特尔 XDK 中的一个项目并使用 intel.xdk.accelerometer.watchAccelerometer 属性。我设置了一个临时变量来测试加速度计是否已被监视，但根据我设置的
javascript - XDK 重定向到模板文件将无法正常工作
我试图在 Ajax 调用后重定向到一个模板文件: window.location.href = "templates/somepage.html"; 它转到页面，但是，在该页面上，按钮无法正确加载，当
c++ - QuarkXPress XDK
最近我得到了 QuarkXPress XDK(QuarkXPress SDK)来为我们的新闻编辑软件(基于 VB 6)开发 Xtension，它基本上将故事从数据库转移到 QuarkXPress 文档
javascript - 英特尔 xdk - 服务器端
我有两个问题第一个问题:我使用 css3、HTML5、JavaScript 开发应用程序。在我的应用程序中，我需要从数据库中获取数据。我该怎么做？第二个问题:intel xdk 在构建 l 时必须
javascript - Intel XDK - 打开个性化键盘
我是英特尔 XDK 的新开发者，我遇到以下问题: 我有一个输入文本(HTML)，当用户单击输入时，我只想打开键盘数字、小数和负数。我怎样才能做到这一点？最佳答案查看 Pamela Fox 的这篇博
javascript - intel xdk - 如何将项目保存到云端？
据我了解，我们可以将正在进行的项目保存到intel提供的云服务中。但我无法做到这一点。分步程序是什么？最佳答案您需要创建一个帐户https://appcenter.html5tools-soft
javascript - 英特尔 xdk 数据库
嘿，我正在使用 Intel xdk 开发混合应用程序。我已经创建了注册表，然后我将代码放在那里。我尝试使用 Php Mysql 将数据库插入我的数据库后。如果我单击注册按钮，它会显示这样的错误 [
javascript - 我可以将英特尔 XDK 的模拟器设置为默认横向吗？
我已经构建了一个应用程序，我想在横向 View 中测试它。每次我模拟代码时，我都必须更改模拟器中的设备方向。有没有办法修改模拟器配置，使默认方向为横向？最佳答案每当我切换到模拟器选项卡时，它都会记
cordova - 英特尔 XDK + Phonegap
请问，我是否可以将 Intel XDK API 和 Phonegap API 集成到单个移动应用程序中？这是因为，某些 API 仅在 Phonegap 中可用，反之亦然。最佳答案是的，如果我正确理
javascript - Intel XDK 隐藏状态栏
我用IntelXDk做了一个app，想隐藏状态栏。在 app.js 文件中我有这段代码: document.addEventListener("intel.xdk.device.ready",func
android - intel XDK 如何手动定义权限
我正在使用 XDK 新编辑器开发应用程序，它包含一个由 JSON (getJSON) 更新的列表。应用程序可以与 XDK Emulator 一起正常工作，但不能与真实设备一起工作。我想知道如何手动为应
android - 在构建时排除文件夹 Intel XDK
我使用 Intel-XDK 构建我的 Android 应用程序，我在 Launch Icons and Splash Screen 选项卡中选择了一个图标和启动画面，但文件应该在源目录中。我想在构建
android - intel xdk 在后退按钮点击时退出移动应用程序
我已经使用 intel xdk 制作了一个应用程序。移动设备内置后退按钮的默认行为会根据历史记录在页面上重定向我。它的行为就像网络浏览器的后退按钮，因为我的代码是 html5 格式。但是，我希望我的

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

android - 英特尔 XDK 相机 View 不工作