html5视频抓取,js和HTML5基于过滤器从摄像头中捕获视频的方法

这篇文章主要介绍了js+HTML5基于过滤器从摄像头中捕获视频的方法,涉及javascript基于html5元素操作多媒体的使用技巧,需要的朋友可以参考下

本文实例讲述了js+HTML5基于过滤器从摄像头中捕获视频的方法。分享给大家供大家参考。具体如下：

index.html页面：

Native web camera streaming (getUserMedia) is not supported in this browser.

Current filter is: None

Click here to change video filter

HTML5 object

HTML5 object

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

}

script.js 文件：

// 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);

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/574816.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Android Audio Play Out Channel

Android Audio Play Out Channel

1: 7嘴8舌 扬声器, 耳机, 和听筒 就是通过: audiomanager.setmode(AudioManager.MODE_IN_COMMUNICATION)audiomanager.setSpeakerhponeOn(boolean value).这两个来设置.不过有的好像不支持的. 米手机上切换 扬声器和听筒不能切换 Android AudioTrack音频播放分析 音频资源在播…
阅读更多...
c html转换成word,C#实现HTML转WORD及WORD转PDF的方法

c html转换成word,C#实现HTML转WORD及WORD转PDF的方法

本文实例讲述了C#实现HTML转WORD及WORD转PDF的方法。分享给大家供大家参考。具体如下：功能：实现HTML转WORD，WORD转PDF具体代码如下：using System;using System.Collections.Generic;using System.ComponentModel;using System.Dat…
阅读更多...
bootstrap下拉框分页_【Bootstrap】 bootstrap-select2下拉菜单插件

bootstrap下拉框分页_【Bootstrap】 bootstrap-select2下拉菜单插件

这次开发了个小TRS系统，虽然是很小，但是作为初心者，第一次用到了很多看起来洋气使用起来有相对简单的各种前端(主要是和bootstrap配合使用)组件。包括bootstrap-select2，bootstrap-datetimepicker，bootstrap-fileinput…
阅读更多...
Java-eclipse快捷键及设置

Java-eclipse快捷键及设置

