应用HTML5照相示例编码

日期:2020-10-12 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

演试详细地址: HTML5照相演试
最先,大家看看HTML编码构造,自然,这一部分的DOM內容应当是在客户容许应用其摄像头恶性事件考虑后,动态性载入转化成的。
留意: 大家选用的是 640X480的辨别率,假如选用JS动态性转化成,那末您是能够灵便操纵辨别率的。

拷贝编码
编码以下:

<!--
申明: 此div应当在容许应用webcam,互联网摄像头以后动态性转化成
宽高: 640 *480,自然,能够动态性操纵啦!
-->
<!--
Ideally these elements aren't created until it's confirmed that the
client supports video/camera, but for the sake of illustrating the
elements involved, they are created with markup (not JavaScript)
-->
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

JavaScript
要是上面的HTML元素建立进行,那末JavaScript一部分将简易的超乎你想像的简易:

拷贝编码
编码以下:

// 设定恶性事件监视,DOM內容载入进行,和jQuery的$.ready() 实际效果类似。
window.addEventListener("DOMContentLoaded", function() {
// canvas 元素将用于抓拍
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
// video 元素,将用于接受并播发摄像头 的数据信息流
video = document.getElementById("video"),
videoObj = { "video": true },
// 1个错误的回调函数涵数,在操纵台复印错误信息内容
errBack = function(error) {
if("object" === typeof window.console){
console.log("Video capture error: ", error.code);
}
};
// Put video listeners into place
// 对于规范的访问器
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
// 对照相按钮的恶性事件监视
document.getElementById("snap").addEventListener("click", function() {
// 画到画布上
context.drawImage(video, 0, 0, 640, 480);
});
}, false);

最终,记得讲您的网页页面放到web服务器下面,随后根据http协议书来浏览哦。
此外,必须访问器版本号较新,而且适用HTML5的有关新特点才能够。
译者不算称职啦,沒有按原文来汉语翻译。应用的访问器是chrome 28。
最终,贴上详细的编码,较为死板。

拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<title> 访问器webcamera </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="renfufei">
<meta name="Description" content="inveted by: http://davidwalsh.name/browser-camera">
<script>
// 设定恶性事件监视,DOM內容载入进行,和jQuery的$.ready() 实际效果类似。
window.addEventListener("DOMContentLoaded", function() {
// canvas 元素将用于抓拍
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
// video 元素,将用于接受并播发摄像头 的数据信息流
video = document.getElementById("video"),
videoObj = { "video": true },
// 1个错误的回调函数涵数,在操纵台复印错误信息内容
errBack = function(error) {
if("object" === typeof window.console){
console.log("Video capture error: ", error.code);
}
};
// Put video listeners into place
// 对于规范的访问器
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
// 对照相按钮的恶性事件监视
document.getElementById("snap").addEventListener("click", function() {
// 画到画布上
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
</script>
</head>
<body>
<div>
<!--
申明: 此div应当在容许应用webcam,互联网摄像头以后动态性转化成
宽高: 640 *480,自然,能够动态性操纵啦!
-->
<!--
Ideally these elements aren't created until it's confirmed that the
client supports video/camera, but for the sake of illustrating the
elements involved, they are created with markup (not JavaScript)
-->
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
</div>
</body>
</html>
上一篇:HTML5 Canvas锯齿图编码案例 返回下一篇:没有了