webrtc 关于H5 和画布调用本地摄像头拍照功能的实现

1.代码的实现（html部分）<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>

2.js部分<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>

MediaDevices 的方法 enumerateDevices() 请求一个可用的媒体输入和输出设备的列表，例如麦克风，摄像机，耳机设备等。返回的 Promise 完成时，会带有一个描述设备的 MediaDeviceInfo 的数组。
https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/enumerateDevices

https://www.cnblogs.com/BelieveWang/p/8267152.html

webrtc 关于H5 和画布调用本地摄像头拍照功能的实现相关推荐

JS调用本地摄像头拍照（兼容各大浏览器及IE8+）
最近做的项目遇到了个难题,使用video+canvas+getUserMedia()写的调用本地摄像头拍照不兼容IE. 原因:IE8及以下不支持HTML5标签:video和canvas:IE11及以下 ...
利用python调用本地摄像头拍照，对图片命名并保存到指定位置，带界面
1.需求: 因项目需要做一个以图搜图的小程序,需要储备零件图库,约1000种 2.原计划&痛点原本想通过手机挨个拍照,再拷贝出来,重命名,这样会耽误大量时间,且容易出错 3.解决方案于是做 ...
html5 调用摄像头支持IE,JS调用本地摄像头拍照（兼容各大浏览器及IE8+）
最近做的项目遇到了个难题,使用video+canvas+getUserMedia()写的调用本地摄像头拍照不兼容IE. 原因:IE8及以下不支持HTML5标签:video和canvas:IE11及以下 ...
摄像头网页服务器,js调用本地摄像头拍照并上传到web服务器
[实例简介] js调用本地摄像头拍照并上传到web服务器.后台使用java实现图片的接收和存储,上传的图片默认保存到项目下的images文件夹中. [实例截图] [核心代码] MyCamera └── ...
php h5 调用摄像头_利用html5调用本地摄像头拍照上传图片
[php]代码库html5概念啥的就不废话了,不知道的百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的标签来获取本地摄像头,在html5之前,要在浏览器获取本地摄像头只有通过插件( ...
js调用本地摄像头拍照截图，提交后台
今天有个需求,需要在前端界面调用本地摄像头,然后拍照结束后可以截取预览,最后将结果提交到后台.查了网上很多的插件,发现适合的非常少,于是决定自己修改一个. 这里我修改了一个jquery插件,把摄像头拍 ...
摄像头自建html直播,H5代码实现调用本地摄像头实现实时视频以及拍照功能
效果这是柚子皮- getUserMedia API HTML 5 的getUserMedia API提供了访问媒体的能力, 基于该特性, 开发者可以不依赖任何浏览器插件下去访问视频和音频等设备. 旧 ...
vue+springboot实现调用本地摄像头拍照上传后端使用百度ocr识别身份证信息
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一.前端二.后端总结提示:以下是本篇文章正文内容,下面案例可供参考一.前端 1.首先进入页面打开摄像头 2.点击手动 ...
php调用本地摄像头,javascript 调用本地摄像头拍照 ajax提交上传
最近在做一个小应用,里面有一个功能就是需要打开摄像头拍照并且上传,今天就记录一下这个小功能. HTML篇: 这里我是用的layui的样式,需要先引用layui的样式,才会有上图的效果. * 照片: 点 ...

webrtc 关于H5 和画布调用本地摄像头拍照功能的实现

webrtc 关于H5 和画布调用本地摄像头拍照功能的实现相关推荐

最新文章

热门文章

webrtc 关于H5 和 画布 调用本地摄像头拍照功能的实现

webrtc 关于H5 和 画布 调用本地摄像头拍照功能的实现相关推荐

最新文章

热门文章

webrtc 关于H5 和画布调用本地摄像头拍照功能的实现

webrtc 关于H5 和画布调用本地摄像头拍照功能的实现相关推荐