Pracuję nad projektem z MVC ASP.Net 4 HTML5 (domyślną przeglądarką jest google-chrome v29.0.1547.57) Mogę korzystać z tych narzędzi i robić zdjęcia, ale tylko z przednim aparatem, Jak mogę włączyć tylną kamerę? charakterystyka Tablet Samsung Galaxy Tab 2 Mam nadzieję, że może mi pomócWłączanie tylnej kamery z HTML5
Odpowiedz
Check out https://simpl.info/getusermedia/sources/, który pokazuje w jaki sposób można wybrać źródła używając
MediaStreamTrack.getSources(gotSources);
Następnie można wybrać źródło i przekazać go jako opcja do getUserMedia
var constraints = {
audio: {
optional: [{sourceId: audioSource}]
},
video: {
optional: [{sourceId: videoSource}]
}
};
navigator.getUserMedia(constraints, successCallback, errorCallback);
jest teraz w pełni dostępny w Stable Chrome i komórkowego (dzień V30)
Demo można znaleźć pod adresem https://webrtc.github.io/samples/src/content/devices/input-output/. Umożliwi to dostęp zarówno do przedniej, jak i tylnej kamery.
Wiele dema, które znajdą Państwo polegać na nieaktualnych funkcji:
MediaStreamTrack.getSources()
Począwszy od Chrome 45 i FireFox 39, trzeba będzie użyć funkcji:
MediaDevices.enumerateDevices()
Przykład:
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
console.log("enumerateDevices() not supported.");
return;
}
// List cameras and microphones.
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
devices.forEach(function(device) {
console.log(device.kind + ": " + device.label +
" id = " + device.deviceId);
});
})
.catch(function(err) {
console.log(err.name + ": " + error.message);
});
Więcej dokumentów można znaleźć tutaj: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices
Warto również wspomnieć, że Chrome obsługuje tylko kamerę na połączeniach https. –
//----------------------------------------------------------------------
// Here we list all media devices, in order to choose between
// the front and the back camera.
// videoDevices[0] : Front Camera
// videoDevices[1] : Back Camera
// I used an array to save the devices ID
// which i get using devices.forEach()
// Then set the video resolution.
//----------------------------------------------------------------------
navigator.mediaDevices.enumerateDevices()
.then(devices => {
var videoDevices = [0,0];
var videoDeviceIndex = 0;
devices.forEach(function(device) {
console.log(device.kind + ": " + device.label +
" id = " + device.deviceId);
if (device.kind == "videoinput") {
videoDevices[videoDeviceIndex++] = device.deviceId;
}
});
var constraints = {width: { min: 1024, ideal: 1280, max: 1920 },
height: { min: 776, ideal: 720, max: 1080 },
deviceId: { exact: videoDevices[1] }
};
return navigator.mediaDevices.getUserMedia({ video: constraints });
})
.then(stream => {
if (window.webkitURL) {
video.src = window.webkitURL.createObjectURL(stream);
localMediaStream = stream;
} else if (video.mozSrcObject !== undefined) {
video.mozSrcObject = stream;
} else if (video.srcObject !== undefined) {
video.srcObject = stream;
} else {
video.src = stream;
}})
.catch(e => console.error(e));
Witam Lightning2050 mogę uzyskać pełny kod, jak zmienić źródło próbowałem, ale nie działa! z góry dzięki –
Hej! Sprawdź to: [link] (https: // stackoverflow.com/a/45130523/7197142) –
@ Nahdiroviç Czy może masz jakiś html do tego? JS nie działa dla mnie tylko na urządzeniu mobilnym. –
Ostatni raz rozwinął ten kod, soo tutaj jest wersja którego używam: zadzwonić bezpośrednio ze whichCamera funkcja w kodzie i specefic która kamera „user ”,«środowisko»lub«komputer»" jeśli runiczny w komputerze)
`//----------------------------------------------------------------------
// whichCamera(Type)
// For smartphone or tablet :
// Start the type={user,environment} camera.
// For computer it's simple :
// type = "computer".
//----------------------------------------------------------------------
var streamSrc, cameraType;
function whichCamera(type){
var cameraFacing;
cameraType = type;
if(type == "user")
cameraFacing = 0;
else if(type == "environment")
cameraFacing = 1;
else if(type == "computer"){
cameraFacing = 2;
}
console.log(type+" index : "+cameraFacing);
// Here we list all media devices, in order to choose between
// the front and the rear camera.
// videoDevices[0] : user Camera
// videoDevices[1] : environment Camera
// Then set the video resolution.
navigator.mediaDevices.enumerateDevices()
.then(devices => {
var videoDevices, videoDeviceIndex, constraints;
// Initialize the array wich will contain all video resources IDs.
// Most of devices have two video resources (Front & Rear Camera).
videoDevices = [0,0];
// Simple index to browse the videa resources array (videoDevices).
videoDeviceIndex = 0;
// devices.forEach(), this function will detect all media resources (Audio, Video) of the device
// where we run the application.
devices.forEach(function(device) {
console.log(device.kind + ": " + device.label +
" id = " + device.deviceId);
// If the kind of the media resource is video,
if (device.kind == "videoinput") {
// then we save it on the array videoDevices.
videoDevices[videoDeviceIndex++] = device.deviceId;
console.log(device.deviceId+" = "+videoDevices[videoDeviceIndex-1]);
}
});
console.log("Camera facing ="+cameraFacing+" ID = "+videoDevices[videoDeviceIndex-1]);
// Here we specified which camera we start,
// videoDevices[0] : Front Camera
// videoDevices[1] : Back Camera
if(cameraFacing != "computer"){
constraints = { deviceId: { exact: videoDevices[cameraFacing] }};
return navigator.mediaDevices.getUserMedia({ video:
constraints,
width: { min: 1280, ideal: 1600, max: 1920 },
height: { min: 720, ideal: 1200, max: 1080 }
}
);
}else
return navigator.mediaDevices.getUserMedia({ video: true });
})
// Then we retrieve the link to the video stream.
.then(stream => {
if (window.webkitURL) {
video.src = window.webkitURL.createObjectURL(stream);
localMediaStream = stream;
console.log(localMediaStream +" = "+ stream)
} else if (video.mozSrcObject !== undefined) {
video.mozSrcObject = stream;
console.log(video.mozSrcObject +" = "+ stream)
} else if (video.srcObject !== undefined) {
video.srcObject = stream;
console.log(video.srcObject +" = "+ stream)
} else {
video.src = stream;
console.log(video.src +" = "+ stream)
}
streamSrc = stream;
})
.catch(e => console.error(e));
}
w Chrome na moim Samsung S8 mogę użyć «facingMode» = «środowisko», aby wziąć wideo z «aparatem tylnym» . Domyślną wydaje się być "użytkownik" (zwanego dalej 'przód' kamera)
w maszynopisie:
const video = document.getElementById("video");
const constraints = {
advanced: [{
facingMode: "environment"
}]
};
navigator.mediaDevices
.getUserMedia({
video: constraints
})
.then((stream) => {
video.src = window.URL.createObjectURL(stream);
video.play();
});
- 1. Wykrywanie braku tylnej kamery
- 2. JSartoolkit: camera_para.dat dla tylnej kamery Android
- 3. iPhone 4 AVFoundation: Przechwytywanie z przedniej i tylnej kamery jednocześnie
- 4. Włączanie kamery internetowej Android w emulatorze
- 5. Jak mogę transmitować wideo z mojej kamery z Html5?
- 6. sposób ustawiania zoomu kamery z frontem z szybkim avfoundation
- 7. Pozostawić tylko dostęp do urządzenia kamery w HTML5
- 8. Close Cordova aplikacja na tylnej przycisku
- 9. Uzyskaj ostatni fragment w tylnej stosu
- 10. Problemy z przeglądarką Androida i widocznością od strony tylnej
- 11. Włączanie HttpWebResponse się z HttpResponseMessage
- 12. Włączanie/wyłączanie urządzenia z Androidem
- 13. Zrzut ekranu z kamery internetowej
- 14. Ruch kamery z odpowiednich obrazów
- 15. Sterowanie urządzeniem z kamery C#
- 16. Problem z orientacją kamery OpenCV
- 17. Jak uzyskać dostęp do kamery internetowej z Javascriptem
- 18. 3D rekonstrukcja z kalibrowanych zdjęć z kamery
- 19. Włączanie lampy błyskowej podczas nagrywania wideo
- 20. Włączanie lub wyłączanie opcji z wybierz
- 21. Włączanie ScrollViewer HorizontalSnapPoints z wiążącą kolekcją
- 22. Włączanie CORS z żądaniami PAP/POST WebAPI?
- 23. Włączanie IEnumerable z IEnumerables do słownika
- 24. Włączanie monitora z aplikacji Google TV
- 25. Jak przechwytywać jednocześnie kamery przednie i tylne w Galaxy S4?
- 26. Jak uzyskać dostęp do kamery przez javascript
- 27. Włączanie VSync w Vulkan
- 28. Włączanie OpenSSL w XAMPP
- 29. Włączanie asercji na pakiet
- 30. Włączanie/wyłączanie Resharpera
Kinlan Próbowałem wersję beta (Google Chrome) i działa świetnie , Mam nadzieję, że ostateczna wersja wkrótce zaktualizuje moją przeglądarkę dzięki za napiwek. – raranibar
Pamiętaj, że getSources jest teraz przestarzałe. https://www.chromestatus.com/feature/4765305641369600 – Brad
Tak, muszę to zaktualizować. – Kinlan