Dieser Artikel stellt hauptsächlich die js+HTML5-Methode zum Erfassen von Videos von der Kamera basierend auf Filtern vor und beinhaltet die Verwendung von Javascript, um Multimedia basierend auf HTML5-Elementen zu betreiben.
Dies Der Artikel beschreibt Beispiele für die auf js+HTML5-Filtern basierende Methode zum Aufnehmen von Videos von der Kamera. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
index.html-Seite:
<p class="warning">
<h2>Native web camera streaming (getUserMedia) is not supported in this browser.</h2>
</p>
<p class="container">
<h3>Current filter is: None</h3>
<button>Click here to change video filter</button>
<p style="clear:both"></p>
<p class="col">
<h2>HTML5 <video> object</h2>
<video></video>
</p>
<p class="col">
<h2>HTML5 <canvas> object</h2>
<canvas width="600" height="450"></canvas>
</p>
</p>Nach dem Login kopieren
style.css-Datei:
.grayscale{
-webkit-filter:grayscale(1);
-moz-filter:grayscale(1);
-o-filter:grayscale(1);
-ms-filter:grayscale(1);
filter:grayscale(1);
}
.sepia{
-webkit-filter:sepia(0.8);
-moz-filter:sepia(0.8);
-o-filter:sepia(0.8);
-ms-filter:sepia(0.8);
filter:sepia(0.8);
}
.blur{
-webkit-filter:blur(3px);
-moz-filter:blur(3px);
-o-filter:blur(3px);
-ms-filter:blur(3px);
filter:blur(3px);
}
.brightness{
-webkit-filter:brightness(0.3);
-moz-filter:brightness(0.3);
-o-filter:brightness(0.3);
-ms-filter:brightness(0.3);
filter:brightness(0.3);
}
.contrast{
-webkit-filter:contrast(0.5);
-moz-filter:contrast(0.5);
-o-filter:contrast(0.5);
-ms-filter:contrast(0.5);
filter:contrast(0.5);
}
.hue-rotate{
-webkit-filter:hue-rotate(90deg);
-moz-filter:hue-rotate(90deg);
-o-filter:hue-rotate(90deg);
-ms-filter:hue-rotate(90deg);
filter:hue-rotate(90deg);
}
.hue-rotate2{
-webkit-filter:hue-rotate(180deg);
-moz-filter:hue-rotate(180deg);
-o-filter:hue-rotate(180deg);
-ms-filter:hue-rotate(180deg);
filter:hue-rotate(180deg);
}
.hue-rotate3{
-webkit-filter:hue-rotate(270deg);
-moz-filter:hue-rotate(270deg);
-o-filter:hue-rotate(270deg);
-ms-filter:hue-rotate(270deg);
filter:hue-rotate(270deg);
}
.saturate{
-webkit-filter:saturate(10);
-moz-filter:saturate(10);
-o-filter:saturate(10);
-ms-filter:saturate(10);
filter:saturate(10);
}
.invert{
-webkit-filter:invert(1);
-moz-filter:invert(1);
-o-filter: invert(1);
-ms-filter: invert(1);
filter: invert(1);
}Nach dem Login kopieren
script.js-Datei:
// Main initialization
document.addEventListener('DOMContentLoaded', function() {
// Global variables
var video = document.querySelector('video');
var audio, audioType;
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
// Custom video filters
var iFilter = 0;
var filters = [
'grayscale',
'sepia',
'blur',
'brightness',
'contrast',
'hue-rotate',
'hue-rotate2',
'hue-rotate3',
'saturate',
'invert',
'none'
];
// Get the video stream from the camera with getUserMedia
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
if (navigator.getUserMedia) {
// Evoke getUserMedia function
navigator.getUserMedia({video: true, audio: true}, onSuccessCallback, onErrorCallback);
function onSuccessCallback(stream) {
// Use the stream from the camera as the source of the video element
video.src = window.URL.createObjectURL(stream) || stream;
// Autoplay
video.play();
// HTML5 Audio
audio = new Audio();
audioType = getAudioType(audio);
if (audioType) {
audio.src = 'polaroid.' + audioType;
audio.play();
}
}
// Display an error
function onErrorCallback(e) {
var expl = 'An error occurred: [Reason: ' + e.code + ']';
console.error(expl);
alert(expl);
return;
}
} else {
document.querySelector('.container').style.visibility = 'hidden';
document.querySelector('.warning').style.visibility = 'visible';
return;
}
// Draw the video stream at the canvas object
function drawVideoAtCanvas(obj, context) {
window.setInterval(function() {
context.drawImage(obj, 0, 0);
}, 60);
}
// The canPlayType() function doesn't return true or false. In recognition of how complex
// formats are, the function returns a string: 'probably', 'maybe' or an empty string.
function getAudioType(element) {
if (element.canPlayType) {
if (element.canPlayType('audio/mp4; codecs="mp4a.40.5"') !== '') {
return('aac');
} else if (element.canPlayType('audio/ogg; codecs="vorbis"') !== '') {
return("ogg");
}
}
return false;
}
// Add event listener for our video's Play function in order to produce video at the canvas
video.addEventListener('play', function() {
drawVideoAtCanvas(this, context);
}, false);
// Add event listener for our Button (to switch video filters)
document.querySelector('button').addEventListener('click', function() {
video.className = '';
canvas.className = '';
var effect = filters[iFilter++ % filters.length]; // Loop through the filters.
if (effect) {
video.classList.add(effect);
canvas.classList.add(effect);
document.querySelector('.container h3').innerHTML = 'Current filter is: ' + effect;
}
}, false);
}, false);Nach dem Login kopieren
Das Obige ist der gesamte Inhalt dieses Artikels, Ich hoffe, dass es für das Lernen aller nützlich sein wird. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
So lösen Sie das Problem, dass die virtuelle HTML5-Tastatur das Eingabefeld blockiert
HTML5 Plus implementiert Mobilgeräte APP-Fotografie Oder die Funktion zum Auswählen von Bildern zum Hochladen in das Album
Das obige ist der detaillierte Inhalt vonjs- und HTML5-Filter-basierte Methode zum Aufnehmen von Videos von der Kamera. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
