如何访问网络摄像头？我们可以使用 ecmascript 对象 navigator.mediadevices.getusermedia(constraints) 访问用户设备网络摄像头和麦克风。
因此，getusermedia() 函数默认会寻求用户许可以使用您的网络摄像头。该函数返回一个promise，一旦您单击“确定”并授予权限，那么该promise就会被触发，并且它会在您的系统中启用网络摄像头；否则，如果您不允许，那么它还有一个 catch 方法来关闭网络摄像头。
我们还可以将参数传递给函数 getusermedia() 函数，就像我们想要某个特定宽度或高度的图片一样。
打开网络摄像头的过程我们可以按照以下步骤使用 javascript 打开网络摄像头。
第 1 步 - 添加 html 元素，例如用于显示网络摄像头流的视频和按钮。
第 2 步 - 检查网络摄像头是否可供使用并解决返回的承诺getusermedia 函数。
step 3 - 将参数传递给 getusermedia() 函数，例如音频和视频true，因为我们将使用它们
第 4 步 - 对于智能手机，我们必须使用 faceingmode 选项作为两者摄像头可用，默认情况下，我们使用前置摄像头打开。
示例下面是一个打开网络摄像头的简单程序。我们按照上述步骤完成了我们的任务。
<html><head> <title>open webcam using javascript. </title></head><body> <h1>open webcam using javascript</h1> <br/> <button id=startbtn onclick=opencam()>open webcam</button> <br/><br/> <video id=videocam></video> <script> function opencam(){ let all_mediadevices=navigator.mediadevices if (!all_mediadevices || !all_mediadevices.getusermedia) { console.log(getusermedia() not supported.); return; } all_mediadevices.getusermedia({ audio: true, video: true }) .then(function(vidstream) { var video = document.getelementbyid('videocam'); if (srcobject in video) { video.srcobject = vidstream; } else { video.src = window.url.createobjecturl(vidstream); } video.onloadedmetadata = function(e) { video.play(); }; }) .catch(function(e) { console.log(e.name + : + e.message); }); } </script></body></html>
使用 css 设计界面首先，让我们使用 html 和 css 设计我们的 web 界面。
我们添加像网络摄像头视频区域这样的组件，并使用 css 将其高度和宽度设置为 400px，背景颜色为黑色。它将显示网络摄像头视频流。
添加一个名为打开相机的按钮并应用其css属性；该按钮将用于启动网络摄像头。
现在我们将添加功能代码并将其嵌入到主程序中。
我们将在单击opencamera按钮时调用该函数，并且在该函数中，所有指令都将按照上面的讨论发生。
示例在下面的示例中，我们添加了一些 css 来设计更具交互性的界面。
<html><head> <title>open webcam using javascript.</title> <style> *{ background-color: #658ea9; } #videocam { width: 630px; height: 300px; margin-left: 0px; border: 3px solid #ccc; background: black; } #startbtn { margin-left: 280px; width: 120px; height: 45px; cursor: pointer; font-weight: bold; } #startbtn:hover{ background-color: #647c90; color: red; } </style></head><body> <h1>open webcam using javascript</h1> <br/> <video id=videocam></video> <br/><br/> <button id=startbtn onclick=opencam()>open camera</button> <script> function opencam(){ let all_mediadevices=navigator.mediadevices if (!all_mediadevices || !all_mediadevices.getusermedia) { console.log(getusermedia() not supported.); return; } all_mediadevices.getusermedia({ audio: true, video: true }) .then(function(vidstream) { var video = document.getelementbyid('videocam'); if (srcobject in video) { video.srcobject = vidstream; } else { video.src = window.url.createobjecturl(vidstream); } video.onloadedmetadata = function(e) { video.play(); }; }) .catch(function(e) { console.log(e.name + : + e.message); }); } </script> </body></html>
正如您从输出屏幕中可以观察到的那样，当我们单击“打开相机”按钮时，它会要求访问网络摄像头，当我们允许该访问时，它将在视频区域屏幕中启动网络摄像头视频流；如果我们不授予访问权限，它将不会显示任何输出。
以上就是如何使用 javascript 打开网络摄像头？的详细内容。