不知道如何解决这个问题："Uncaught TypeError (webcam.snap is not a function)" <-- javascript

Question

我有一个 JavaScript 脚本，我收到了一个我无法弄清楚的错误。我正在尝试使用 JavaScript

拍摄网络摄像头的照片

错误是：

Uncaught TypeError: webcam.snap is not a function

我正在使用 webcam.js 拍摄快照。

这是我的 JavaScript 代码：

  <script>
    var video = document.createElement("video");
    var canvasElement = document.getElementById("canvas");
    var canvas = canvasElement.getContext("2d");
    var loadingMessage = document.getElementById("loadingMessage");
    var outputContainer = document.getElementById("output");
    var outputMessage = document.getElementById("outputMessage");
    var outputData = document.getElementById("outputData");
    const jsQR = require("jsqr");

    function drawLine(begin, end, color) {
      canvas.beginPath();
      canvas.moveTo(begin.x, begin.y);
      canvas.lineTo(end.x, end.y);
      canvas.lineWidth = 4;
      canvas.strokeStyle = color;
      canvas.stroke();
    }

    // Use facingMode: environment to attemt to get the front camera on phones
    navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
      video.srcObject = stream;
      video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
      video.play();
      requestAnimationFrame(tick);
    });

    function tick() {
      loadingMessage.innerText = "⌛ Loading video..."
      if (video.readyState === video.HAVE_ENOUGH_DATA) {
        loadingMessage.hidden = true;
        canvasElement.hidden = false;
        outputContainer.hidden = false;

        canvasElement.height = video.videoHeight;
        canvasElement.width = video.videoWidth;
        canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
        var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
        var code = jsQR(imageData.data, imageData.width, imageData.height, {
          inversionAttempts: "invertFirst",
        });
        if (code) {
          drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
          drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
          drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
          drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
          outputMessage.hidden = true;
          outputData.parentElement.hidden = false;
          outputData.innerText = code.data;

          takeSnapShot();
        }

        else {
          outputMessage.hidden = false;
          outputData.parentElement.hidden = true;
        }
      }
      requestAnimationFrame(tick);
    }

    // TAKE A SNAPSHOT.
    takeSnapShot = function () {
        webcam.snap(function (data_uri) {
            downloadImage('video', data_uri);
        });
    }

    // DOWNLOAD THE IMAGE.
    downloadImage = function (name, datauri) {
        var a = document.createElement('a');
        a.setAttribute('download', name + '.png');
        a.setAttribute('href', datauri);
        a.click();
    }

  </script>

这是导致问题的第一行：

webcam.snap(function (data_uri) {
    downloadImage('video', data_uri);
});

这是导致问题的第二行：

takeSnapShot();

如何正确更正此问题？

****** 更新 ******

我使用的webcam.js版本是WebcamJS v1.0.26。我的应用程序是一个 Django 应用程序，它启动 main.js.

中定义的 HTML 文件

