浏览器打开摄像头

本文介绍如何使用JavaScript来启用摄像头进行拍摄、拍照。

第一步：获取摄像头权限

在使用摄像头之前，需要获取用户的摄像头权限。使用getUserMedia()函数可以获取摄像头权限，该函数返回一个带有视频流的Promise对象。如果用户拒绝了摄像头权限，Promise会被拒绝。

getUserMedia()函数的参数是一个对象，包含要请求的媒体类型和一些可选的约束条件。以下是请求摄像头权限的示例代码：

navigator.mediaDevices.getUserMedia({
    video: true,
    audio: false
}).then(function(stream) {
    // stream即为获取的视频流，可以用来显示视频或拍照
}).catch(function(err) {
    // 用户拒绝了摄像头权限或其他错误console.log(err);
});

在上面的代码中，我们请求了视频流，同时禁用了音频流。如果用户同意了摄像头权限，就会调用then()方法并把视频流传递给它。如果用户拒绝了摄像头权限或出现了其他错误，则会调用catch()方法并打印错误信息。

第二步：显示视频流

获取了视频流之后，接下来就可以把它显示到网页上了。使用HTML5的video元素可以很方便地显示视频流。以下是显示视频流的示例代码：

var video = document.createElement('video');
video.srcObject = stream;
video.play();
document.body.appendChild(video);

在上面的代码中，我们创建了一个video元素，并把获取的视频流赋值给它的srcObject属性。然后调用play()方法来播放视频，最后把video元素添加到网页的body中。

第三步：拍照

拍照是使用摄像头最常见的功能之一。在前面的示例中，我们已经成功获取了摄像头的视频流并把它显示到了网页上。接下来，我们可以把视频流转换成图片，并把它显示到网页上。以下是拍照的示例代码：

var canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
var img = document.createElement('img');
img.src = canvas.toDataURL('image/png');
document.body.appendChild(img);

在上面的代码中，我们创建了一个canvas元素，并设置它的宽高与video元素相同。然后获取了canvas的2D上下文，并把video元素的图像绘制到canvas中。最后，把canvas转换成图片并创建一个img元素来显示它。

总结

使用JavaScript启动摄像头是一个非常有用的功能，可以用于实现视频聊天、拍照等应用。本文介绍了如何使用getUserMedia()函数来获取摄像头权限，如何使用video元素来显示视频流以及如何把视频流转换成图片并显示到网页上。可以根据这些基本的知识来实现更复杂的摄像头应用。

原文地址：https://www.wodianping.com/javascript/2023-05/55928.html