Heim > Artikel > Web-Frontend > Ausführliche Erläuterung von Beispielen zur Implementierung der Kamerafunktion über H5

Ausführliche Erläuterung von Beispielen zur Implementierung der Kamerafunktion über H5

Y2JOriginal: 2018-05-25 09:21:435578Durchsuche

HTML5-Fotografie Schauen wir uns zunächst die HTML-Codestruktur an. Natürlich sollte dieser Teil des DOM-Inhalts dynamisch geladen und generiert werden, nachdem der Benutzer die Verwendung seines Kameraereignisses zugelassen hat Demoadresse: HTML5-Fotoaufnahme-Demo
Schauen wir uns zunächst die HTML-Codestruktur an. Natürlich sollte dieser Teil des DOM-Inhalts dynamisch geladen und generiert werden, nachdem der Benutzer die Verwendung seines Kameraereignisses zugelassen hat.
Hinweis: Wir verwenden die Auflösung 640X480. Wenn Sie JS zur dynamischen Generierung verwenden, können Sie die Auflösung flexibel steuern.

Der Code lautet wie folgt:

<!-- 
声明： 此p应该在允许使用webcam，网络摄像头之后动态生成 
宽高： 640 *480,当然，可以动态控制啦! 
--> 
<!-- 
Ide
all
y these elements aren&#39;t created until it&#39;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
Solange das obige HTML-Element erstellt wird, wird der JavaScript-Teil einfacher als Sie sich vorstellen Einfach:

Der Code lautet wie folgt:

// 设置事件监听，DOM内容加载完成，和
jQuery
的$.ready() 效果差不多。 
window.addEvent
List
ener("DOMContentLoaded", function() { 
// canvas 元素将用于抓拍 
var canvas = 
document
.getElementById("canvas"), 
context = canvas.getContext("2d"), 
// video 元素，将用于接收并播放摄像头 的数据流 
video = document.getElementById("video"), 
videoObj = { "video": true }, 
// 一个出错的
回调函数
，在控制台打印出错信息 
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);

Denken Sie abschließend daran, Ihre Webseite unter dem Webserver zu platzieren und dann über das http-Protokoll darauf zuzugreifen.
Außerdem muss die Browserversion neuer sein und die neuen Funktionen von HTML5 unterstützen.
Der Übersetzer ist nicht qualifiziert, da er nicht gemäß dem Originaltext übersetzt hat. Der verwendete Browser ist Chrome 28.
Fügen Sie abschließend den vollständigen Code ein, der ziemlich langweilig ist.

Der Code lautet wie folgt:

<!DOCTYPE html> 
<html> 
<head> 
<title> 浏览器webcamera </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content="renfufei@qq.com"> 
<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 }, 
// 一个出错的回调函数，在控制台打印出错信息 
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> 
<p> 
<!-- 
声明： 此p应该在允许使用webcam，网络摄像头之后动态生成 
宽高： 640 *480,当然，可以动态控制啦! 
--> 
<!-- 
Ideally these elements aren&#39;t created until it&#39;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> 
</p> 
</body> 
</html>

[Verwandte Empfehlungen]

1 Kostenloses HTML5-Video-Tutorial

2 . Detaillierte Erläuterung der Methode zur Implementierung der Vollbildwiedergabe auf WeChat in HTML5

3 Detaillierte Erläuterung von Browserkompatibilitätsproblemen mit neuen H5-Tags

4. Gesamtübersicht So erstellen Sie eine Webseite mit H5

5.Der Unterschied zwischen H5 und herkömmlichem HTML

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen zur Implementierung der Kamerafunktion über H5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Der Unterschied zwischen H5 und herkömmlichem HTMLNächster Artikel：Der Unterschied zwischen H5 und herkömmlichem HTML

In Verbindung stehende Artikel

Mehr sehen