前端录屏功能(JS)

最新推荐文章于 2024-07-06 16:42:05 发布

小阑打代码

最新推荐文章于 2024-07-06 16:42:05 发布

阅读量1.1k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_49119584/article/details/121830665

版权

javascript 前端 html5

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

录屏功能

HTML代码

<!DOCTYPE html>
<html>
<head>
	<title>视频录制</title>
	<meta charset="UTF-8" />
	<style>
		.btn {
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      background: #fff;
      border: 1px solid #dcdfe6;
      text-align: center;
      box-sizing: border-box;
      outline: none;
      margin: 0;
      font-weight: 500;
      padding: 12px 20px;
      color: #fff;
    }
    .record-btn {
      background-color: #409eff;
      border-color: #409eff;
    }
	</style>
</head>

<body>
	<video class="video" width="600px" controls></video>
	<button class="record-btn btn">开始录屏</button>
</body>
</html>

JS代码

<script>
		let btn = document.querySelector(".record-btn")
		// 获取录屏权限
		btn.addEventListener("click",function () {
			navigator.mediaDevices.getDisplayMedia({video: true}).then((stream) =>{
			// 获取录屏类型
			const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")	? "video/webm; codecs=vp9"	: "video/webm"
			let mediaRecorder = new MediaRecorder(stream, {
				mimeType: mime
			})
			let videoArr = []
			// 检查dataavailable事件是否冒泡
			mediaRecorder.addEventListener('dataavailable', function (e) {
				// e.data 添加到videoArr数组里面
				videoArr.push(e.data)
			})
			// 检查stop时间是否冒泡
			mediaRecorder.addEventListener('stop', function () {
				// 新创建一个Blob
				let blob = new Blob(videoArr, {
					type: videoArr[0].type
				})
				// 把Blob对象变成了url
				let url = URL.createObjectURL(blob)
				// 获取视频DOM节点
				let video = document.querySelector("video")
				// 播放视频的路径给video的src
				video.src = url
			})
			// 必须手动启动
			mediaRecorder.start()

			// 取消录屏提示
			},() => {
        alert("取消录屏");
      })
		})

	</script>

全部代码

<!DOCTYPE html>
<html>
<head>
	<title>视频录制</title>
	<meta charset="UTF-8" />
	<style>
		.btn {
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      background: #fff;
      border: 1px solid #dcdfe6;
      text-align: center;
      box-sizing: border-box;
      outline: none;
      margin: 0;
      font-weight: 500;
      padding: 12px 20px;
      color: #fff;
    }
    .record-btn {
      background-color: #409eff;
      border-color: #409eff;
    }
	</style>
</head>
<body>
	<video class="video" width="600px" controls></video>
	<button class="record-btn btn">开始录屏</button>
	<script>
		let btn = document.querySelector(".record-btn")
		// 获取录屏权限
		btn.addEventListener("click",function () {
			navigator.mediaDevices.getDisplayMedia({video: true}).then((stream) =>{
			// 获取录屏类型
			const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")	? "video/webm; codecs=vp9"	: "video/webm"
			let mediaRecorder = new MediaRecorder(stream, {
				mimeType: mime
			})
			let videoArr = []
			// 检查dataavailable事件是否冒泡
			mediaRecorder.addEventListener('dataavailable', function (e) {
				// e.data 添加到videoArr数组里面
				videoArr.push(e.data)
			})
			// 检查stop时间是否冒泡
			mediaRecorder.addEventListener('stop', function () {
				// 新创建一个Blob
				let blob = new Blob(videoArr, {
					type: videoArr[0].type
				})
				// 把Blob对象变成了url
				let url = URL.createObjectURL(blob)
				// 获取视频DOM节点
				let video = document.querySelector("video")
				// 播放视频的路径给video的src
				video.src = url
			})
			// 必须手动启动
			mediaRecorder.start()
			// 取消录屏提示
			},() => {
        alert("取消录屏");
      })
		})
	</script>
</body>
</html>