火车头过滤 css样式

Webcam Video Capture in HTML5 and CSS3 filters As we know – HTML5 defines a new element called <video> for embedding video. Usually people use this element to embed a video into web page. It is very convenient. Because the <video> element is designed to be usable without any detection scripts. You can just specify multiple video files, and browsers that support HTML5 video will choose one based on what video formats they support. Now, let’s imagine that we can use the same element to access a user’s camera and microphone. Our article opens these boundaries. I’m going to show you how to capture a video from your webcam in HTML5, and even more, I will show you how to pass this video into <canvas> object, and even – how to apply custom CSS3 filters to our video.

HTML5和CSS3过滤器中的网络摄像头视频捕获众所周知，HTML5定义了一个名为<video>的新元素来嵌入视频。 通常，人们使用此元素将视频嵌入到网页中。 非常方便。 因为<video>元素被设计为无需任何检测脚本即可使用。 您可以只指定多个视频文件，支持HTML5视频的浏览器将根据其支持的视频格式选择一个。 现在，让我们想象一下，我们可以使用相同的元素来访问用户的相机和麦克风。 我们的文章打开了这些界限。 我将向您展示如何使用HTML5从网络摄像头捕获视频，甚至更多，我将向您展示如何将该视频传递到<canvas>对象，甚至–如何将自定义CSS3过滤器应用于我们的视频。

Today we will create a script which will capture a video stream from our webcam (into <video> element), at the right of our <video> element I will put a <canvas> element, and we will transfer the video from the video object directly into the canvas object. I’m going to use a new HTML5 – navigator.getUserMedia(). This function gives access to a user’s camera and microphone. Also, before we start I would like to inform you that our result works well only in few browsers, this are Chrome (I recommend to use the latest version) and Opera (version 12 and higher). But, it is going to work in future versions of FireFox browser too.

今天，我们将创建一个脚本，该脚本将从网络摄像头捕获视频流(到<video>元素中)，在我们的<video>元素的右侧，我将放置一个<canvas>元素，并从视频中传输视频对象直接进入画布对象。 我将使用新HTML5 – navigator.getUserMedia()。 使用此功能可以访问用户的相机和麦克风。 另外，在我们开始之前，我想通知您，我们的结果仅在少数浏览器中有效，这是Chrome(我建议使用最新版本)和Opera(12版及更高版本)。 但是，它也将在将来的FireFox浏览器版本中使用。

现场演示

步骤1. HTML (Step 1. HTML)

Our basic HTML markup does not contain a big deal, on the contrary – it is very easy:

相反，我们的基本HTML标记包含的内容并不多-很简单：

index.html (index.html)

<div class="warning"><h2>Native web camera streaming (getUserMedia) is not supported in this browser.</h2></div>
<div class="container"><h3>Current filter is: None</h3><button>Click here to change video filter</button><div style="clear:both"></div><div class="col"><h2>HTML5 &lt;video&gt; object</h2><video></video></div><div class="col"><h2>HTML5 &lt;canvas&gt; object</h2><canvas width="600" height="450"></canvas></div>
</div>

<div class="warning"><h2>Native web camera streaming (getUserMedia) is not supported in this browser.</h2></div>
<div class="container"><h3>Current filter is: None</h3><button>Click here to change video filter</button><div style="clear:both"></div><div class="col"><h2>HTML5 &lt;video&gt; object</h2><video></video></div><div class="col"><h2>HTML5 &lt;canvas&gt; object</h2><canvas width="600" height="450"></canvas></div>
</div>

There are a warning message (for browsers that do not support this functionality), a <video> element and <canvas> element.

有一个警告消息(对于不支持此功能的浏览器)，一个<video>元素和<canvas>元素。

步骤2. CSS (Step 2. CSS)

As I told in the beginning of our tutorial – we are going to use CSS3 filters. It is the time to define all these CSS3 filters:

正如我在本教程开始时所说的那样-我们将使用CSS3过滤器。 现在是时候定义所有这些CSS3过滤器了：

style.css (style.css)

.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);
}

.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);
}

As you can see – vendors prefixes are required. It gives possibility to use these filters in all major browsers.

如您所见–供应商前缀是必需的。 可以在所有主要浏览器中使用这些过滤器。

步骤3. HTML5 JavaScript (Step 3. HTML5 JavaScript)

Now, the most important step – html5, please create an empty script.js file and paste the next code:

现在，最重要的步骤-html5，请创建一个空的script.js文件并粘贴以下代码：

