在html5页面中添加canvas,HTML5 Canvas: 在HTML页面中添加Can...-UserMedia API：使用浏览器访问...-Javascript基础_169IT.COM...

使用 UserMedia API 访问摄像头的功能

最新版本的 chrome、firefox、 opera 已经支持

Camera and Video Control with HTML5 Example

video,img { display: block; margin: 0 0 20px 0; }

Camera and Video Control with HTML5

Take Photo

window.addEventListener("DOMContentLoaded", function(){

var width = 480;

varphoto = document.getElementById("photo");

varvideo = document.getElementById("video");

varcanvas = document.createElement("canvas");

varcontext = canvas.getContext("2d");

varmediaErr = function(error) {

console.log("media error: ",error);

};

varmediaConf = {

video: true , //寮€濮嬫憚鍍忓ご

audio: true ,//寮€鍚害鍏嬮

};

//event:take photo

document.getElementById("btn").addEventListener("click", function(){

context.drawImage(video, 0, 0, video.width, video.height);

photo.setAttribute('src', canvas.toDataURL('image/png'));

});

//event: resize video

video.addEventListener('play', function(ev){

setTimeout(function(){

if(video.videoWidth){

height = video.videoHeight/(video.videoWidth/width);

video.setAttribute('width', width);

video.setAttribute('height', height);

canvas.setAttribute('width',width);

canvas.setAttribute('height',height);

photo.setAttribute('width', width);

photo.setAttribute('height', height);

}else{

setTimeout(arguments.callee,100);

}

},100);

}, false);

// open media

if(navigator.getUserMedia) { // Standard, opera

navigator.getUserMedia(mediaConf, function(stream) {

video.src = stream;

video.play();

}, mediaErr);

} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed, chrome

navigator.webkitGetUserMedia(mediaConf, function(stream){

video.src = window.webkitURL.createObjectURL(stream);

video.play();

}, mediaErr);

}else if(navigator.mozGetUserMedia){ // firefox

navigator.mozGetUserMedia(mediaConf,function(stream){

video.mozSrcObject = stream;

video.play();

},mediaErr);

}else{

console.log('your browser do not support UserMedia API');

}

}, false);

// function runCode(id){

var obj=document.getElementById(id);

var win = window.open('', "_blank", '');

win.document.open('text/html', 'replace');

win.opener = null;

win.document.write(obj.value);

win.document.close();

}

// ]]>

Camera and Video Control with HTML5 Example

video,img { display: block; margin: 0 0 20px 0; }

Camera and Video Control with HTML5

Take Photo

window.addEventListener("DOMContentLoaded", function(){

var width = 480;

var photo = document.getElementById("photo");

var video = document.getElementById("video");

var canvas = document.createElement("canvas");

var context = canvas.getContext("2d");

var mediaErr = function(error) {

console.log("media error: ",error);

};

var mediaConf = {

video: true , //开始摄像头

audio: true ,//开启麦克风

};

//event:take photo

document.getElementById("btn").addEventListener("click", function(){

context.drawImage(video, 0, 0, video.width, video.height);

photo.setAttribute('src', canvas.toDataURL('image/png'));

});

//event: resize video

video.addEventListener('play', function(ev){

setTimeout(function(){

if(video.videoWidth){

height = video.videoHeight/(video.videoWidth/width);

video.setAttribute('width', width);

video.setAttribute('height', height);

canvas.setAttribute('width',width);

canvas.setAttribute('height',height);

photo.setAttribute('width', width);

photo.setAttribute('height', height);

}else{

setTimeout(arguments.callee,100);

}

},100);

}, false);

// open media

if(navigator.getUserMedia) { // Standard, opera

navigator.getUserMedia(mediaConf, function(stream) {

video.src = stream;

video.play();

}, mediaErr);

} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed, chrome

navigator.webkitGetUserMedia(mediaConf, function(stream){

video.src = window.webkitURL.createObjectURL(stream);

video.play();

}, mediaErr);

}else if(navigator.mozGetUserMedia){ // firefox

navigator.mozGetUserMedia(mediaConf,function(stream){

video.mozSrcObject = stream;

video.play();

},mediaErr

[3]Javascript基础

来源: 互联网  发布时间: 2013-11-22

下面这些题目说他是js中的基础，确实是基础，可不借助IDE工具的时候，谁又真正能做出几个......

alert(typeof(NaN)); //Number

alert(typeof(Infinity)); //Number,Infinity 属性用于存放表示正无穷大的数值。

alert(typeof(null)); //object

alert(typeof(undefined)); //undefined

alert(parseInt("123abc")); //123

alert(new String("abc") == "abc"); //true

alert(new String("abc") === "abc"); //false

alert("abc" == "abc"); //true

alert("abc" === "abc"); //true

1、

var a = "123abc";

alert(typeof(a++)); //string

alert(a); //Nan

2、

var a = "123abc";

a.valueOf = function(){

alert("***"); //不会执行到此函数

return parseInt(a);

}

alert(++a); //NaN

alert(a-0); //NaN

var a = new String("123abc");

a.valueOf = function(){

alert("***"); //会执行到此函数

return parseInt(a);

}

alert(++a); //124

alert(a-0); //124

3、

var a = new Object();

a.toString = function(){

alert("toString");

return "123abc";

}

a.valueOf = function(){

alert("valueOf");

return parseInt(a);

}

alert(++a);

alert(a-0);

//执行结果：valueOf toString 124 124

//先进入valueOf方法 再进入toString方法

4、

var s = new String("abc");

alert(typeof(s) == typeof("abc")); //false 因为 typeof(s) 为object类型 typeof("abc"为string类型

alert(s === "abc"); //false

alert(s.toString() == s);

5、

var a = new Object();

a.toString = function(){return "a"};

var b = new Object();

b.toString = function(){return "b"};

alert(a>b); //false

a.valueOf = function(){return 1};

b.valueOf = function(){return 0};

alert(a>b); //true

作者：itmyhome 发表于2013-5-26 0:55:34 原文链接

阅读：138 评论：0 查看评论