snap: function(user_callback, user_canvas) {
        // use global callback and canvas if not defined as parameter
        if (!user_callback) user_callback = this.params.user_callback;
        if (!user_canvas) user_canvas = this.params.user_canvas;
        
        // take snapshot and return image data uri
        var self = this;
        var params = this.params;
        
        if (!this.loaded) return this.dispatch('error', new WebcamError("Webcam is not loaded yet"));
        // if (!this.live) return this.dispatch('error', new WebcamError("Webcam is not live yet"));
        if (!user_callback) return this.dispatch('error', new WebcamError("Please provide a callback function or canvas to snap()"));
        
        // if we have an active preview freeze, use that
        if (this.preview_active) {
            this.savePreview( user_callback, user_canvas );
            return null;
        }
        
        // create offscreen canvas element to hold pixels
        var canvas = document.createElement('canvas');
        canvas.width = this.params.dest_width;
        canvas.height = this.params.dest_height;
        var context = canvas.getContext('2d');
        
        // flip canvas horizontally if desired
        if (this.params.flip_horiz) {
            context.translate( params.dest_width, 0 );
            context.scale( -1, 1 );
        }
        
        // create inline function, called after image load (flash) or immediately (native)
        var func = function() {
            // render image if needed (flash)
            if (this.src && this.width && this.height) {
                context.drawImage(this, 0, 0, params.dest_width, params.dest_height);
            }
            
            // crop if desired
            if (params.crop_width && params.crop_height) {
                var crop_canvas = document.createElement('canvas');
                crop_canvas.width = params.crop_width;
                crop_canvas.height = params.crop_height;
                var crop_context = crop_canvas.getContext('2d');
                
                crop_context.drawImage( canvas, 
                    Math.floor( (params.dest_width / 2) - (params.crop_width / 2) ),
                    Math.floor( (params.dest_height / 2) - (params.crop_height / 2) ),
                    params.crop_width,
                    params.crop_height,
                    0,
                    0,
                    params.crop_width,
                    params.crop_height
                );
                
                // swap canvases
                context = crop_context;
                canvas = crop_canvas;
            }
            
            // render to user canvas if desired
            if (user_canvas) {
                var user_context = user_canvas.getContext('2d');
                user_context.drawImage( canvas, 0, 0 );
            }
            
            // fire user callback if desired
            user_callback(
                user_canvas ? null : canvas.toDataURL('image/' + params.image_format, params.jpeg_quality / 100 ),
                canvas,
                context
            );
        };
        
        // grab image frame from userMedia or flash movie
        if (this.userMedia) {
            // native implementation
            context.drawImage(this.video, 0, 0, this.params.dest_width, this.params.dest_height);
            
            // fire callback right away
            func();
        }
        else if (this.iOS) {
            var div = document.getElementById(this.container.id+'-ios_div');
            var img = document.getElementById(this.container.id+'-ios_img');
            var input = document.getElementById(this.container.id+'-ios_input');
            // function for handle snapshot event (call user_callback and reset the interface)
            iFunc = function(event) {
                func.call(img);
                img.removeEventListener('load', iFunc);
                div.style.backgroundImage = 'none';
                img.removeAttribute('src');
                input.value = null;
            };
            if (!input.value) {
                // No image selected yet, activate input field
                img.addEventListener('load', iFunc);
                input.style.display = 'block';
                input.focus();
                input.click();
                input.style.display = 'none';
            } else {
                // Image already selected
                iFunc(null);
            }           
        }
        else {
            // flash fallback
            var raw_data = this.getMovie()._snap();
            
            // render to image, fire callback when complete
            var img = new Image();
            img.onload = func;
            img.src = 'data:image/'+this.params.image_format+';base64,' + raw_data;
        }
        
        return null;
    },

Answer 1

好像是：

网络摄像头代码丢失（未导入）
- 在这种情况下，您需要先从 URL 调用脚本并添加 script 标签

<script src="WEBCAM_JS_SOURCE">

或

它们是进口的，但使用时有错别字。来自 the webcam source code it is defined as:

var Webcam = {
   version: '1.0.26',
   
   // globals
   ...
};

所以你应该使用大写字母。

Answer 2

您的实现不需要 Webcamjs，因为您使用的是导航器媒体设备。

您可以通过首先初始化 WebcamJS 并将其附加到某些 canvas 来使用 WebcamJS，如以下代码

Webcam.set({
        width: 320,
        height: 240,
        image_format: 'jpeg',
        jpeg_quality: 90
    });
Webcam.attach( '#my_camera' );

或者您可以将 takeSnapShot 函数更新为以下内容：

 takeSnapShot = function () {
        downloadImage('video',canvasElement.toDataURL())
        // Webcam.snap(function (data_uri) {
        //     downloadImage('video', data_uri);
        // });
    }

这是一个基于您的代码的工作示例https://codepen.io/majdsalloum/pen/RwVKBbK

不知道如何解决这个问题："Uncaught TypeError (webcam.snap is not a function)" <-- javascript

Can't figure out how to fix this: "Uncaught TypeError (webcam.snap is not a function)" <-- javascript

javascript

node.js

webcam.js