? ? ? ? 這里我們用的是webrtc中的MediaDevices.getUserMedia()的瀏覽器api進行的效果實現，MediaDevices.getUserMedia()?會提示用戶給予使用媒體輸入的許可，媒體輸入會產生一個MediaStream，里面包含了請求的媒體類型的軌道。此流可以包含一個視頻軌道（來自硬件或者虛擬視頻源，比如相機、視頻采集設備和屏幕共享服務等等）、一個音頻軌道（同樣來自硬件或虛擬音頻源，比如麥克風、A/D 轉換器等等），也可能是其他軌道類型。
? ? ? ??它返回一個Promise對象，成功后會resolve回調一個MediaStream對象。若用戶拒絕了使用權限，或者需要的媒體源不可用，promise會reject回調一個?PermissionDeniedError?或者?NotFoundError?。
代碼：
HTML：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>webrtc實現拍照和濾鏡</title><link rel="stylesheet" href="./index.css">
</head>
<body><div id="container" style="width: fit-content;height: fit-content;position: relative;"><video id="video" src=""></video><div id="filter" class="filter"></div></div><select id="select"><option value="">無濾鏡</option><option value="style1">濾鏡1</option><option value="style2">濾鏡2</option><option value="style3">濾鏡3</option></select><h3>截圖展示</h3><button id="snap">截圖</button>
</body>
<script src="./index.js"></script>
</html>?js：
//獲取視頻流const constraints = {video: {width: { min: 300, ideal: 600, max: 900 },height: { min: 300, ideal: 600, max: 900 },frameRate: { ideal: 60, max: 120 }, //幀率}
}navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {const video = document.querySelector('video')video.srcObject = stream;video.onloadedmetadata = function (e) {video.play();}}).catch(function (err) {console.log("啟動失敗", err)})//設置視頻流濾鏡
const video = document.querySelector('.filter')
const selectVal = document.querySelector('#select')
selectVal.addEventListener('change', () => {video.className = 'filter' // 清空之前的類名if (selectVal.value) {video.classList.add(selectVal.value) // 添加新的類名}
})const snapButton = document.querySelector('#snap');
snapButton.addEventListener('click', () => {const canvas = document.createElement('canvas')const video = document.getElementById('video');const filterDiv = document.getElementById('filter');console.log(video,filterDiv)const ctx = canvas.getContext('2d');// 設置 Canvas 的寬高與容器相同const container = document.getElementById('container');canvas.width = container.offsetWidth;canvas.height = container.offsetHeight;// 繪制視頻的當前幀ctx.drawImage(video, 0, 0, canvas.width, canvas.height);// 繪制濾鏡層ctx.fillStyle = window.getComputedStyle(filterDiv).backgroundColor;ctx.fillRect(0, 0, canvas.width, canvas.height);// 導出圖像并顯示const imgData = canvas.toDataURL('image/png');const img = document.createElement('img');img.src = imgData;document.body.appendChild(img);
})這里注意： 報錯為OverconstrainedError時，看一下自己分辨率是否過大
css：
:root {--back-style: unset;
}.filter {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: var(--back-style);z-index: 2;pointer-events: none;
}.style1 {--back-style: rgba(0, 0, 0, 0.2);
}.style2 {--back-style: rgba(255, 255, 255, 0.2);
}.style3 {--back-style: rgba(0, 0, 255, 0.2);
}
