WebRtc视频特效

最新推荐文章于 2024-04-20 02:52:24 发布

-jieshi

最新推荐文章于 2024-04-20 02:52:24 发布

阅读量203

点赞数

文章标签： css webrtc

本文链接：https://blog.csdn.net/qq_38166944/article/details/120740270

版权

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>

-jieshi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WebRtc视频特效

webrtc 给视频加特效就是给视频加上指定的css 样式filter（在谷歌浏览器里使用-webkit-filter，IE里使用filter）下面列出一些支持的特效种类 1.grayscale 灰度 2.drop-shadow 阴影 3.blur 模糊 4.invert 反色 5.hue-rotate 色相旋转 6.contrast 对比度 7.saturat...
复制链接

扫一扫