2┃音视频直播系统之浏览器中通过 WebRTC 拍照片加滤镜并保存
一、拍照原理
好多人小时候应该都学过，在几张空白的纸上画同一个物体，并让物体之间稍有一些变化，然后连续快速地翻动这几张纸，它就形成了一个小动画，音视频播放器就是利用这样的原理来播放音视频文件的
播放器播的是非编码帧（解码后的帧），这些非编码帧就是一幅幅独立的图像
浏览器提供了一个非常强大的对象，称为Canvas，你可以把它想像成一块画布，你可以在上面画点、面、图形
拍照原理其实就是获取摄像头里面的非编码帧数据，并在Canvas上画出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TakePhoto</title>
</head>
<style>
video {
width: 800px;
height: 450px;
}
</style>
<body>
<h1>Realtime communication with WebRTC </h1>
<video autoplay playsinline></video>
<canvas id="picture"></canvas>
<button onclick="take_photo()">Take</button>
</body>
<script>
function take_photo() {
var picture = document.querySelector('canvas#picture');
// 设置图片宽高
picture.width = 640;
picture.height = 480;
// 获取当前正在播放的视频，进行绘图，也就是拍照
videoplay = document.querySelector('video');
picture.getContext('2d').drawImage(videoplay, 0, 0, picture.width, picture.height);
}
</script>
</html>二、Canvas绘图
canvas中提供了
ctx.drawImage(image, dx, dy, dWidth, dHeight)方法进行绘图image：可以是一幅图片，或 HTMLVideoElement，既可以是一幅图片，也可以是一个 Video 元素
dx, dy：图片起点的 x、y 坐标
dWidth：图片的宽度
dHeight：图片的高度
void ctx.drawImage(image, dx, dy, dWidth, dHeight);三、图片保存
首先，通过 Canvas 的 toDataURL 方法获得图片的 URL 地址
然后，创建一个<a>标签
将 URL 地址放到<a>标签中，当用户点击时就将图片下载下来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TakePhoto</title>
</head>
<style>
video {
width: 800px;
height: 450px;
}
</style>
<body>
<h1>Realtime communication with WebRTC </h1>
<video autoplay playsinline></video>
<canvas id="picture"></canvas>
<button onclick="take_photo()">Take</button>
<button onclick="save()"> 保存 </button>
</body>
<script>
var canvas = null;
function take_photo() {
var picture = document.querySelector('canvas#picture');
// 设置图片宽高
picture.width = 640;
picture.height = 480;
videoplay = document.querySelector('video');
canvas = picture.getContext('2d').drawImage(videoplay, 0, 0, picture.width, picture.height);
}
function save() {
var url = canvas.toDataURL("image/jpeg")
var oA = document.createElement("a");
oA.download = 'photo';// 设置下载的文件名，默认是'下载'
oA.href = url;
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
}
</script>
</html>四、实现滤镜
视频流中获取到照片后，你还可以通过滤镜为照片增加点特效，这样会让你的照片更加特别
在浏览器中对于图片的滤镜处理是通过 CSS 来控制的
首先在 HTML 中增加 CSS 的滤镜代码如下：
blur：模糊度
grayscale：灰度（黑白）
invert：反转
sepia：深褐色
当用户点击拍照时候，我们可以给canvas这个标签加上一个滤镜类命即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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);
}
</style>
</head>
<body>
<h1>Realtime communication with WebRTC </h1>
<video autoplay playsinline></video>
<canvas id="picture"></canvas>
<button onclick="take_photo()">Take</button>
<!-- 滤镜选择 -->
<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>
</select>
</body>
<script>
function take_photo() {
var picture = document.querySelector('canvas#picture');
// 设置图片宽高
picture.width = 640;
picture.height = 480;
//增加滤镜
picture.className = filtersSelect.value;
videoplay = document.querySelector('video');
canvas = picture.getContext('2d').drawImage(videoplay, 0, 0, picture.width, picture.height);
}
</script>
</html>2┃音视频直播系统之浏览器中通过 WebRTC 拍照片加滤镜并保存的更多相关文章
- 3┃音视频直播系统之浏览器中通过 WebRTC 直播视频实时录制回放下载
一.录制分类 在音视频会议.在线教育等系统中,录制是一个特别重要的功能 录制一般分为服务端录制和客户端录制 服务端录制:优点是不用担心客户因自身电脑问题造成录制失败(如磁盘空间不足),也不会因录制时抢 ...
- 4┃音视频直播系统之浏览器中通过 WebRTC 进行桌面共享
一.共享桌面原理 共享桌面在直播系统中是一个必备功能 共享者:每秒钟抓取多次屏幕,每次抓取的屏幕都与上一次抓取的屏幕做比较,取它们的差值,然后对差值进行压缩:如果是第一次抓屏或切幕的情况,即本次抓取的 ...
- 1┃音视频直播系统之浏览器中通过WebRTC访问摄像头
一.WebRTC的由来 对于前端开发小伙伴而言,如果用 JavaScript 做音视频处理 在以前是不可想象的,因为首先就要考虑浏览器的性能是否跟得上音视频的采集 但是 Google 作为国际顶尖科技 ...
- 5┃音视频直播系统之 WebRTC 中的协议UDP、TCP、RTP、RTCP详解
一.UDP/TCP 如果让你自己开发一套实时互动直播系统,在选择网络传输协议时,你会选择使用UDP协议还是TCP协议 假如使用 TCP 会怎样呢?在极端网络情况下,TCP 为了传输的可靠性,将会进行反 ...
- 10┃音视频直播系统之 WebRTC 中的数据统计和绘制统计图形
一.数据统计 在视频直播中,还有一项比较重要,那就是数据监控 比如开发人员需要知道收了多少包.发了多少包.丢了多少包,以及每路流的流量是多少,才能评估出目前用户使用的音视频产品的服务质量是好还是坏 如 ...
- 12┃音视频直播系统之 WebRTC 实现1对1直播系统实战
一.搭建 Web 服务器 前面我们已经实现过,但是没有详细说HTTPS服务 首先需要引入了 express 库,它的功能非常强大,用它来实现 Web 服务器非常方便 同时还需要引入 HTTPS 服务, ...
- 8┃音视频直播系统之 WebRTC 信令系统实现以及通讯核心并实现视频通话
一.信令系统 信令系统主要用来进行信令的交换 在通信双方彼此连接.传输媒体数据之前,它们要通过信令服务器交换一些信息,如规范协商 若 A 与 B 要进行音视频通信,那么 A 要知道 B 已经上线了,同 ...
- H264音视频直播系统 服务器端+客户端源码 可用于直播系统搭建
RTP协议实现直播系统搭建,采用H.264和AAC编码,码率极低,同时有较高的视频清晰度和音频音质,可用于视频聊天.视频会议.摄像头监控等多种应用场景. 直播系统搭建发布端,选择视频和音频设备,指定服 ...
- 6┃音视频直播系统之 WebRTC 核心驱动SDP规范协商
一.什么是SDP SDP(Session Description Protocal)其实就是当数据过来时候,告诉数据自己这里支持的解码方式.传输协议等等,这样数据才能根据正确的方式进行解码使用 SDP ...
随机推荐
- 学习Apache（四）
介绍 Apache HTTP 服务器被设计为一个功能强大,并且灵活的 web 服务器, 可以在很多平台与环境中工作.不同平台和不同的环境往往需要不同 的特性,或可能以不同的方式实现相同的特性最有效率. ...
- window onerror 各浏览器下表现总结
window onerror 各浏览器下表现总结 做前端错误上报,必然离不开window onerror,但window onerror在不同设备上表现并不一致,浏览器为避免信息泄露,在一些情况下并不 ...
- Web 开发中 Blob 与 FileAPI 使用简述
本文节选自 Awesome CheatSheet/DOM CheatSheet,主要是对 DOM 操作中常见的 Blob.File API 相关概念进行简要描述. Web 开发中 Blob 与 Fil ...
- 移动端H5页面中1px边框的几种解决方法
问题提出 这是一个比较老的问题了,我第一次注意到的时候,是UI设计师来找我麻烦,emmm那时候我才初入前端职场,啥也不懂啊啊啊啊啊,情形是这样的:设计师拿着手机过来:这些边框都粗了啊,我的设计稿上是1 ...
- OllyDbg---寄存器
寄存器 寄存器的概念和作用 寄存器是CPU内部的高速存储单元,访问速度比常规内存快很多. 处理器在执行程序时,需要一个助手,当执行一条指令时,比如将两个内存单元中存放的内容相加,处理器需要先把其中一个 ...
- nginx负载均衡的五种方式
文章目录 前言 :负载均衡是什么 一.方式1:轮询 二.方式2:权重 方式3:iphash 方式4:最小连接 方式5:fair 总结:根据这几种方式可以猜测处nginx的底层使用了计数器,从而可以将海 ...
- Spring-Bean标签属性scope范围
scope:指对象的作用范围,取值如下 1.singleton:默认值,单例的 2.prototype:多例的 3.request:WEB项目,Spring创建一个Bean的对象,把对象存入到requ ...
- Linux Red Hat 8.0虚拟机安装过程
Linux Red Hat 8.0虚拟机安装过程 一.安装虚拟机所需要的工具: 1.VMware Workstation Pro 2.Red Hat 8.0 虚拟机镜像 3.还有一个就是VMware的 ...
- 2021.07.17 题解 CF1385E Directing Edges（拓扑排序）
2021.07.17 题解 CF1385E Directing Edges(拓扑排序) CF1385E Directing Edges - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) ...
- 2021.10.29 P1649 [USACO07OCT]Obstacle Course S（BFS）
2021.10.29 P1649 [USACO07OCT]Obstacle Course S(BFS) 题意: 给一张n*n的图,起点为A,终点为 B,求从A到B转弯次数最少为多少. 分析: 是否存在 ...