如何在 HTML5 上使用 JavaScript 集成网络摄像头？

在本文中，我们将分享一个非常简单的 JavaScript 代码片段，您可以通过它轻松地将网络摄像头集成到 HTML5 网页中。现在，一天大部分网站都为个人资料图片上传或任何帐户验证步骤提供实时网络摄像头集成。

首先，使用以下代码片段创建一个 HTML DOM 结构。为了将网络摄像头与网页集成，我们将使用 HTML

示例：此示例使用 HTML5、Bootstrap、JavaScript 和 jQuery 将网络摄像头与页面集成。

  

    
        How to Integrate Webcam using
        JavaScript on HTML5 ?
    
    
    
  
    
  
    
  
    
    

  

    
        
            
                
                    
                        HTML 5 & JS live Cam
                    
                    
                        
                            
                            
                        
  
                        
                            
                                Stop Cam
                            
                            
                                Start Cam
                            
                        
                    
                
            
        
    
  
    
        var stop = function () {
            var stream = video.srcObject;
            var tracks = stream.getTracks();
            for (var i = 0; i < tracks.length; i++) {
                var track = tracks[i];
                track.stop();
            }
            video.srcObject = null;
        }
        var start = function () {
            var video = document.getElementById('video'),
                vendorUrl = window.URL || window.webkitURL;
            if (navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia({ video: true })
                    .then(function (stream) {
                        video.srcObject = stream;
                    }).catch(function (error) {
                        console.log("Something went wrong!");
                    });
            }
        }
        $(function () {
            start();
        });  
    

  

输出：

Git源码： https://github.com/gauravnewton/html5-js-live-cam