js获取摄像头中的视频流并上传到后台

最新推荐文章于 2025-03-16 21:53:08 发布

吃口猫仔饭

最新推荐文章于 2025-03-16 21:53:08 发布

阅读量1.2w

点赞数 16

分类专栏： JavaScript 文章标签： js录制视频 js照相

本文链接：https://blog.csdn.net/weixin_44411302/article/details/102762575

版权

本文介绍了如何使用JavaScript获取摄像头视频流，并实现视频录制及上传到后台。通过示例代码展示了index.html、FileSaver.js和static.js的关键实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天研究了下js获取摄像头中的视频流，全网搜索相关的文章，终于上天不负有心人。以下是原文代码：
index.html：

<!DOCTYPE html>
<html>

	<head>
		<title>video recoder</title>
		<script src="../js/fileSaver.js"></script>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	</head>
	<style>
		body {
   
			background-color: #EFEDEF;
		}
	</style>

	<body>
		<article style="border:1px solid white;width:400px;height:400px;margin:0 auto;background-color:white;">

			<section class="experiment" style="width:320px; height:240px;border:1px solid green; margin:50px auto;">
				<div id="videos-container" style="width:320px; height:240px;">
				</div>
			</section>
			<section class="experiment" style="text-align:center;border:none; margin-top:20px;">
				<button id="openCamera">打开摄像头</button>
				<button id="start-recording" disabled>开始录制</button>
				<button id="save-recording" disabled>保存</button>
				<!--<a href="javascript:void(0)" οnclick="send()">发送</a>-->
			</section>
		</article>
		<script>
			var mediaStream;
			var recorderFile;
			var stopRecordCallback;
			var openBtn = document.getElementById("openCamera");
			var startBtn = document.getElementById("start-recording");
			var saveBtn = document.getElementById("save-recording");
			openBtn.onclick = function() {
   
				this.disabled = true;
				startBtn.disabled = false;
				openCamera();
			};

			startBtn.onclick = function() {
   
				this.disabled = true;
				startRecord();
			};

			saveBtn.onclick = function() {
   
				saver();

				// alert('Drop WebM file on Chrome or Firefox. Both can play entire file. VLC player or other players may not work.');
			};

			var mediaRecorder;
			var videosContainer = document.getElementById('videos-container');

			function openCamera() {
   
				var len = videosContainer.childNodes.length;
				for(var i = 0; i < len; i++) {
   
					videosContainer.removeChild(videosContainer.childNodes[i]);
				}

				var video = document.createElement('video');

				var videoWidth = 320;
				var videoHeight = 240;

				video.controls = false;
				video.muted = true;
				video.width = videoWidth;
				video.height = videoHeight;
				MediaUtils.getUserMedia(true, false, function(err, stream) {
   
					if(err) {
   
						throw err;
					} else {
   
						// 通过 MediaRecorder 记录获取到的媒体流
						console.log();
						mediaRecorder = new MediaRecorder(stream);
						mediaStream = stream;
						var chunks = [],
							startTime = 0;
						video.srcObject = stream;
						video.play();

						videosContainer.appendChild(video);
						mediaRecorder.ondataavailable = function(e) {
   
							mediaRecorder.blobs.push(e.data);
							chunks.push(e.data);
						};
						mediaRecorder.blobs = [];

						mediaRecorder.onstop = function(e) {
   
							recorderFile = new Blob(chunks, {
   
								'type': mediaRecorder.mimeType
							});
							chunks = [];
							if(null != stopRecordCallback) {
   
								stopRecordCallback();
							}
						};
					}
				});
			}

			// 停止录制
			function stopRecord(callback) {
   
				stopRecordCallback = callback;
				// 终止录制器
				mediaRecorder.stop();
				// 关闭媒体流
				MediaUtils.closeStream(mediaStream);
			}

			var MediaUtils = {
   
				/**
				 * 获取用户媒体设备(处理兼容的问题)
				 * @param videoEnable {boolean} - 是否启用摄像头
				 * @param audioEnable {boolean} - 是否启用麦克风
				 * @param callback {Function} - 处理回调
				 */
				getUserMedia: function(videoEnable, audioEnable, callback) {
   
					navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
						navigator.msGetUserMedia || window.getUserMedia;
					var constraints = {
   
						video: videoEnable,
						audio: audioEnable
					};
					if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
   
						navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
   
							callback(false, stream);
						})['catch'](function(err) {
   
							callback(err);
						});
					} else if(navigator.getUserMedia) {
   
						navigator.getUserMedia(constraints, function(stream) {
   
							callback(false, stream);
						}, function(err) {
   
							callback(err);
						});
					} else {
   
						callback(new Error('Not support userMedia'));
					}
				},

				/**
				 * 关闭媒体流
				 * @param stream {MediaStream} - 需要关闭的流
				 */
				closeStream: function(stream) {
   
					if(typeof stream.stop === 'function') {
   
						stream.stop();
					} else {
   
						let trackList = [stream.getAudioTracks(), stream.getVideoTracks()];

						for(let i = 0; i < trackList.length; i++) {
   
							let tracks = trackList[i];
							if(tracks && tracks.length > 0) {
   
								for(let j = 0; j < tracks.length; j++) {
   
									let track = tracks[j];
									if(typeof track.stop === 'function') {
   
										track.stop();
									}
								}
							}
						}
					}
				}
			};

			function startRecord() {
   
				mediaRecorder.start();
				setTimeout(function() {
   
					// 结束
					stopRecord(function() {
   
						alert("录制成功!");
						openBtn.disabled = false;
						saveBtn.disabled = false;
						console.log(recorderFile)
						//send();
					});
				}, 5000);
			}

			function saver() {
   
				var file = new File([recorderFile], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.mp4', {
   
					type: 'video/mp4'
				});
				saveAs(file);
			}

			function send() {
   
				var file = new File([recorderFile], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.mp4', {
   
					type: 'video/mp4'
				});
				var data = new FormData();
				data.append("username", "test");
				data.append("userfile", file);

				var req = new XMLHttpRequest();
				req.open("POST", "com.spinsoft.bip.frame.utils.image.saveMp4.biz.ext");
				req.send(data);
			}
		</script>

	</body>

</html>

FileSaver.js:

/* FileSaver.js
 * A saveAs() FileSaver implementation.
 * 1.3.2
 * 2016-06-16 18:25:19
 *
 * By Eli Grey, http://eligrey.com
 * License: MIT
 *   See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md
 */

/*global self */
/*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */

/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */

var saveAs = saveAs || (function(view