html5调用摄像头使用Getusermedia和canvas
来源:互联网 发布:ubuntu apache2 php 编辑:程序博客网 时间:2024/05/01 02:44
Navigator.getUserMedia()方法提醒用户需要使用音频(0或者1)和(0或者1)视频输入设备,比如相机,屏幕共享,或者麦克风。如果用户给予许可,successCallback回调就会被调用,MediaStream
对象作为回调函数的参数。如果用户拒绝许可或者没有媒体可用,errorCallback就会被调用,类似的,PermissionDeniedError
或者NotFoundError
对象作为它的参数。注意,有可能以上两个回调函数都不被调用,因为不要求用户一定作出选择(允许或者拒绝)。
语法:
navigator.getUserMedia ( constraints, successCallback, errorCallback );
function(stream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(stream);
video.onloadedmetadata = function(e) {
// Do something with the video here.
};
}
参数
constraints
MediaStreamConstaints
对象指定了请求使用媒体的类型,还有每个类型的所需要的参数。具体细节请参见MediaDevices.getUserMedia()
方法下面的constraints部分。
在一个html页面调用js,首先完成compositionComplete,调用snapShot,采用Getusermedia,采集视频流,然后使用cavas画出一帧图像。并加水印保存到ICMS
示例代码:
//页面加载时必须完成一下动作,调用snapShot函数
this.compositionComplete = function () {
this.Visible.beginCameraDocVisible(true);
this.Visible.waitingCameraDocVisible(false);
this.Visible.endCameraDocVisible(false);
setTimeout(self.snapShot, 50);
};
//页面一打开,便调出摄像头,getUserMedia,采集视频流
this.snapShot = function () {
self.video.loop = self.video.muted = true;
self.video.load();
var constraints = {
//audio: true,
video: {
facingMode: "environment",
width: 800,
height: 800
}
};
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
self.mediaStream = stream;
console.info("after mediaStream");
var deferred = $.Deferred();
self.video.oncanplay = function (e) {
console.info("after oncanplay");
setTimeout(function () {
self.video.play();
self.canvas.width = self.video.videoWidth;
self.canvas.height = self.video.videoHeight;
}, 500);
setTimeout(function () { deferred.resolve(e); }, 2000);
};
console.info("before window.URL.createObjectURL");
self.video.src = window.URL.createObjectURL(stream);
console.info("after window.URL.createObjectURL");
return deferred.promise();
})
.then(function (e) {
//return self.TakePhoto();
})
.then(function () {
//self.SelectPhoto();
})
.catch(function (e) {
self.stop();
self.FailToAccessCamera();
})
;
};
//开始拍照,使用drawImage画布画图,并用fillText把水印加上,此时相机不可用,画布可用
this.TakePhoto = function () {
var context = self.canvas.getContext('2d');
context.drawImage(self.video, 0, 0, self.canvas.width, self.canvas.height);
//
context.font = "italic 20px sans-serif";
context.fillText("*****", 0, self.canvas.height - 10);
context.fillText(new Date().Format("yyyy-MM-dd HH:mm:ss"), 0, self.canvas.height - 30);
self.Visible.video(false);
self.Visible.canvas(true);
};
- html5调用摄像头使用Getusermedia和canvas
- HTML5使用 getUserMedia方法调用本地摄像头拍照
- HTML5调用手机摄像头拍照 - getUserMedia.js
- 使用HTML5+调用手机摄像头和相册
- HTML5调用手机前置摄像头或后置摄像头拍照,canvas显示,经过Android测试
- 关于HTML5的getUserMedia
- HTML5利用WebRTC的getUserMedia获取摄像头信息模拟拍照及视频(完整示例)
- HTML5调用本地摄像头
- HTML5调用本地摄像头
- html5 调用摄像头
- html5调用电脑摄像头
- HTML5调用手机摄像头
- html5调用摄像头
- html5调用本地摄像头
- html5调用手机摄像头
- HTML5 调用手机摄像头
- HTML5---Canvas(画布) 基础使用和介绍
- html5中的canvas和svg的使用
- 时间复杂度和空间复杂度
- Spring Ioc的基本原理及XML实现方法(下)
- [LeetCode] 583. Delete Operation for Two Strings
- 顺序表的简单实现
- Eclipse常用快捷键
- html5调用摄像头使用Getusermedia和canvas
- leetcode--Convert Sorted Array to Binary Search Tree
- win7环境下离线安装tensorflow
- XML格式数据与JSON格式数据学习笔记
- Java中匿名内部类总结
- 魔法练习
- 常用公共DNS
- G
- 剑指offer-08:旋转数组的最小数字