WebRtc视频特效

webrtc 给视频加特效就是给视频加上指定的css 样式filter（在谷歌浏览器里使用-webkit-filter，IE里使用filter）

下面列出一些支持的特效种类

1.grayscale 灰度

2.drop-shadow 阴影

3.blur 模糊

4.invert 反色

5.hue-rotate 色相旋转

6.contrast 对比度

7.saturate 饱和度

8.brightness 亮度

9.sepia 褐色

10.opacity 透明度

示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>WebRTC capture video and audio</title><style>.none{-webkit-filter: none;} .blur{-webkit-filter: blur(3px);}.grayscale{-webkit-filter: grayscale(1);}.invert{-webkit-filter: invert(1);}.sepia{-webkit-filter: sepia(1);}.drop-shadow{-webkit-filter: drop-shadow(30px 10px 4px);}</style></head><body><div><label>audio input device</label><select id="audioinput"></select></div><div><label>audio output device</label><select id="audiooutput"></select></div><div><label>video input device</label><select id="videoinput"></select></div><div><label>filter</label><select id="filter"><option value="none">None</option><option value="blur">Blur</option><option value="grayscale">Grayscale</option><option value="invert">Invert</option><option value="sepia">Sepia</option><option value="drop-shadow">DropShadow</option></select></div><video autoplay playsinline id="player"></video><!-- autoplay:拿到视频源的时候直接播放playsinline:表示在浏览器中播放，而不是调用第三方工具--><script>var audioSource = document.querySelector("select#audioinput");var audiooutput = document.querySelector("select#audiooutput");var videoinput = document.querySelector("select#videoinput");var filterSelect = document.querySelector("select#filter");function gotDevices(deviceInfos){deviceInfos.forEach(item => {console.log(item);var option = document.createElement('option');option.text = item.label;option.value = item.deviceId;if(item.kind === "audioinput"){audioSource.appendChild(option);}else if(item.kind === "audiooutput"){audiooutput.appendChild(option);}else if(item.kind === "videoinput"){videoinput.appendChild(option);}})}function gotMediaStream(stream){var videoplay = document.getElementById('player');videoplay.srcObject = stream;return navigator.mediaDevices.enumerateDevices();}function handleError(err){console.log("error:"+err);}function start(){if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia){console.log('getUserMedia is not support');return;}else{var deviceId = videoinput.value;console.log(deviceId);var constrains = {video : {width:640,height:480, frameRate:30,//宽高帧率可以设置成对象 {max：XX，min：XX} 这样系统会在你设置的范围内自动选择一个较好的facingMode:'enviroment',deviceId : deviceId ? deviceId : undefined},audio : {echoCancellation : true,noiseSuppression : true}}navigator.mediaDevices.getUserMedia(constrains).then(gotMediaStream).then(gotDevices).catch(handleError);}}start();videoinput.onchange = start;filterSelect.onchange = function(){document.getElementById('player').className = filterSelect.value;}</script></body>
</html>

WebRtc视频特效相关推荐

【webrtc】视频特效的添加（15）
文档gitbook地址文档github地址 invert none gray sepia //html <!DOCTYPE html> <html> <head> ...
手把手实现火爆全网的视频特效 “蚂蚁呀嘿”，太魔性了
点击上方"3D视觉工坊",选择"星标" 干货第一时间送达导读 Hi,大家好,今天是周末,今天给各位读者分享最近很火的视频特效. 将会依据现有的demo,一步步 ...
那么多短视频特效，凭什么抖音出的这么火
萧箫发自凹非寺量子位报道 | 公众号 QbitAI 说到短视频特效,你或许第一时间会想到"抖音特效". 没错,抖音的特效似乎总是火到出圈,像用一段视频让你"重返三 ...
5分钟快速打造WebRTC视频聊天转
原文地址: 5分钟快速打造WebRTC视频聊天百度一下WebRTC,我想也是一堆.本以为用这位朋友( 搭建WebRtc环境 )的SkyRTC-demo 就可以一马平川的实现聊天,结果折腾了半天,文本 ...
机器学习帮助WebRTC视频质量评价
本文来自CosMos Software创始人Alex. Gouaillard的博客,他同时为WebRTC.QUIC等标准组织工作.LiveVideoStack对原文进行了摘译. 文 / Alex. G ...
短视频APP开发：短视频特效SDK功能火爆来袭！
为什么短视频这么火呢?因为它符合了用户碎片化时间的需求,既娱乐了大众,又不会浪费用户太多时间. 短视频APP开发以互联网技术为核心,在原有的基础上不断进行创新,进而拥有多种强大的拍摄功能,让用户可以快 ...
webrtc 视频 demo
webrtc 视频 demo webrtc网上封装的很多,demo很多都是一个页面里实现的,今天实现了个完整的 , A 发视频给 B A webrtc.html作为offer <!DOCTYPE ...
编辑视频贴纸软件_视频特效编辑软件下载-视频特效编辑器下载V10.9.93-西西软件下载...
视频特效编辑器是一款非常不错的图片视频特效编辑应用.软件使用是完全免费的.视频特效编辑器app为您带来无与伦比的特效编辑.软件为用户提供了:配乐修改, 动感贴图,视频滤镜和特效,视频剪辑等功能.通过视 ...
怎么做视频特效？不妨试试抖音特效创作平台
在这个信息满天飞的时代,如何吸引用户主动的去接收信息对于内容生产来说至关重要,从相关资料了解到,视频是目前大家最喜欢的信息呈现方式,一个有趣的视频可能会吸引成千上万用户的注意力.引爆整个网络场,为信息 ...

WebRtc视频特效

WebRtc视频特效相关推荐

最新文章

热门文章