本地打开网站摄像头

摄像头是我们日常生活中经常使用的一种硬件设备，而访问摄像头则可以让我们完成很多有趣的功能，比如视频通话、拍照、录像等。如果你已经具备了前端开发基础，你可以使用 JavaScript 和W3C中WebRTC（Web Real-Time Communications）技术，来访问摄像头并进行各种操作。

WebRTC是一种核心技术，可以在不安装第三方插件的前提下，提供实时通信和连接的能力。WebRTC是一项由Google、Mozilla和Opera等开发者所创立，目的是让Web应用程序能够进行实时通信的标准技术。它将语音、视频和数据传输整合到浏览器中，极大地促进了Web实时通信的发展。

下面，我们将以HTML5和WebRTC技术为基础，介绍如何在网页上访问摄像头，并在前端页面中呈现出摄像头采集的实时视频。

1.摄像头访问权限

在浏览器中访问摄像头时，需要先获取用户授权，让用户允许使用自己的摄像头。如果用户没有授权，那么你的页面无法访问到摄像头。

允许用户访问自己的摄像头，可以使用navigator.mediaDevices.getUserMedia()方法，该方法返回一个Promise对象，可以对流进行检测和处理，具体代码如下所示：

navigator.mediaDevices.getUserMedia({  
   audio: true,  
   video: true  
}).then(function(stream) {  
  // stream代表摄像头所返回的数据流  
}).catch(function(error) {
  alert("请打开摄像头并允许访问权限!");  
  console.log("错误信息：", error);  
}); 

其中，audio和video两个参数即表示是否打开音频设备和视频设备。如果想单独使用音频或视频设备，也可以设置为true或false。

如果用户同意授权访问摄像头，stream将包含摄像头的完整数据流。

2.视频播放与操作

在获取到视频流后，