为什么用js关闭摄像头的时候，

2023-02-19 03:29:02JavaScript028

为什么用js关闭摄像头的时候，,第1张

html5中的video这个标签是引入视频的，通过navigator.getUserMedia去获取摄像头的视频流，所以要在事件里用关闭的代码都不能执行关闭摄像头，只有关闭网页，摄像头才关闭。

以下为html5打开摄像头代码：

<!DOCTYPE html>

<html>

<head>

<title>Smart Home - Camera</title>

function init(t){

accessLocalWebCam("camera_box")

}

// Normalizes window.URL

window.URL = window.URL || window.webkitURL || window.msURL || window.oURL

// Normalizes navigator.getUserMedia

navigator.getUserMedia = navigator.getUserMedia ||

navigator.webkitGetUserMedia|| navigator.mozGetUserMedia ||

navigator.msGetUserMedia

function isChromiumVersionLower() {

var ua = navigator.userAgent

var testChromium = ua.match(/AppleWebKit\/.* Chrome\/([\d.]+).* Safari\//)

return (testChromium &&(parseInt(testChromium[1].split('.')[0]) <19))

}

function successsCallback(stream) {

document.getElementById('camera_errbox').style.display = 'none'

document.getElementById('camera_box').src = (window.URL

&&window.URL.createObjectURL) ?

window.URL.createObjectURL(stream) : stream

}

function errorCallback(err) {

}

function accessLocalWebCam(id) {

try {

// Tries it with spec syntax

navigator.getUserMedia({ video: true }, successsCallback, errorCallback)

} catch (err) {

// Tries it with old spec of string syntax

navigator.getUserMedia('video', successsCallback, errorCallback)

}

</script>

#camera_errbox{

width:320pxheight:autoborder:1px solid #333333padding:10px

color:#ffftext-align:leftmargin:20px auto

font-size:14px

}

#camera_errbox b{

padding-bottom:15px

}

</style>

</head>

<div>

<div></div><div id="t_iconbox"

class="icon_12"></div><div id="t_text">

<div id="el_title">Camera</div>

</div>

<div><span

class="sp_title_text">Camera</span><div class="sp_oc

sp_oc_1"></div></div>

<b>请点击“允许”按钮，授权网页访问您的摄像头！</b>

<div>若您并未看到任何授权提示，则表示您的浏览器不支持Media Capture或您的机器没有连接摄像头设备。</div>

</div>

</dl>

</div>

</body>

</html>

-——代码结束

1. 项目背景

网站项目基于HTML5+AngularJs开发，正在做一个由HTML5调用摄像头拍照，从而实现修改头像的功能。起初觉得HTML5拍照很简单，但是做的时候才发现HTML5获取摄像头并不是那么容易。

2. 如何调用摄像头

$scope.photoErr = false

$scope.photoBtnDiable = true

var mediaStream = null,track = null

navigator.getMedia = (navigator.getUserMedia ||

navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||

navigator.msGetUserMedia)

if (navigator.getMedia) {

navigator.getMedia(

{

video: true

// successCallback

function (stream) {

var s = window.URL.createObjectURL(stream)

var video = document.getElementById('video')

video.src = window.URL.createObjectURL(stream)

mediaStream = stream

track = stream.getTracks()[0]

$scope.photoBtnDiable = false $scope.$apply()

// errorCallback

function (err) {

$scope.errorPhoto()

console.log("The following error occured:" + err)

})

} else {

$scope.errorPhoto()

}

代码解析：

navigator为浏览器对象，包含浏览器的信息，这里就是用这个对象打开摄像头。$scope为AndularJs语法。第一步声明navigator.getMedia来调用浏览器不同的打开摄像头函数，目前仅有getUserMedia、webkitGetUserMedia、mozGetUserMedia、msGetUserMedia四种方式分别对应通用浏览器、Google浏览器、火狐浏览器和IE浏览器，浏览器会自动判断调用哪一个函数。第二步是调用打开浏览器，包含三个参数，分别为需要使用的多媒体类型、获取成功返回的流数据处理函数以及操作失败返回错误消息处理函数。其中，使用时不仅可以设置视频还能设置使用麦克风，设置方式为：

{

video: true，

audio: true

}

调用成功即打开摄像头后返回视频流数据，我们可以将流数据设置到video标签在界面上实时显示图像。mediaStream用来记录获取到的流数据，track在Chrome浏览器中用来跟踪摄像头状态，这两个变量都能用来关闭摄像头。

3. 拍照

$scope.snap = function () {

var canvas = document.createElement('canvas')

canvas.width = "400"

canvas.height = "304"

var ctx = canvas.getContext('2d')

ctx.drawImage(video, 0, 0, 400, 304)

$scope.closeCamera()

$uibModalInstance.close(canvas.toDataURL("image/png"))

}

拍照时需要使用到canvas标签，创建一个canvas标签，设置我们需要拍照的尺寸大小，通过drawImage函数将video当前的图像保存到canvas标签，最后将图像数据转换为base64数据返回并关闭摄像头，这样就完成了我们的拍照功能。这里的$uibModalInstance对象是我们项目中打开弹出层的一个对象，用来控制弹出层的显示。

4. 如何关闭摄像头

$scope.closeCamera = function () {

if (mediaStream != null) {

if (mediaStream.stop) {

mediaStream.stop()

}

$scope.videosrc = ""

}

if (track != null) {

if (track.stop) {

track.stop()

}