script.js (script.js)

// Main initialization
document.addEventListener('DOMContentLoaded', function() {// Global variablesvar video = document.querySelector('video');var audio, audioType;var canvas = document.querySelector('canvas');var context = canvas.getContext('2d');// Custom video filtersvar 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 getUserMedianavigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||navigator.mozGetUserMedia || navigator.msGetUserMedia;window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;if (navigator.getUserMedia) {// Evoke getUserMedia functionnavigator.getUserMedia({video: true, audio: true}, onSuccessCallback, onErrorCallback);function onSuccessCallback(stream) {// Use the stream from the camera as the source of the video elementvideo.src = window.URL.createObjectURL(stream) || stream;// Autoplayvideo.play();// HTML5 Audioaudio = new Audio();audioType = getAudioType(audio);if (audioType) {audio.src = 'polaroid.' + audioType;audio.play();}}// Display an errorfunction 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 objectfunction 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 canvasvideo.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);

// Main initialization
document.addEventListener('DOMContentLoaded', function() {// Global variablesvar video = document.querySelector('video');var audio, audioType;var canvas = document.querySelector('canvas');var context = canvas.getContext('2d');// Custom video filtersvar 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 getUserMedianavigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||navigator.mozGetUserMedia || navigator.msGetUserMedia;window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;if (navigator.getUserMedia) {// Evoke getUserMedia functionnavigator.getUserMedia({video: true, audio: true}, onSuccessCallback, onErrorCallback);function onSuccessCallback(stream) {// Use the stream from the camera as the source of the video elementvideo.src = window.URL.createObjectURL(stream) || stream;// Autoplayvideo.play();// HTML5 Audioaudio = new Audio();audioType = getAudioType(audio);if (audioType) {audio.src = 'polaroid.' + audioType;audio.play();}}// Display an errorfunction 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 objectfunction 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 canvasvideo.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);

Let’s review our code. In order to use webcam (or microphone) we use new navigator.getUserMedia function. As params, we use {video: true, audio: true}. In this case when we open the page, Chrome browser can throw an information bar with request to allow or deny use your webcam and microphone. Allow it. This is just browser’s security system. Beside main params, we can point two callback functions for navigator.getUserMedia: onSuccessCallback and onErrorCallback. In case of any error – we hide Video and Canvas objects and the display warning message: ‘Native web camera streaming (getUserMedia) is not supported in this browser’. If everything is fine – we use the stream from the camera as the source of the video element and play it. Beside html5 video, you can see here html5 audio as well. Next, in order to produce video stream to the <canvas> object – I use basic ‘drawImage’ function (which is invoked periodically to re-draw the canvas object). And finally, when we need to apply custom CSS3 filter, we can just change className of our Video and Canvas objecs.

让我们回顾一下我们的代码。 为了使用网络摄像头(或麦克风)，我们使用了新的navigator.getUserMedia函数。 作为参数，我们使用{video：true，audio：true}。 在这种情况下，当我们打开页面时，Chrome浏览器会抛出一个信息栏，其中包含允许或拒绝使用您的网络摄像头和麦克风的请求。 允许它。 这只是浏览器的安全系统。 除了主要参数外，我们还可以为navigator.getUserMedia指向两个回调函数：onSuccessCallback和onErrorCallback。 如果发生任何错误，我们将隐藏Video和Canvas对象，并显示警告消息：“此浏览器不支持本地网络摄像头流(getUserMedia)”。 如果一切都很好–我们将来自摄像机的流用作视频元素的源并进行播放。 除了html5视频外，您还可以在此处看到html5音频。 接下来，为了产生到<canvas>对象的视频流–我使用基本的'drawImage'函数(该函数会定期调用以重新绘制canvas对象)。 最后，当我们需要应用自定义CSS3过滤器时，我们只需更改Video和Canvas objecs的className即可。

现场演示

[sociallocker]

[社交储物柜]

下载包

[/sociallocker]

[/ sociallocker]

结论 (Conclusion)

The future is getting closer. I hope that everything is clean for today. If you have any suggestions about further ideas for articles – you are welcome to share them with us. Good luck in your work!

未来越来越近。 我希望今天一切都干净。 如果您对文章的进一步建议有任何建议，欢迎与我们分享。 祝您工作顺利！

翻译自: https://www.script-tutorials.com/webcam-video-capture-in-html5-and-css3-filters/

火车头过滤 css样式