<html>
<body>
<!-- 用于展示摄像头视频流 -->
<video id="video" autoplay style="width: 480px;height: 320px"></video>
<div>
<button id="capture" οnclick="handleClickCapture()">拍照</button>
</div>
<!-- 展示拍摄的照片 -->
<canvas id="canvas" width="480" height="320"></canvas>
<script>
var video = document.getElementById('video');
var capture = document.getElementById('capture');
var ctx = document.getElementById('canvas').getContext('2d');
/**
* 调用用户媒体设备
* @param constraints 配置信息
* @param success 成功回调函数
* @param error 失败回调函数
*/
function getUserMediaToPhoto(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(constraints, success, error);
} else if (navigator.mozGetUserMedia) {
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
navigator.getUserMedia(constraints, success, error);
}
}
/**
* 成功回调函数
* @param stream 视频流
*/
function success(stream) {
var CompatibleURL = window.URL || window.webkitURL;
try {
video.src = CompatibleURL.createObjectURL(stream);
} catch (e) {
video.srcObject = stream;
}
video.play();
}
/**
* 失败回调
* @param error 错误对象
*/
function error(error) {
console.log('无法访问媒体设备', error);
}
if (navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia) {
getUserMediaToPhoto({ video: { width: 480, height: 320 } }, success, error);
} else {
alert('不支持访问用户媒体设备');
}
/**
* 拍照按钮点击事件
*/
function handleClickCapture() {
ctx.drawImage(video, 0, 0, 480, 320);
}
</script>
</body>
</html>
如何通过Js调用硬件摄像头
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 在升级到iOS10之后, 开发过程中难免会遇到很多的坑, 下面是一些常见的坑, 我做了一些整理, 希望对大家开发有...
- 一.加载webview 注意import JavaScriptCore 后面要用 二.建立和js的协议 四.交互
