WebRTC源码研究（15）从视频中获取图

最新推荐文章于 2024-10-19 20:26:04 发布

极客雨露

最新推荐文章于 2024-10-19 20:26:04 发布

阅读量331

点赞数

分类专栏： WebRTC

本文链接：https://blog.youkuaiyun.com/kyl282889543/article/details/106728080

版权

文章目录

WebRTC源码研究（15）从视频中获取图

WebRTC源码研究（15）从视频中获取图

1. WebRTC抓拍图片的api

从视频中获取一张图片的方式有很多，如果视频已经渲染到UI上面了，那么可以提前图片的方式就更灵活了，最简单的方式就是我们经常使用的截屏功能，截屏实现的原理就是在获取画布的当前快照，在IOS中我们可以直接从layer中获取当前绘制的上下文，PC，android的原理也是类似。另外还有一种就是直接从视频流中截取一个关键帧实现抓拍功能。

下面我们看看WebRTC在浏览器中给我们提供哪些获取图片的api

2. WebRTC抓拍图片的实战

在浏览器中的视频中获取图片其实也可以和上面说的一样，通过快照的方式获取。具体实现就是通过HTML中的canvas标签，从视频流中获取当时的帧，然后把这个帧输出成一个图片就可以了。

我们下面实现一下，首先要拿到音视频流，然后我们要增加两个元素，一个是按钮，这个按钮主要是像相机的快门一样，当我点击这个按钮的时候就拍一张照片。

其中第二个是canvas,canvas具体是将视频流中的触发的帧获取到读成我们想要的图片就可以了。点击获取图片按钮后，canvas就获取到图片了，右击图片，就可以保存下来

具体代码如下：
index.html

<html>
  <head>
    <title>捕获音视频数据 孔雨露 20200603</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>
		<div>
			<label>audio Source:</label>
			<select id="audioSource"></select>
		</div>
 
		<div>
			<label>audio Output:</label>
			<select id="audioOutput">&

最低0.47元/天解锁文章