ryanlid · December 23, 2019 09:27
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="zh-CN">

 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>WebRTC-音视频采集</title>
  <style>
    .none {
      filter: none;
    }

    .blur {
      filter: blur(3px);
    }

    .grayscale {
      filter: grayscale(1);
    }

    .inver {
      filter: inver(1);
    }

    .sepia {
      filter: sepia(1);
    }
  </style>
 </head>

 <body>
  <div>
    <h1>WebRTC-音视频采集</h1>
    <div>
      <label for="audioinput">音频输入：</label>
      <select id="audioinput"></select>
    </div>
    <div>
      <label for="audiooutput">音频输出：</label>
      <select id="audiooutput"></select>
    </div>
    <div>
      <label for="videoinput">视频输入：</label>
      <select id="videoinput"></select>
    </div>
    <div>
      <label for="videoinput">摄像头选择</label>
      <select id="videoinput"></select>
    </div>
    <div>
      <label for="filterSelect">滤镜</label>
      <select id="filterSelect">
        <option value="none">none</option>
        <option value="blur">blur</option>
        <option value="grayscale">grayscale</option>
        <option value="inver">inver</option>
        <option value="sepia">sepia</option>

      </select>
    </div>
    <!-- iOS设备需要设置playsinline="true"，muted才能自动播放 -->
    <video id="player" autoplay controls="controls" playsinline muted width="200" height="300"></video>

    <div>
      <button id="snapshot">snapshot</button>
    </div>
    <canvas id="picture"></canvas>
  </div>
  <script src="https://static.oonnnoo.com/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>
  <script src="./script.js"></script>
 </body>

 </html>
