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;
}
星期一, 7月 21, 2014
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.');
}
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.');
}
標籤:
攝影機,
Android,
camera,
Chrome,
getUserMedia,
HTML,
HTML5,
Javascript
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 預設使用後攝影機。
(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 預設使用後攝影機。
訂閱:
文章 (Atom)