gpt4 book ai didi

android - 如何通过html5访问手机上的特定摄像头

转载 作者:太空宇宙 更新时间:2023-11-03 10:22:59 24 4
gpt4 key购买 nike

当我在android(4.0)手机上使用html5 'getUserMedia' API访问相机时,出现“前置摄像头”,但我想打开“后置摄像头”。示例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Html5 Mobile Carema</title>
<script src="js/jquery.js"></script>
<script>
$(document).ready(init);

function init() {
try {
window.URL = window.URL || window.webkitURL || window.msURL
|| window.oURL;
navigator.getUserMedia = navigator.getUserMedia
|| navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia || navigator.msGetUserMedia;


navigator.getUserMedia({
video : true
}, successsCallback, errorCallback);
} catch (err) {
// Tries it with old spec of string syntax
navigator.getUserMedia('video', successsCallback, errorCallback);
}
$(":button").click(function() {
slap();
});
}
function slap() {
var video = $("#myVideo")[0];
var canvas = capture(video);
$("#result").empty();
$("#result").append(canvas);
//alert();
var imgData = canvas.toDataURL('image/png;base64,');
//var imgData = canvas.toDataURL("image/png");
var imgData = imgData.substring(22);
//blb = dataURItoBlob(imgData);
//sendMsg(blb);
}
function errorCallback(err) {

}
function successsCallback(stream) {
$("#myVideo").attr("src", window.webkitURL.createObjectURL(stream));
}
function capture(video) {
var canvas = document.createElement('canvas');
var width = video.videoWidth;
var height = video.videoHeight;
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, 160, 120);
return canvas;
}

</script>
</head>
<body>
<video id="myVideo" autoplay="autoplay"></video>
<br> <input type="button" value="capture" />
<br><div id="result" style="width: 145px"></div>
<div>
<p id="resultMsg" style="color: red"></p>
<p id="decodeTime" style="color: green"></p>
</div>

</body>
</html>

我不知道如何访问 android 手机上的特定相机,有人知道吗?谢谢

最佳答案

现在可以使用 facingMode 属性在最新规范中指定相机:http://www.w3.org/TR/mediacapture-streams/#idl-def-VideoFacingModeEnum

此属性是 MediaStreamConstraints 对象的可选部分,它是 getUserMedia 方法的第一个参数。

这是规范中的一个简化示例:

var supports = navigator.mediaDevices.getSupportedConstraints();
if (!supports["facingMode"]) {
// Handle lack of browser support if necessary
}
var gotten = navigator.mediaDevices.getUserMedia({
video: {
facingMode: {exact: "environment"}
}
});

environment 表示设备的后置摄像头。其他值为 userleftright

请注意,对此的支持因浏览器/浏览器版本而异。

关于android - 如何通过html5访问手机上的特定摄像头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16805020/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com