JS调用摄像头屏幕截图

最新推荐文章于 2024-07-27 22:26:20 发布

w13511069150

最新推荐文章于 2024-07-27 22:26:20 发布

阅读量1k

点赞数

分类专栏： JS 文章标签： JS调用摄像头屏幕截图

本文链接：https://blog.csdn.net/w13511069150/article/details/96436615

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
  <title>JS调用摄像头屏幕截图</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>

  </style>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="  
  crossorigin="anonymous"></script>
  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script type="text/javascript">
	var localVideo;
	var localStream;
    var aCanvas;
    var ctx;
	$(function(){
	    localVideo = document.querySelector('#localVideo');	
		aCanvas = document.getElementById('canvas');
		ctx = aCanvas.getContext('2d');
		navigator.mediaDevices.enumerateDevices()
		.then(function(devices) {
		  devices.forEach(function(device) {
			if(device.kind === "videoinput"){
				if(device.label === ""){
					$("#videoDevice").append("<option value='" + device.deviceId  + "'>" + device.deviceId + "</option>");
				}else{
					$("#videoDevice").append("<option value='" + device.deviceId  + "'>" + device.label + "</option>");
				}
			}
			if(device.kind === "audioinput"){
				if(device.label === ""){
					$("#microphoneDevice").append("<option value='" + device.deviceId  + "'>" + device.deviceId + "</option>");
				}else{
					$("#microphoneDevice").append("<option value='" + device.deviceId  + "'>" + device.label + "</option>");
				}
			}
			//console.log(device.kind + ": " + device.label +	" id = " + device.deviceId);
		  });
		})
		.catch(function(err) {
		  console.log(err.name + ": " + err.message);
		});
	});

	
	function View(){	
		let deviceType = $('input[name="deviceType"]:checked').val().toString();
		if (deviceType === "1") {//摄像头
			return new Promise(function (resolve, reject) {
				navigator.mediaDevices.getUserMedia({
					audio: {deviceId: $("#microphoneDevice").val()},
					video: {deviceId: $("#videoDevice").val()}
					//video: {mediaSource: 'screen'}//屏幕共享只支持火狐
				}).then(function openLocalStream(stream) {
					localVideo.srcObject = stream;
					localStream = stream;
					resolve('初始化本地视频成功！');
				}).catch(function (e) {
					console.log(e);
					alert('getUserMedia() error: ' + e.name);
					reject(e);
				});
			});
		} else {//屏幕
			return new Promise(function (resolve, reject) {
				navigator.mediaDevices.getDisplayMedia({
					video: {cursor: "never"},
					audio: false //true时谷歌报错
				}).then(function (stream) {
					localVideo.srcObject = stream;
					localStream = stream;
					resolve('初始化本地视频成功！');
				}).catch(function (e) {
					console.log(e);
					alert('getDisplayMedia() error: ' + e.name);
					reject(e.name);
				});
			});
		}
	}
	
	function Stop(){
		//清空图像
		localVideo.srcObject = null;
		//关闭设备
		localStream.getTracks().forEach(track => {
		track.stop();
		});
	}
	
	function Snap(){
		ctx.drawImage(localVideo, 0, 0, 640, 480); //将获取视频绘制在画布上
	}
  </script>
</head>

<body>
  <input type="radio" name="deviceType" value="1" checked>摄像头
  <input type="radio" name="deviceType" value="2">屏幕
  <button type="button" onclick="View()">显示</button>
  <button type="button" onclick="Stop()">停止</button>
  <button type="button" onclick="Snap()">截图</button>
  视频:<select id="videoDevice"></select>  
  麦克风:<select id="microphoneDevice"></select>
  <br>
  <video id="localVideo" style="width: 600px; height:600px" autoplay></video>
  <canvas id="canvas" width="600" height="600"></canvas>
</body>

</html>

在线代码:https://codepen.io/pen/?&editable=true