星期一, 7月 21, 2014

HTML截取定位資訊轉存至THREE.js

if (navigator.geolocation) {
setInterval("enableGeolocation()",5000);
} else {
    alert("Geolocation is not supported by this browser.");
}

function enableGeolocation() {
navigator.geolocation.getCurrentPosition(showPosition);
}

function showPosition(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
}

HTML截取攝影機畫面

來源:http://www.html5rocks.com/en/tutorials/getusermedia/intro/

if (navigator.getUserMedia) {

    if (typeof MediaStreamTrack != 'undefined' && typeof MediaStreamTrack.getSources != 'undefined'){//Chrome 選擇後攝影機
      MediaStreamTrack.getSources(function gotSources(sourceInfos){
          var option = document.createElement("option");
          var hasRearCamera = false;
          for (var i = 0; i != sourceInfos.length; ++i) {
            var sourceInfo = sourceInfos[i];
            if (sourceInfo.kind === 'video') {
                if (!hasRearCamera) {
                    option.value = sourceInfo.id;
                    option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
                };
                if( sourceInfo.facing === 'environment' ) {
                    hasRearCamera = true;
                    option.value = sourceInfo.id;
                    option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
                    navigator.getUserMedia({video: { optional: [{sourceId: option.value}] }}, successCallback, errorCallback);
                }
            }
          }
          if (!hasRearCamera) {
            navigator.getUserMedia({video: { optional: [{sourceId: option.value}] }}, successCallback, errorCallback);
          }
      });
    }else{
        navigator.getUserMedia({video: true}, successCallback, errorCallback);
    }
 
} else {
    sendError('Native web camera streaming (getUserMedia) not supported in this browser.');
}

HTML5 + WebGL 實作小筆記

1.
(1) iOS 7 以前(包含),無法使用瀏覽器取得攝影機畫面。(navigator.getUserMedia函式)
(2) Chrome on android 可以用程式抓出所有多媒體設備,並且判斷需要的設備做選擇,例如後攝影機。(判斷式:http://kanbear.blogspot.tw/2014/07/htmlthreejs_21.html)
(3) Firefox on android 無法以程式選擇需要的攝影機,在使用者授權攝影機使用時交由使用者決定攝影機。
(4) Opera on android 預設使用後攝影機。