网上的我看不懂,哪个高手可以讲的详细点
我只会写到这
<!DOCTYPE HTML>
<html>
<body>
<video src="/i/movie.ogg" width="320" height="240" controls="controls"></video>
</body>
</html>
显示PC的摄像头的实时视频
HTML5ææ¯æ¯æWebAppå¨ææºä¸æç
§ï¼æ¾ç¤ºå¨é¡µé¢ä¸å¹¶ä¸ä¼ å°æå¡å¨ãè¿æ¯ææºå¾®ååºç¨ä¸å¸¸è§çåè½ï¼å½ç¶ä½ ä¹å¯ä»¥å¨å
¶å®ç±»ååºç¨ä¸éå½ä½¿ç¨æ¤ææ¯ã
ãã1ã è§é¢æµ
ããHTML5 ç The Media Captureï¼åªä½ææï¼ API æä¾äºå¯¹æå头çå¯ç¼ç¨è®¿é®ï¼ç¨æ·å¯ä»¥ç´æ¥ç¨ getUserMedia ï¼è¯·æ³¨æç®åä» ChromeåOperaæ¯æï¼è·å¾æå头æä¾çè§é¢æµãæ们éè¦åçæ¯æ·»å ä¸ä¸ªHTML5 ç Video æ ç¾ï¼å¹¶å°ä»æå头è·å¾çè§é¢ä½ä¸ºè¿ä¸ªæ ç¾çè¾å ¥æ¥æºã
<video id=âvideoâ autoplay=â"></video>
<script>
var video_element=document.getElementById(âvideoâ);
if(navigator.getUserMedia){ // operaåºä½¿ç¨opera.getUserMedianow
navigator.getUserMedia(âvideoâ,success,error); //successæ¯åè°å½æ°,å½ç¶ä½ ä¹å¯ä»¥ç´æ¥å¨æ¤åä¸ä¸ªå¿åå½æ°
}
function success(stream){
video_element.src=stream;
}
</script>
æ¤æ¶ï¼video æ ç¾å å°æ¾ç¤ºå¨æçæåè§é¢æµãä¸é¢éè¦è¿è¡æç §äºã
ãã2ã æç §
ããæç §æ¯éç¨HTML5çCanvasåè½ï¼å®æ¶æè·Videoæ ç¾çå 容ï¼å 为Videoå ç´ å¯ä»¥ä½ä¸ºCanvaså¾åçè¾å ¥ï¼æ以è¿ä¸ç¹å¾å¥½å®ç°ã主è¦ä»£ç å¦ä¸ï¼
var canvas=document.createElement(âcanvasâ); //å¨æå建ç»å¸å¯¹è±¡
var ctx=canvas.getContext(â2dâ);
var cw=vw,ch=vh;
ctx.fillStyle=â#ffffffâ;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //å°video对象å æå®çåºåææç»å¶å°ç»å¸ä¸æå®çåºåï¼å¯è¿è¡ä¸ç大ä¸çä½çç»å¶ã
document.body.append(canvas);
ãã3ã å¾çè·å
ããä»Canvasè·åå¾çæ°æ®çæ ¸å¿æè·¯æ¯ç¨canvasçtoDataURLå°Canvasçæ°æ®è½¬æ¢ä¸ºbase64ä½ç¼ç çPNGå¾åï¼ç±»ä¼¼äºâdata:image/png;base64,xxxxxâçæ ¼å¼ã
var imgData=canvas.toDataURL(âimage/pngâ);
è¿æ ·ï¼imgDataåéå°±åå¨äºä¸é¿ä¸²çå符æ°æ®å 容ï¼è¡¨ç¤ºçå°±æ¯ä¸ä¸ªPNGå¾åçbase64ç¼ç ãå 为çæ£çå¾åæ°æ®æ¯base64ç¼ç éå·ä¹åçé¨åï¼æ以è¦è®©å®é æå¡å¨æ¥æ¶çå¾åæ°æ®åºè¯¥æ¯è¿é¨åï¼æ们å¯ä»¥ç¨ä¸¤ç§åæ³æ¥è·åã
ãã第ä¸ç§ï¼æ¯å¨å端æªå22ä½ä»¥åçå符串ä½ä¸ºå¾åæ°æ®ï¼ä¾å¦ï¼
var data=imgData.substr(22);
ããå¦æè¦å¨ä¸ä¼ åè·åå¾çç大å°ï¼å¯ä»¥ä½¿ç¨ï¼
var length=atob(data).length; //atob å¯è§£ç ç¨base-64解ç çå串
ãã第äºç§ï¼æ¯å¨å端è·åä¼ è¾çæ°æ®åç¨åå°è¯è¨æªå22ä½ä»¥åçå符串ï¼ä¹å°±æ¯å¨åå°ç¥è¿ä¸é¢è¿æ¥ç´æ¥ä¸ä¼ ï¼ãä¾å¦PHPéï¼
$image=base64_decode(str_replace(âdata:image/jpeg;base64,â,â,$data);
ãã4ã å¾çä¸ä¼
ããå¨å端å¯ä»¥ä½¿ç¨Ajaxå°ä¸é¢è·å¾çå¾çæ°æ®ä¸ä¼ å°åå°èæ¬ãä¾å¦ä½¿ç¨jQueryæ¶å¯ä»¥ç¨ï¼
$.post(âupload.phpâ,{âdataâ:data});
å¨åå°æ们ç¨PHPèæ¬æ¥æ¶æ°æ®å¹¶åå¨ä¸ºå¾çã
function convert_data($data){
$image=base64_decode(str_replace(âdata:image/jpeg;base64,â,â,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,âw');
fwrite($fp,$image);
fclose($fp);
}
ãã以ä¸ç解å³æ¹æ¡ä¸ä» è½ç¨äºWeb Appæç §ä¸ä¼ ï¼ä¹å¯ä»¥éè¿Canvasçç¼è¾åè½å½æ°æä¾å¾çç¼è¾ï¼ä¾å¦è£åªãä¸è²ãæ¶é¸¦ãåç¹çåè½ï¼ç¶åæç¨æ·ç¼è¾å®çå¾çä¸ä¼ ä¿åå°æå¡å¨ä¸ã
ããå¨è¿å¨ä¸æè¡¥å ä¿®æ£çHTML5ç驱å¨ä¸ï¼Web Appä¸Native Appä¹é´çè·ç¦»å°è¶æ¥è¶å°ãå¨å¯é¢è§çä¸è¿çæªæ¥ï¼è¶æ¥è¶å¤èçåæ°çå¼å项ç®å¿ å°ä¼è¿ç§»å°WEBåºç¨ä¸æ¥ã
ãã1ã è§é¢æµ
ããHTML5 ç The Media Captureï¼åªä½ææï¼ API æä¾äºå¯¹æå头çå¯ç¼ç¨è®¿é®ï¼ç¨æ·å¯ä»¥ç´æ¥ç¨ getUserMedia ï¼è¯·æ³¨æç®åä» ChromeåOperaæ¯æï¼è·å¾æå头æä¾çè§é¢æµãæ们éè¦åçæ¯æ·»å ä¸ä¸ªHTML5 ç Video æ ç¾ï¼å¹¶å°ä»æå头è·å¾çè§é¢ä½ä¸ºè¿ä¸ªæ ç¾çè¾å ¥æ¥æºã
<video id=âvideoâ autoplay=â"></video>
<script>
var video_element=document.getElementById(âvideoâ);
if(navigator.getUserMedia){ // operaåºä½¿ç¨opera.getUserMedianow
navigator.getUserMedia(âvideoâ,success,error); //successæ¯åè°å½æ°,å½ç¶ä½ ä¹å¯ä»¥ç´æ¥å¨æ¤åä¸ä¸ªå¿åå½æ°
}
function success(stream){
video_element.src=stream;
}
</script>
æ¤æ¶ï¼video æ ç¾å å°æ¾ç¤ºå¨æçæåè§é¢æµãä¸é¢éè¦è¿è¡æç §äºã
ãã2ã æç §
ããæç §æ¯éç¨HTML5çCanvasåè½ï¼å®æ¶æè·Videoæ ç¾çå 容ï¼å 为Videoå ç´ å¯ä»¥ä½ä¸ºCanvaså¾åçè¾å ¥ï¼æ以è¿ä¸ç¹å¾å¥½å®ç°ã主è¦ä»£ç å¦ä¸ï¼
var canvas=document.createElement(âcanvasâ); //å¨æå建ç»å¸å¯¹è±¡
var ctx=canvas.getContext(â2dâ);
var cw=vw,ch=vh;
ctx.fillStyle=â#ffffffâ;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //å°video对象å æå®çåºåææç»å¶å°ç»å¸ä¸æå®çåºåï¼å¯è¿è¡ä¸ç大ä¸çä½çç»å¶ã
document.body.append(canvas);
ãã3ã å¾çè·å
ããä»Canvasè·åå¾çæ°æ®çæ ¸å¿æè·¯æ¯ç¨canvasçtoDataURLå°Canvasçæ°æ®è½¬æ¢ä¸ºbase64ä½ç¼ç çPNGå¾åï¼ç±»ä¼¼äºâdata:image/png;base64,xxxxxâçæ ¼å¼ã
var imgData=canvas.toDataURL(âimage/pngâ);
è¿æ ·ï¼imgDataåéå°±åå¨äºä¸é¿ä¸²çå符æ°æ®å 容ï¼è¡¨ç¤ºçå°±æ¯ä¸ä¸ªPNGå¾åçbase64ç¼ç ãå 为çæ£çå¾åæ°æ®æ¯base64ç¼ç éå·ä¹åçé¨åï¼æ以è¦è®©å®é æå¡å¨æ¥æ¶çå¾åæ°æ®åºè¯¥æ¯è¿é¨åï¼æ们å¯ä»¥ç¨ä¸¤ç§åæ³æ¥è·åã
ãã第ä¸ç§ï¼æ¯å¨å端æªå22ä½ä»¥åçå符串ä½ä¸ºå¾åæ°æ®ï¼ä¾å¦ï¼
var data=imgData.substr(22);
ããå¦æè¦å¨ä¸ä¼ åè·åå¾çç大å°ï¼å¯ä»¥ä½¿ç¨ï¼
var length=atob(data).length; //atob å¯è§£ç ç¨base-64解ç çå串
ãã第äºç§ï¼æ¯å¨å端è·åä¼ è¾çæ°æ®åç¨åå°è¯è¨æªå22ä½ä»¥åçå符串ï¼ä¹å°±æ¯å¨åå°ç¥è¿ä¸é¢è¿æ¥ç´æ¥ä¸ä¼ ï¼ãä¾å¦PHPéï¼
$image=base64_decode(str_replace(âdata:image/jpeg;base64,â,â,$data);
ãã4ã å¾çä¸ä¼
ããå¨å端å¯ä»¥ä½¿ç¨Ajaxå°ä¸é¢è·å¾çå¾çæ°æ®ä¸ä¼ å°åå°èæ¬ãä¾å¦ä½¿ç¨jQueryæ¶å¯ä»¥ç¨ï¼
$.post(âupload.phpâ,{âdataâ:data});
å¨åå°æ们ç¨PHPèæ¬æ¥æ¶æ°æ®å¹¶åå¨ä¸ºå¾çã
function convert_data($data){
$image=base64_decode(str_replace(âdata:image/jpeg;base64,â,â,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,âw');
fwrite($fp,$image);
fclose($fp);
}
ãã以ä¸ç解å³æ¹æ¡ä¸ä» è½ç¨äºWeb Appæç §ä¸ä¼ ï¼ä¹å¯ä»¥éè¿Canvasçç¼è¾åè½å½æ°æä¾å¾çç¼è¾ï¼ä¾å¦è£åªãä¸è²ãæ¶é¸¦ãåç¹çåè½ï¼ç¶åæç¨æ·ç¼è¾å®çå¾çä¸ä¼ ä¿åå°æå¡å¨ä¸ã
ããå¨è¿å¨ä¸æè¡¥å ä¿®æ£çHTML5ç驱å¨ä¸ï¼Web Appä¸Native Appä¹é´çè·ç¦»å°è¶æ¥è¶å°ãå¨å¯é¢è§çä¸è¿çæªæ¥ï¼è¶æ¥è¶å¤èçåæ°çå¼å项ç®å¿ å°ä¼è¿ç§»å°WEBåºç¨ä¸æ¥ã
温馨提示:答案为网友推荐,仅供参考
第1个回答 2015-04-18
这需要专门的服务器和插件 html5没有这功能
第2个回答 2015-04-18
HTML5是一系列新标签、新功能和新标准的集合,文档的基础格式很简单:
<!doctype html>
<html>
<head>
<title>HTML5 Page</title>
<meta charset="utf-8">
</head>
<body>
your contents
</body>
</html>
至于如何使用canvas、websocket、audio、geolocation等功能,三言两语实在说不清楚,还请你百度下html5,有很多教程。如果想买书,《Head First HTML5 Programming》作为入门是很不错的本回答被提问者采纳
<!doctype html>
<html>
<head>
<title>HTML5 Page</title>
<meta charset="utf-8">
</head>
<body>
your contents
</body>
</html>
至于如何使用canvas、websocket、audio、geolocation等功能,三言两语实在说不清楚,还请你百度下html5,有很多教程。如果想买书,《Head First HTML5 Programming》作为入门是很不错的本回答被提问者采纳