html5调用摄像头实例
2018-03-08 21:15
381 查看
最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章,但各有瑕疵。于是自己查阅书籍写了一个demo,主要分三步,废话不多说上代码。
HTML代码部分:<!--video用于显示媒体设备的视频流,自动播放-->
<video id="video" autoplay style="width: 480px;height: 320px"></video>
<!--拍照按钮-->
<div>
<button id="capture">拍照</button>
</div>
<!--描绘video截图-->
<canvas id="canvas" width="480" height="320"></canvas>接下来是js代码部分:<script>
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var capture = document.getElementById('capture');
var context = canvas.getContext('2d');
function getUserMediaToPhoto(constraints,success,error) {
if(navigator.mediaDevices.getUserMedia){
//最新标准API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
}else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints,success,error);
}else if(navigator.mozGetUserMedia){
//firefox浏览器
navigator.mozGetUserMedia(constraints,success,error);
}else if(navigator.getUserMedia){
//旧版API
navigator.getUserMedia(constraints,success,error);
}
}
//成功回调函数
function success(stream){
//兼容webkit核心浏览器
var CompatibleURL = window.URL || window.webkitURL;
//将视频流转化为video的源
video.src = CompatibleURL.createObjectURL(stream);
video.play();//播放视频
}
function error(error) {
console.log('访问用户媒体失败:',error.name,error.message);
}
if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){
getUserMediaToPhoto({video:{width:480,height:320}},success,error);
}else{
alert('你的浏览器不支持访问用户媒体设备');
}
capture.addEventListener('click',function() {
// 将video画面描绘在canvas画布上
context.drawImage(video,0,0,480,320);
})
</script>值得注意的是:使用的时候打开摄像头一定要上server上打开,否则没办法使用!因为打开的是属于网络的webcam,需要在server上打开。目前好像chrome和opera还有大多数移动设备支持HTLM5打开摄像头,我这个是在chrome上测试成功的。还有一点,如果没成功,很可能是你不小心关闭了chrome打开摄像头的权限,你重新启用权限就可以啦!
HTML代码部分:<!--video用于显示媒体设备的视频流,自动播放-->
<video id="video" autoplay style="width: 480px;height: 320px"></video>
<!--拍照按钮-->
<div>
<button id="capture">拍照</button>
</div>
<!--描绘video截图-->
<canvas id="canvas" width="480" height="320"></canvas>接下来是js代码部分:<script>
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var capture = document.getElementById('capture');
var context = canvas.getContext('2d');
function getUserMediaToPhoto(constraints,success,error) {
if(navigator.mediaDevices.getUserMedia){
//最新标准API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
}else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints,success,error);
}else if(navigator.mozGetUserMedia){
//firefox浏览器
navigator.mozGetUserMedia(constraints,success,error);
}else if(navigator.getUserMedia){
//旧版API
navigator.getUserMedia(constraints,success,error);
}
}
//成功回调函数
function success(stream){
//兼容webkit核心浏览器
var CompatibleURL = window.URL || window.webkitURL;
//将视频流转化为video的源
video.src = CompatibleURL.createObjectURL(stream);
video.play();//播放视频
}
function error(error) {
console.log('访问用户媒体失败:',error.name,error.message);
}
if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){
getUserMediaToPhoto({video:{width:480,height:320}},success,error);
}else{
alert('你的浏览器不支持访问用户媒体设备');
}
capture.addEventListener('click',function() {
// 将video画面描绘在canvas画布上
context.drawImage(video,0,0,480,320);
})
</script>值得注意的是:使用的时候打开摄像头一定要上server上打开,否则没办法使用!因为打开的是属于网络的webcam,需要在server上打开。目前好像chrome和opera还有大多数移动设备支持HTLM5打开摄像头,我这个是在chrome上测试成功的。还有一点,如果没成功,很可能是你不小心关闭了chrome打开摄像头的权限,你重新启用权限就可以啦!
相关文章推荐
- Android上 用Html5做界面,javascript调用摄像头实例
- 如何实现html5的摄像头的调用
- Geolocation---HTML5调用百度地图API进行地理定位实例
- 使用HTML5+调用手机摄像头和相册
- HTML5调用手机摄像头拍照的实现思路及代码
- HTML5调用摄像头录制视频
- html5调用摄像头实现拍照(未测试)
- html5调用本机摄像头兼容谷歌浏览器高版本,谷歌浏览器低版本,火狐浏览器
- JAVA摄像头调用_实例---Win7
- Android调用JNI的进阶实例(摄像头预览数据转码RGB播放)
- HTML5使用 getUserMedia方法调用本地摄像头拍照
- HTML5调用手机摄像头拍照
- 利用html5调用本地摄像头拍照上传图片
- html5中调用摄像头拍照
- 【JNI】 Android调用JNI的进阶实例(摄像头预览数据转码RGB播放)
- html5 调用摄像头进行拍照
- web/html5调用摄像头实现二维码扫描
- web/html5调用摄像头实现二维码扫描
- HTML5 Canvas+JS控制电脑或手机上的摄像头实例
- HTML5通过js调用手机摄像头