- 締切済み
javascript phonegapで困ってます
いろいろ調べながらPCでwebカメラを使って、videoタグにカメラ映像を映すことができたので（下記コード）、これをmonacaでビルドすると、ブラウザーがカメラ未対応とでます。navigator.getUserMediaに対応してるのが、FireFoxとChrome、operaなどなので当然の結果かと そこでhtmlとjavascriptをphonegapでビルドして、スマホのカメラの映像をvideoタグに映し出したいのですが、phonegap capture apiのnavigator.device.capture.captureVideo(captureSuccess, captureError, options);あたりを調べてもよくわからなかったので、質問させていただきました。よろしくお願いします。 html-------------------------- <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>カメラテスト</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <article> <video id="video" autoplay></video> <section> <button id="start">Start</button> <button id="stop">Stop</button> </section> </article> <script type="text/javascript" src="index.js"></script> </body> </html> js----------------------------------------------------- navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; window.URL = window.URL || window.webkitURL; if (!navigator.getUserMedia) { alert("カメラ未対応のブラウザです。"); } // 変数 var video = document.getElementById("video"), btnStart = document.getElementById("start"), btnStop = document.getElementById("stop"), videoObj = { video: true, audio: true }; btnStart.addEventListener("click", function() { var localMediaStream; if (navigator.getUserMedia) { navigator.getUserMedia(videoObj, function(stream) { localMediaStream = stream; video.src = window.URL.createObjectURL(localMediaStream); }, function(error) { console.error("getUserMedia error: ", error.code); }); btnStop.addEventListener("click", function() { localMediaStream.stop(); }); } }); css------------------------- video { width: 320px; height: 240px; } button { width: 80px; height: 30px; font-size: 20px; text-align: center; vertical-align: center; }
- dkong
- お礼率86% (170/197)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
Monacaについてはわかりませんが、 deviceの準備が終わってからデバイスを使ってますか？ http://docs.phonegap.com/en/edge/cordova_events_events.md.html#deviceready
関連するQ&A
- JavaScriptのストップウォッチについて
以下のコードでストップウォッチを作りました ここまではできるのですがここに新たな仕様として ・画面を開いてから3秒後に自動でカウントする というコードを入れたいです ですからスタートボタンをなくしてストップとリセットだけにしたいです 初心者なので変なコードになっているかもしれません その時はこうした方がいい！みたいなことを言っていただけるとすごく助かります どなたかご教授お願いします HTMLコード <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="css/aaa.css" rel="Stylesheet" /> </head> <body> <h1>ストップウォッチ</h1> <div id="sec" style="font-size:100px;">0.00</div> <input id="btn_start" type="button" value="Start" onclick="start();"> <input id="btn_stop" type="button" value="Stop" onclick="stop();"> <input id="btn_reset" type="button" value="Reset" onclick="reset();"> <script> var sec = 0.00; var timerId; //スタートボタン function start() { timerId = setInterval(function() { sec += 0.01; document.getElementById('sec').innerHTML = Math.round(sec*100)/100; //もしも0.0で表示したければ10にすること },10); //この数字はカウントの速さ0.00表示の時は10！ } //ストップボタン function stop(){ clearInterval(timerId); } //リセットボタン function reset(){ document.getElementById('sec').innerHTML = '0.00'; sec = 0.00; } </script> </body> </html> CSSコード body { background-color:#B2B2B2; } h1 { background-color:#00EFFF; } #sec { background-color:#00EFFF; } #btn_start ,#btn_stop ,#btn_reset { margin-top:25px; background: -moz-linear-gradient(top,#BFD9E5, #63B0CF 50%,#0080B3 50%,#09C); background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#63B0CF), color-stop(0.5,#0080B3), to(#09C)); border: 1px solid #DDD; color: #FFF; width: 60px; padding: 10px 0; }
- 締切済み
- JavaScript
- javascriptで困っています。教えてください
javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に10pxずつ移動させたいのですが、どのようにしていいのかよく分かりません。 document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; の部分に無理があるのでしょうか？ 教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css"> <!-- #wrapper{ width:640px; height:480px; position:relative; } #kt{ width:250px; height:250px; position:absolute; top:100px; left:100px; } #up{position:absolute; z-index: 1;top:0px;width:20px;height:20px;background-color:#F00;} #down{position:absolute; z-index: 2;top:30px;width:20px;height:20px;background-color:#F00;} --> </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; } var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = document.getElementById("kt").style.top+10; } </script> </body> </html>
- ベストアンサー
- JavaScript
- scriptが実行されません
現在勉強中でドットインストールのJavaScriptでストップウォッチを作ろうのコードを書いています。 ですが、急にscript が実行されなくなってしまいました。 何かコードに間違いがあるのでしょうか？ご指摘いただけると助かります。 以下コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ストップウォッチ</title> <style> body{ background:#e0e0e0; font-family:Arial, sans-serif; text-align:center; } #timerText{ color:#00aaff; font-size:128px; margin:40px auto; text-shadow:0 1px 0 rgba(255,255,255,0.5); } </style> </head> <body> <div id="timerText">0.00</div> <button id ="start">START</button> <button id ="stop">STOP</button> <button id ="reset">RESET</button> <script> (function(){ 'use.strict'; var startTime; var timerId; var startButton =document.getElementById('start'); var stoptButton =document.getElementById('stop'); var resetButton =document.getElementById('reset'); var timerText =document.getElementById('timerText'); startButton.addEventListener('click',function(){ startTime =Date.now(); updateTimerText(); }); function updateTimerText(){ timerId = setTimeout(function(){ var t =Date.now() - startTime; timerText.innerHTML =(t / 1000).toFixed(2); updateTimerText(); }, 10); } })(); </script> </body> </html> よろしくお願い致します。
- ベストアンサー
- JavaScript
- javascriptで困っています。教えてください
javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に移動させたいのですが、上手くいきません。教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css"> <!-- #wrapper{ width:640px; height:480px; position:relative; } #kt{ width:250px; height:250px; position:absolute; top:100px; left:100px; } #up{position:absolute; z-index: 1;top:0px;width:20px;height:20px;background-color:#F00;} #down{position:absolute; z-index: 2;top:30px;width:20px;height:20px;background-color:#F00;} --> </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = 50; } var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = 200; } </script> </body> </html>
- ベストアンサー
- JavaScript
- javascriptで困っています
スマホでタッチした場所の座標を取得しようとしているのですが、いろいろ調べて以下のように作ってみましたが、座標が取得できません。どこを直せばいいのか、教えていただきたく投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320, user-scalable=no" /> <script type="text/javascript" charset="utf-8"> var touch_box = document.getElementById("box"); touch_box.addEventListener("touchstart", function(e){ document.getElementById("txt0").innerHTML = "スタート"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchmove", function(e){ document.getElementById("txt0").innerHTML = "ムーブ"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchend", function(e){ document.getElementById("txt0").innerHTML = "エンド"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); </script> </head> <body> <div id="box"> <span id="txt0"></span><br /> X:<span id="txt1"></span>, Y:<span id="txt2"></span><br /> </div> </body> </html>
- ベストアンサー
- JavaScript
- javascriptの条件文
スマホにタッチした時の値を取得するスクリプトです。 よくわからないまま作成してますが、ご勘弁下さい。 <script type="text/javascript"> window.document.addEventListener("touchstart", function(event){ event.preventDefault(); var result = document.getElementById("result"); result.innerHTML = "clientX:"+ event.touches[0].clientX+ "<br>" + "clientY:"+ event.touches[0].clientY; }, true); window.document.addEventListener("touchmove", function(event){ event.preventDefault(); var result = document.getElementById("result"); result.innerHTML = "clientX:"+ event.touches[0].clientX+ "<br>" + "clientY:"+ event.touches[0].clientY; }, true); window.document.addEventListener("touchend", function(event){ event.preventDefault(); var result = document.getElementById("result"); result.innerHTML = ""; }, true); ここまでは正常。 値を取得した、Yを下記のようにしたのですが、 500以上になってもロケーションが実行されません。 間違いなく構文が間違っているのですが、数時間格闘したのですが、わからないので すみませんが、教えて頂けると有難いです。 num = event.touches[0].clientY; if (num >= "500") { location.href = "https://www.google.co.jp/"; } </script>
- ベストアンサー
- JavaScript
- オブジェクトがありません
オブジェクトがありませんとエラーが出てしまいます。 operaやNetscapeは動くようなのですがIEは動きません。 document.getElementById(target).style.top = y-offx+"px"; の部分でエラーがでるようなのですが。 出さないためにどうすれば良いかが、分かりません。 よろしくお願いします。 <html> <head> <title>ドラッグして移動する</title> <script type="text/javascript"><!-- if(window.addEventListener)window.addEventListener("load",loadScript,false); if(window.attachEvent)window.attachEvent("onload",loadScript); //関数ロード function loadScript(){ ///ドラッグ用ロード flag=false; Menu=new Array("menu1","menu2","menu3"); for(i=0;i<Menu.length;i++){ XMenu=window.document.getElementById(Menu[i]) if(XMenu.addEventListener)XMenu.addEventListener("mousedown",dragOn,false); if(XMenu.attachEvent)XMenu.attachEvent("onmousedown",dragOn); } } //ドラッグ関数 function dragOn(){ flag=true; target=this.id; ///移動 if(window.document.addEventListener)window.document.addEventListener("mousemove",dragMove,false); if(window.document.attachEvent)window.document.attachEvent("onmousemove",dragMove); ///終了 if(window.document.addEventListener)window.document.addEventListener("mouseup",dragOff,false); if(window.document.attachEvent)window.document.attachEvent("onmouseup",dragOff); } function dragMove(evt){ if (!flag) return; if (window.createPopup){ x = event.x + document.body.scrollLeft; y = event.y + document.body.scrollTop; }else{ x = evt.pageX; y = evt.pageY; } offx = 60; offy = 75; document.getElementById(target).style.top = y-offx+"px"; document.getElementById(target).style.left = x-offy+"px"; return false; } function dragOff(){flag=false;} // --></script></head> <body> <!-- 各メニューで自分自身をドラッグ開始するように，関数を呼ぶ --> <div id="menu1" style="background-color:red; position:absolute; width:120px;height:150px;" >メニュー1</div> <div id="menu2" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;" >メニュー2</div> <div id="menu3" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;">メニュー3</div> <div id="menu4" style="background-color:yellow; position:absolute;top:200px; left:200px;width:120px;height:150px;">メニュー4</div> </body> </html>
- ベストアンサー
- JavaScript
- Ｊavascriptの質問です。
Ｊavascriptの質問です。 昨日からjavascriptを始めた初心者なのですが、すみませんが、以下のコードの不具合の訂正をお願いしたいのです。自分なりにあれこれやっては見ましたが、結論が見出せません。 昨日は、id="BOX" の部分を、windowをリサイズしたときに、縦横常に中央に表示させるといったものです。 問題点： (1)windowをリサイズたときに、動かない点 (2)ＤＯＣＴＹＰＥ宣言すると、まったく機能しない。（ＤＯＣＴＹＯＥ宣言とJAVASCRIPTの対応が理解できていないので。。とりあえず、ＤＯＣＴＹＰＥ宣言無しでも機能すればいいかな？と思っております。ＩＥ８とfirefox3での表示を目指しています。） 恐れ入りますがよろしくお願いいたします。 ■ＨＴＭＬ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="css/test1.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> <!-- function changeStyle(y,x) { /*変数トレース*/ document.write("関数CALL\n"); document.write(y+"/"); document.write(x); /*CSSの書き換え（ＣＳＳ）を書き換えると位置をへんこうできるものと思っています。*/ document.getElementById("box").style.marginTop = y; document.getElementById("box").style.marginLeft = x; } // --> </script> <script type="text/javascript"> <!-- function relocate() { window.focus(); /*firefoxのwindowサイズとboxの大きさによりマージンを計算*/ if( 0 != window.innerHeight && window.innerHeight > 960){ y=((window.innerHeight - 960)/2); }else{y=0;} /*ＩＥのwindowサイズとboxの大きさによりマージンを計算*/ if( 0 != window.innerWidth && window.innerHeight >1100){ x=((window.innerWidth - 1100)/2); }else{x=0;} /**/ if( 0 != document.body.clientHeight && document.body.clientHeight > 960){ y=((document.body.clientHeight - 960)/2); }else{y=0;} if(0 != document.body.clientWidth && document.body.clientWidth > 1100){ x=((document.body.clientWidth - 1100)/2); }else{x=0;} /*CSSの変更*/ changeStyle(y,x); } //--> </script> </head> <body onResize="relocate()"> <!-- イベントハンドラセット（リサイズ時にＣＳＳ変更）こちらが問題のようです。 --> <div id="box">123456</div> <!-- 目的のボックス--> <script type="text/javascript"> <!-- /*オンロード時に１度ＣＳＳを変更する。もちらは動作します。*/ relocate(); // --> </script> </body> </html> ■ＣＳＳ @charset "utf-8"; /* CSS Document */ *{ margin: 0px; padding: 0px; } #box { background-color: #FF3300; height: 960px; width: 1100px; border: 100px none #999999; margin-top:0px; margin-left:0px; } よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- JavaScriptについて
以下のコードなのですが document.getElementById('input').syoriEventListener の部分にエラーが出ます なぜでしょうか？？ inputEventListener <body> <button id = "input">Click</button> <script> document.getElementById('input').inputEventListener('click', function(){ var txt = prompt("数字を入力"); if(txt == 0){ document.write("０以外でお願いします") }else if(txt % 2 == 0){ document.write("偶数です"); }else{ document.write("奇数です"); } }) </script>
- ベストアンサー
- JavaScript
- javascriptエラーの解決策について
かなりの初心者で他のサイトのソースを借りて改変しています。 どうしても「オブジェクトでサポートされていないプロパティまたはメソッドです」というエラーが消えません。 出来れば具体的な対応策をご教授いただけましたら幸いです。 var startX; var moveX; var diffX = 0; var link_value=''; var adstartY; var admoveY; $(function() { var box = $("#menu-ul")[0]; var touchHandler = getTouchHandler(); box.addEventListener("tmove", touchHandler, false); box.addEventListener("tcst", touchHandler, false); box.addEventListener("tchend", touchHandler, false); document.addEventListener("tmove", getTouchHandlerdoc(), false); document.addEventListener("tcst",getTouchHandlerdoc(), false); document.addEventListener("tchend", getTouchHandlerdoc(), false); $("#item0")[0].addEventListener("tcst", getTouchHandlera('0'), false); $("#item1")[0].addEventListener("tcst", getTouchHandlera('1'), false); $("#item2")[0].addEventListener("tcst", getTouchHandlera('2'), false); $("#item3")[0].addEventListener("tcst", getTouchHandlera('3'), false); $("#item4")[0].addEventListener("tcst", getTouchHandlera('4'), false); $("#item5")[0].addEventListener("tcst", getTouchHandlera('5'), false); $("#item6")[0].addEventListener("tcst", getTouchHandlera('6'), false); /* $("#item9")[0].addEventListener("tcst", getTouchHandlera('9'), false); */ $("#menu-prev-btn")[0].addEventListener("tcst", getTouchHandlerb('prev'), false); $("#menu-next-btn")[0].addEventListener("tcst", getTouchHandlerb('next'), false); $("#menu-prev-btn")[0].addEventListener("tchend", getTouchHandlerb('prev'), false); $("#menu-next-btn")[0].addEventListener("tchend", getTouchHandlerb('next'), false); }); function getTouchHandlerdoc() { return function(e) { if (e.type == "tcst") { $('#footer_ad').hide(); $('#footer_ad').stop(); adstartY = touch.pageY; } else if (e.type == "tmove") { admoveY = touch.pageY - adstartY; if ((admoveY < 20) && (admoveY > -20)){ $('#footer_ad').css('position','absolute'); $('#footer_ad').css('top',document.body.clientHeight + 'px'); } } else if (e.type == "tchend") { $('#footer_ad').show(); } }} function getTouchHandlerb(param) { return function(e) { e.preventDefault(); if (e.type == "tcst") { link_value = param; if(param == "prev"){ timer_prev(); }else if(link_value == "next"){ timer_next(); } } else if (e.type == "tchend") { } }} function getTouchHandlera(param) { return function(e) { //e.preventDefault(); if (e.type == "tcst") { link_value = $('#item'+param+' a').attr('href'); } }} function getTouchHandler() { var sTime = 0; var moveX = 0; return function(e) { //e.preventDefault(); var touch = e.touches[0]; if (e.type == "tcst") { startX = touch.pageX; moveX = 0; startX = startX - diffX; sTime = (new Date()).getTime(); } else if (e.type == "tmove") { //e.preventDefault(); diffX = touch.pageX - startX; moveX = diffX; if (diffX > 0){ diffX = 0; } if (diffX < -320){ diffX = -320; } $("#menu-ul").css("left", diffX + "px"); //$("#menu-ul").animate({left:diffX + 'px'},10); } else if (e.type == "tchend") { //e.preventDefault(); var t = (new Date()).getTime() - sTime; if ((moveX < 10) && (moveX > -10)){ location.href=link_value; } } } } $(window).scroll(function () { var win = window.innerHeight; var offsettop = $("#page").offset().top; var offsettop = window.pageYOffset; var adposition = offsettop + win - 50; var adstartposition = offsettop + win + 60; $('#footer_ad').css('position','absolute'); $('#footer_ad').css('top',adstartposition); $("#footer_ad").animate({top:adposition + 'px'},500) }); window.onorientationchange = function() { var win_width = $(window).width(); $('#menu-frame').css('width',(win_width - 54) + 'px'); $('#menu-frame').css('overflow','hidden'); } $(document).ready(function () { var win_width = $(window).width(); $('#menu-frame').css('width'
- ベストアンサー
- JavaScript
お礼
ありがとうございました。