让HTML5支持后置摄像头：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 GetUserMedia Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia();" /><br />
<video height="120px" autoplay="autoplay"></video><hr />
<input type="button" title="拍照" value="拍照" onclick="getPhoto();" /><br />
<canvas id="canvas1" height="120px" ></canvas><hr />
<input type="button" title="视频" value="视频" onclick="getVedio();" /><br />
<canvas id="canvas2" height="120px"></canvas>
<script type="text/javascript">
var video = document.querySelector('video');
var audio, audioType;
var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d');
var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext('2d');
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
var exArray = []; //存储设备源ID
MediaStreamTrack.getSources(function (sourceInfos) {
for (var i = 0; i != sourceInfos.length; ++i) {
var sourceInfo = sourceInfos[i];
//这里会遍历audio,video，所以要加以区分
if (sourceInfo.kind === 'video') {
exArray.push(sourceInfo.id);
}
}
});
function getMedia() {
if (navigator.getUserMedia) {
navigator.getUserMedia({
'video': {
'optional': [{
'sourceId': exArray[1] //0为前置摄像头，1为后置
}]
},
'audio':true
}, successFunc, errorFunc); //success是获取成功的回调函数
}
else {
alert('Native device media streaming (getUserMedia) not supported in this browser.');
}
}
function successFunc(stream) {
//alert('Succeed to get media!');
if (video.mozSrcObject !== undefined) {
//Firefox中，video.mozSrcObject最初为null，而不是未定义的，我们可以靠这个来检测Firefox的支持
video.mozSrcObject = stream;
}
else {
video.src = window.URL && window.URL.createObjectURL(stream) || stream;
}
//video.play();
// 音频
audio = new Audio();
audioType = getAudioType(audio);
if (audioType) {
audio.src = 'polaroid.' + audioType;
audio.play();
}
}
function errorFunc(e) {
alert('Error！'+e);
}
// 将视频帧绘制到Canvas对象上,Canvas每60ms切换帧，形成肉眼视频效果
function drawVideoAtCanvas(video,context) {
window.setInterval(function () {
context.drawImage(video, 0, 0,90,120);
}, 60);
}
//获取音频格式
function getAudioType(element) {
if (element.canPlayType) {
if (element.canPlayType('audio/mp4; codecs="mp4a.40.5"') !== '') {
return ('aac');
} else if (element.canPlayType('audio/ogg; codecs="vorbis"') !== '') {
return ("ogg");
}
}
return false;
}
// vedio播放时触发，绘制vedio帧图像到canvas
// video.addEventListener('play', function () {
// drawVideoAtCanvas(video, context2);
// }, false);
//拍照
function getPhoto() {
context1.drawImage(video, 0, 0,90,120); //将video对象内指定的区域捕捉绘制到画布上指定的区域，实现拍照。
}
//视频
function getVedio() {
drawVideoAtCanvas(video, context2);
}
</script>
</body>
</html>
相关推荐
在IT行业中，尤其是在移动应用和Web开发领域，能够利用HTML来调用设备的后置摄像头进行二维码扫描是一项非常实用的技术。这项技术使得开发者无需依赖原生应用，即可为用户提供便捷的二维码识别服务，大大简化了跨...
本示例主要介绍如何在uni-app中实现调用摄像头进行扫码功能，同时支持前置和后置摄像头切换。这个功能在很多场景下都非常实用，比如商品扫码、二维码登录等。 首先，你需要在你的uni-app项目中引入扫码相关的插件。...
由于大部分现代浏览器都支持HTML5，因此使用HTML5开发的应用可以无缝运行在不同的操作系统和设备上，包括桌面电脑、智能手机和平板电脑。这使得基于Web的二维码扫描功能可以在多个平台上工作，无需为每个平台编写...
facingMode: "environment", // 使用后置摄像头 qrBox: 250, // 设置扫描区域大小 success: function (result) { alert('扫描结果: ' + result); }, error: function (err) { alert('错误信息: ' + err.name)...
但借助HTML5的Web API，特别是`navigator.mediaDevices.getUserMedia()`方法，我们可以请求用户授权访问摄像头，从而实现在网页中调用摄像头进行扫码。这个方法是WebRTC的一部分，用于获取用户的音频或视频输入流。 ...
描述中提到的"可以设置前后摄像头"意味着应用能够切换到设备的前置或后置摄像头。在Delphi XE中，这通过`Camera`类的`setFacing()`方法来实现，选择`Camera.FACING_FRONT`或`Camera.FACING_BACK`来切换。 "支持USB...
在给定的压缩包“jssacn.zip”中，包含的资源是关于使用JavaScript来实现特定功能的源码，这些功能包括调用手机的后置摄像头、扫描二维码以及解析二维码内容。下面我们将详细探讨这些知识点。 首先，我们来看如何...
此外，早期的Chrome不支持选择后置摄像头，而某些版本的Pera则支持。因此，在实际开发中，通常需要借助polyfills或库如`adapter.js`来处理兼容性问题。 6. **权限管理**：调用摄像头时，浏览器会提示用户授权，用户...
3. 使用`navigator.getUserMedia`方法请求访问摄像头，传入适当的参数，如选择后置摄像头。 4. 获取到摄像头流后，将流连接到`<video>`元素，使其开始播放。 5. 可以在`<canvas>`上绘制`<video>`的帧，实现截图功能...
在本示例中，我们将探讨如何使用ASP.NET和HTML5技术实现在网页上调用摄像头进行拍照的功能。这个功能在现代Web应用中非常常见，比如在线证件照上传、虚拟试衣间、视频会议等场景。以下是你需要了解的关键知识点： 1...
navigator.mediaDevices.getUserMedia ...想正常使用API必须在https环境下进行，否则你会发现不管怎么写，都只能调用默认的摄像头（大部分都是前置，只有少部分是后置） 前端开发者可以将文件上传至码云仓库，获取
此演示使用 WebGL 和手机的后置摄像头。 它适用于 。 随着谷歌纸板，你不需要Firefox或Chrome的构建一个支持WebVR。 它可能适用于 Oculus Rift，但您需要找到一种方法将相机/电脑戴在头上。 使用 Oculus Rift，您...
MediaDevices API是HTML5的一个重要特性，允许网页访问用户的媒体设备，如摄像头和麦克风。Vue-Camera通过调用`navigator.mediaDevices.getUserMedia()`方法获取摄像头流，然后将其展示在页面上，用户就可以实时预览...
`capture`属性还有其他两个值，`user`和`environment`，它们分别对应前置摄像头和后置摄像头。如果你的应用需要指定使用哪一摄像头，可以通过这两个值进行设置。 最后，为了兼容不同平台和浏览器，可能还需要处理...
首先，我们要了解HTML5摄像头API。这是该项目的核心部分，它提供了访问设备摄像头的能力。在HTML5中，`getUserMedia` API允许我们获取用户的视频流，这使得在浏览器中实时显示摄像头画面成为可能。例如： ```html ...
此外，现代笔记本电脑和智能手机往往配备多个摄像头，如前置摄像头和后置摄像头。开发者常常需要根据应用需求来切换不同的摄像头。文章中介绍了如何通过navigator.mediaDevices.enumerateDevices方法来枚举所有媒体...
小米 A1 基础网站小米米A1（天梭）规格表特征规格中央...方面155.4 x 75.8 x 7.3毫米展示1920x1080 像素，5.5 (~401 PPI) 后置摄像头12 MP 双摄像头，LED 闪光灯前置摄像头5 议员发布日期2017年9月设备图片继续支持！
在本项目中，我们将探讨如何在Vue.js应用中利用Quagga库进行条形码扫描，特别是通过后置摄像头进行扫码。 首先，我们需要理解Vue.js的基础知识。Vue.js是一种渐进式JavaScript框架，它允许开发者构建用户界面并管理...
1300万像素的后置摄像头和500万像素的前置摄像头，满足了用户对拍照和自拍的需求。此外，红米Note2还支持双卡双待，适应不同用户的通信需求，而且有4G全网通版本，方便用户在不同网络环境下自由切换。 发布会结束后...
使用VideoOverlay JavaScript api，您可以在设备的前置和后置摄像头之间切换，从摄像头启动和停止视频预览以及调整摄像头的缩放级别。 启动摄像机后，其视频输出将显示在ezAR摄像机视图中。 默认情况下，摄像机视图...