diff --git a/script.js b/script.js
 // 初始化 VConsole
 var vconsole = new VConsole()

 var videoplay = document.querySelector('video#player')
 var audioinput = document.querySelector('#audioinput');
 var audiooutput = document.querySelector('#audiooutput');
 var videoinput = document.querySelector('#videoinput');
 var filterSelect = document.querySelector('#filterSelect');

 // picture
 var snapshot = document.querySelector('button#snapshot')
 var picture = document.querySelector('canvas#picture')
 picture.width = 240;
 picture.height = 320;

 // 获取媒体流
 function gotMediaStream(stream) {
  videoplay.srcObject = stream;
  return navigator.mediaDevices.enumerateDevices()
 }

 // 获取设备信息
 function gotDevices(deviceInfos) {
  deviceInfos.forEach(deviceInfo => {
    console.log(deviceInfo.deviceId)
    var option = document.createElement('option')
    option.value = deviceInfo.deviceId
    option.text = deviceInfo.label
    if (deviceInfo.kind === 'audioinput') {
      audioinput.appendChild(option)
    } else if (deviceInfo.kind === 'audiooutput') {
      audiooutput.appendChild(option)
    } else if (deviceInfo.kind === 'videoinput') {
      videoinput.appendChild(option)
    }
  });
 }

 // 处理错误
 function handerError(error) {
  console.error('GetUserMedia Error Type', error.name, '-----', error.message)
 }

 function start() {
  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    console.log('GetUserMedia is not supported')
  } else {
    var deviceId = videoinput.value;
    console.log('videodeviceId', deviceId)
    // 音视频约束
    var constraints = {
      video: {
        width: 640,
        height: 480,
        franmeRate: 30,
        facingMode: 'user',
        // deviceId 切换摄像头 safari可以，Android 不行
        deviceId: deviceId ? { exact: deviceId } : undefined
      },
      audio: {
        noiseSuppression: true,
        echoCancellation: true
      }
    }
    // 音视频采集
    navigator.mediaDevices.getUserMedia(constraints)
      // // 采集共享桌面
      // navigator.mediaDevices.getDisplayMedia(constraints)
      .then(gotMediaStream)
      .then(gotDevices)
      .catch(handerError)
  }
 }

 start();
 videoinput.onchange = start

 // 视频滤镜
 filterSelect.onchange = function () {
  videoplay.className = filterSelect.value
 }

 // 视频截图
 snapshot.onclick = function () {
  picture.getContext('2d').drawImage(
    videoplay, 0, 0, picture.width, picture.height
  )
 }
	<!DOCTYPE html>
	<html lang="zh-CN">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>WebRTC-音视频采集</title>
	<style>
	.none {
	filter: none;
	}

	.blur {
	filter: blur(3px);
	}

	.grayscale {
	filter: grayscale(1);
	}

	.inver {
	filter: inver(1);
	}

	.sepia {
	filter: sepia(1);
	}
	</style>
	</head>

	<body>
	<div>
	<h1>WebRTC-音视频采集</h1>
	<div>
	<label for="audioinput">音频输入：</label>
	<select id="audioinput"></select>
	</div>
	<div>
	<label for="audiooutput">音频输出：</label>
	<select id="audiooutput"></select>
	</div>
	<div>
	<label for="videoinput">视频输入：</label>
	<select id="videoinput"></select>
	</div>
	<div>
	<label for="videoinput">摄像头选择</label>
	<select id="videoinput"></select>
	</div>
	<div>
	<label for="filterSelect">滤镜</label>
	<select id="filterSelect">
	<option value="none">none</option>
	<option value="blur">blur</option>
	<option value="grayscale">grayscale</option>
	<option value="inver">inver</option>
	<option value="sepia">sepia</option>

	</select>
	</div>
	<!-- iOS设备需要设置playsinline="true"，muted才能自动播放 -->
	<video id="player" autoplay controls="controls" playsinline muted width="200" height="300"></video>

	<div>
	<button id="snapshot">snapshot</button>
	</div>
	<canvas id="picture"></canvas>
	</div>
	<script src="https://static.oonnnoo.com/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>
	<script src="./script.js"></script>
	</body>

	</html>
	// 初始化 VConsole
	var vconsole = new VConsole()

	var videoplay = document.querySelector('video#player')
	var audioinput = document.querySelector('#audioinput');
	var audiooutput = document.querySelector('#audiooutput');
	var videoinput = document.querySelector('#videoinput');
	var filterSelect = document.querySelector('#filterSelect');

	// picture
	var snapshot = document.querySelector('button#snapshot')
	var picture = document.querySelector('canvas#picture')
	picture.width = 240;
	picture.height = 320;

	// 获取媒体流
	function gotMediaStream(stream) {
	videoplay.srcObject = stream;
	return navigator.mediaDevices.enumerateDevices()
	}

	// 获取设备信息
	function gotDevices(deviceInfos) {
	deviceInfos.forEach(deviceInfo => {
	console.log(deviceInfo.deviceId)
	var option = document.createElement('option')
	option.value = deviceInfo.deviceId
	option.text = deviceInfo.label
	if (deviceInfo.kind === 'audioinput') {
	audioinput.appendChild(option)
	} else if (deviceInfo.kind === 'audiooutput') {
	audiooutput.appendChild(option)
	} else if (deviceInfo.kind === 'videoinput') {
	videoinput.appendChild(option)
	}
	});
	}

	// 处理错误
	function handerError(error) {
	console.error('GetUserMedia Error Type', error.name, '-----', error.message)
	}

	function start() {
	if (!navigator.mediaDevices \|\| !navigator.mediaDevices.getUserMedia) {
	console.log('GetUserMedia is not supported')
	} else {
	var deviceId = videoinput.value;
	console.log('videodeviceId', deviceId)
	// 音视频约束
	var constraints = {
	video: {
	width: 640,
	height: 480,
	franmeRate: 30,
	facingMode: 'user',
	// deviceId 切换摄像头 safari可以，Android 不行
	deviceId: deviceId ? { exact: deviceId } : undefined
	},
	audio: {
	noiseSuppression: true,
	echoCancellation: true
	}
	}
	// 音视频采集
	navigator.mediaDevices.getUserMedia(constraints)
	// // 采集共享桌面
	// navigator.mediaDevices.getDisplayMedia(constraints)
	.then(gotMediaStream)
	.then(gotDevices)
	.catch(handerError)
	}
	}

	start();
	videoinput.onchange = start

	// 视频滤镜
	filterSelect.onchange = function () {
	videoplay.className = filterSelect.value
	}

	// 视频截图
	snapshot.onclick = function () {
	picture.getContext('2d').drawImage(
	videoplay, 0, 0, picture.width, picture.height
	)
	}