canvas捕获摄像头实现类似抖音延迟扭曲特效动画效果代码-html代码-BFW代码库

canvas捕获摄像头实现类似抖音延迟扭曲特效动画效果代码

代码语言：html

所属分类：多媒体

代码描述：canvas捕获摄像头实现类似抖音延迟扭曲特效动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			html, body {
				height: 100%;
			}
			body {
				background-color: #000;
				margin: 0;
				overflow: hidden;
				display: flex;
				align-items: center;
			}
			canvas {
				display: block;
				width: 100%;
				transform: scaleX(-1);
			}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>

		<script>

			const video = document.createElement( 'video' );
			video.setAttribute( 'playsinline', true ); // Safari/iOS 🤦

			const constraints = { video: { facingMode: 'user' } };
			navigator.mediaDevices.getUserMedia( constraints )
				.then( function ( stream ) {

					video.srcObject = stream;
					video.onloadedmetadata = function () {

						video.play();

						init();

					};

				} );

			//

			const array = [];

			const canvas = document.getElementById( 'canvas�.........完整代码请登录后点击上方下载按钮下载查看