html5调用摄像头-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_5562/article/details/82601851

本文介绍了一个简单的网页应用，该应用能够获取用户设备上的摄像头视频流，并提供了基础的视频展示功能。文章展示了如何使用HTML5的video元素结合JavaScript来实现摄像头视频的捕获与显示，并进一步探讨了在设备存在多个摄像头时如何指定并切换不同的摄像头。

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

1. 页面代码

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
	<div id="contentHolder">
		<video id="video" width="320" height="320" autoplay="autoplay"></video>
		<button id="snap" style="display: none"></button>
		<canvas style="display: none" id="canvas" width="320" height="320"></canvas>
	</div>
</body>
</html>

2.js代码

window.addEventListener('DOMContentLoaded', function () {
        var canvas = document.getElementById('canvas'),
			context = canvas.getContext('2d'),
			video = document.getElementById('video'),
			videoObj = { video : true },
			errBack = function (err) {
				console.log('Video capture error : ' , err.code );
			};
        navigator.getUserMedia = navigator.getUserMedia ||  navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        navigator.getUserMedia(videoObj, function (stream) {
			video.src = window.webkitURL.createObjectURL(stream);
			video.play();
		}, errBack);
	});

3. 设备拥有多个摄像头的情况下如何开启其他摄像头

var audios = [], videos=[]

function gotSources(sourceInfos) {
  for (var i = 0; i != sourceInfos.length; ++i) {
    var sourceInfo = sourceInfos[i];
     if (sourceInfo.kind === 'audio') {
         audios.push(sourceInfo.id);
    } else if (sourceInfo.kind === 'video') {
         videos.push(sourceInfo.id);
    } else {
       console.log('some other kind of source: ', sourceInfo);
    }   
  }
}

if (typeof MediaStreamTrack === 'undefined'){
  alert('This browser does not support MediaStreamTrack.\n\nTry Chrome Canary.');
} else {
  MediaStreamTrack.getSources(gotSources);
}

function successCallback(stream) {
  window.stream = stream; // make stream available to console
  videoElement.src = window.URL.createObjectURL(stream);
  videoElement.play();
}

function errorCallback(error){
  console.log("navigator.getUserMedia error: ", error);
}

function start(){
  if (!!window.stream) {
    videoElement.src = null;
    window.stream.stop();
  }
  var constraints = {
    audio: {
      optional: [{sourceId: audios[0]}]
    },
    video: {
      optional: [{sourceId: videos[0]}]
    }
  };
  navigator.getUserMedia(constraints, successCallback, errorCallback);
}

start();