webrtc前端摄像头增加特性（滤镜）
webrtc前端摄像头增加特性（滤镜）
index.html源代码
Hello Webrtc
client.js源代码
"use strict"
var audioInputS = document.querySelector("select#audioInputSelect");
var audioOutputS = document.querySelector("select#audioOutputSelect");
var videoInputS = document.querySelector("select#videoInputSelect");
var localVideo = document.querySelector("video");
var filterS = document.querySelector("select#filer");
var dvcid = undefined;
var firstflag = true;
function start() {if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia){console.log('broswer is not support mediaStream');return;}dvcid = videoInputS.value;//alert(dvcid);var constrains={audio:false,video:{weight:400,height:300,framerate:24,deviceId:dvcid}};navigator.mediaDevices.getUserMedia(constrains).then ((mediaStream)=>{localVideo.srcObject = mediaStream;return navigator.mediaDevices.enumerateDevices();}).then(function(devicesInfo){if (!firstflag) return;else firstflag = false;devicesInfo.forEach(function(device){console.log((device.kind+":"+device.label+ ":" + device.deviceId))var option = document.createElement("option")option.text = device.label;option.value = device.deviceId;if (device.kind === "audioinput") {audioInputS.appendChild(option);} else if(device.kind === "audiooutput") {audioOutputS.appendChild(option);} else if (device.kind === "videoinput") {videoInputS.appendChild(option);}});alert(dvcid);}).catch(handleErr);
}
function handleErr(err){console.log(err.name + ":" + err.message);
}
start();
videoInputS.onchange = start();
filterS.onchange = ()=>{localVideo.className = filterS.value;
}
思路分析
1、先增加样式none（原样），grayScale（灰度），blur（模糊），invert（反色），sepia（老旧），opacity（透明）；
2、设定下拉框；
3、控制代码里找到下拉框；
4、建立onchange时间，下拉框改变跟着改变。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！