CtrlD: 删除当前行 CtrlAlt↓ 复制当前行到下一行(复制增加) CtrlAlt↑ 复制当前行到上一行(复制增加) Alt↓ 当前行和下面一行交互位置(特别实用,可以省去先剪切,再粘贴了) Alt↑ 当前行和上面一行交互位置(同上) Alt← 前一个编辑的页面 Alt→ 下一个编辑的页面(当然是针对上…
阅读更多...
html 网页主题设置吗,如何使用css样式对html页面进行背景设置呢？

html 网页主题设置吗,如何使用css样式对html页面进行背景设置呢？

摘要:下文讲述css样式对html页面的背景色、背景图片进行相关设置的方法分享，如下所示:在html中，定义元素的背景信息，可以采用以下css属性，如下所示:css属性功能background在此属性中,我们将所有的背景设置都放入此属性值中backgro…
阅读更多...
redis 缓存 @class: 会有 $hibernateproxy_微信亿级在线点赞系统，用Redis如何实现？

redis 缓存 @class: 会有 $hibernateproxy_微信亿级在线点赞系统，用Redis如何实现？

点赞功能大家都不会陌生，像微信这样的社交产品中都有，但别看功能小，想要做好需要考虑的东西还挺多的，如海量数据的分布式存储、分布式缓存、多 IDC 的数据一致性、访问路由到机房的算法等等。图片来 Pexels本文介绍大型社交平台点…
阅读更多...
Xcode怎样调整模拟器大小

Xcode怎样调整模拟器大小

快捷键： Command 1：显示100%大小 Command 2：显示50%大小（默认）转载于:https://www.cnblogs.com/xiaofeng6636/p/4311753.html
阅读更多...
查询hive表_大数据中Hive与HBase的区别与联系

查询hive表_大数据中Hive与HBase的区别与联系

二者区别Hive：Hive是基于Hadoop的一个数据仓库工具，可以将结构化的数据文件映射为一张数据库表，并提供简单的sql查询功能。Hive本身不存储和计算数据，它完全依赖于HDFS和MapReduce，Hive中的表纯逻辑。hive需要用到hdfs…
阅读更多...
查询使用NoLock

查询使用NoLock

当我们在操作数据库的时候，无论是查询还是修改数据库的操作我们都习惯使用using(var dbnew XXXDB()){}，但是如果仅仅是做查询，最好是使用NoLock，因为NoLock使用的是共享锁，可以减少死锁发生的机率。 从上图中代码可以看…
阅读更多...
端午粽香html5游戏,《快乐端午粽飘香》亲子活动教案

端午粽香html5游戏,《快乐端午粽飘香》亲子活动教案

《快乐端午粽飘香》亲子活动教案过端午节是我国两千多年来的习惯，为了让幼儿更好地了解端午节，感受端午节丰富的文化内涵，激发初步的爱国主义情感，丰富生活经验，应届毕业生考试网小编特意为大家整理了《快乐端午粽飘香…
阅读更多...
d3js绘制y坐标轴_【ggplot2】 设置坐标轴

d3js绘制y坐标轴_【ggplot2】 设置坐标轴

基本箱线图library(ggplot2)bp ggplot(PlantGrowth, aes(xgroup, yweight)) geom_boxplot()bp反转 x轴 与 y轴bp coord_flip()离散型数据的坐标轴改变坐标轴中各项目的顺序 > 特别注意, 离散数据的坐标轴中数据做为 factor 变量处理,他的位置取决于 level的顺序# 手动设置…
阅读更多...
html5点击视频跳转,javascript – 播放后重定向html5视频

html5点击视频跳转,javascript – 播放后重定向html5视频

我有一个html 5视频,我删除了控制按钮并添加了一个js代码,以便用户在点击视频时播放视频.我需要做的是绑定一个额外的脚本,在播放视频后重定向页面而不重新加载页面.下面是我的js代码.function play(){var video document.getElementById(video);video.addEventListener(click…
阅读更多...
setInterval

setInterval

定义和用法： setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法…
阅读更多...
Android working with volley

Android working with volley

http://www.cnblogs.com/a284628487/p/4073771.html转载于:https://www.cnblogs.com/soaringEveryday/articles/4320262.html
阅读更多...
maya藤蔓插件_MAYA快速打造藤蔓生长的路径动画教程

maya藤蔓插件_MAYA快速打造藤蔓生长的路径动画教程

第一页：MAYA快速打造藤蔓生长的路径动画教程第二页：MAYA快速打造藤蔓生长的路径动画教程第三页：MAYA快速打造藤蔓生长的路径动画教程我相信很多人大部分时间在学习高级技巧，诸如zb mud啦，GI FG啦，motionBui…
阅读更多...
移动端拖拽排序 html,移动端拖拽排序

移动端拖拽排序 html,移动端拖拽排序

var drag {bindDragEvent: function (isF) {var father document.getElementById("public_theme_list");//父容器var btns father.getElementsByClassName("public-drag-btn");//事件源对象var items father.getElementsByClassName("item")…
阅读更多...
pyqt5 qscrollarea到达_pyqt5 QScrollArea设置在自定义侧(任何位置)

pyqt5 qscrollarea到达_pyqt5 QScrollArea设置在自定义侧(任何位置)

本例设置为垂直左侧scroll主要思想是利用一个长度为0的mid_frame，高度为待设置qwidget的高度，用mid_frame的moveEvent事件驱动qwidget的move我项目的效果图：代码及注释from PyQt5.Qt import *from sys import argv# 主窗口class Main(QMainWi…
阅读更多...
html页面判断是否登录,egg(103)--egg之定义公共的中间件判断用户是否登录以及去结算页面制作...

html页面判断是否登录,egg(103)--egg之定义公共的中间件判断用户是否登录以及去结算页面制作...

判断用户是否登录中间件app/middleware/userauth.jsmodule.exports (options, app) > {return async function init(ctx, next) {//判断前台用户是否登录 如果登录可以进入 ( 去结算 用户中心) 如果没有登录直接跳转到登录var userinfo ctx.service.cookies.get(userinfo)…
阅读更多...
3月初的日记：网站工作记录

3月初的日记：网站工作记录

一直在备考。考一个关于自己本身工作的资格证。也一直在忙碌中，三个项目的并驾齐驱。 可以说，我也很忙。 东北今天下了很大雪，厚厚的，踩上去咯吱咯吱的响，这样的安逸更容易使得心静下来。 但是，其实我是焦虑…
阅读更多...
电子科技大学研究生计算机与科学,2019年电子科技大学计算机科学与工程学院考研复试分数线...

电子科技大学研究生计算机与科学,2019年电子科技大学计算机科学与工程学院考研复试分数线...

据电子科技大学研究生院消息，2019年电子科技大学计算机科学与工程学院考研复试分数线及调剂信息已出，详情如下：专业第一单元第二单元第三单元第四单元总分调剂调剂开放时间调剂结束时间公开招考人数081200计算机科学与技术50458090340不接收2…
阅读更多...
最新文章

Copyright @ 2022~2023