用webrtc拍照

Question

在我的Chrome上，以下代码只是打开相机并立即崩溃，即显示黑屏。这段代码在firefox上工作正常。为什么呢？

http://jsfiddle.net/2mLb6cs2/

(function() {
    // The width and height of the captured photo. We will set the
    // width to the value defined here, but the height will be
    // calculated based on the aspect ratio of the input stream.

    var width = 320; // We will scale the photo width to this
    var height = 0; // This will be computed based on the input stream

    // |streaming| indicates whether or not we're currently streaming
    // video from the camera. Obviously, we start at false.

    var streaming = false;

    // The various HTML elements we need to configure or control. These
    // will be set by the startup() function.

    var video = null;
    var canvas = null;
    var photo = null;
    var startbutton = null;

    function startup() {
        video = document.getElementById('takephoto-video');
        canvas = document.getElementById('takephoto-canvas');
        photo = document.getElementById('takephoto-preview');
        previewarea = document.getElementById('takephoto-previewarea');
        startbutton = document.getElementById('takephoto-startbutton');
        downloadbutton = document.getElementById('takephoto-download');

        navigator.getMedia = (navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.msGetUserMedia);

        navigator.getMedia({
                video: true,
                audio: false
            },
            function(stream) {
                if (navigator.mozGetUserMedia) {
                    video.mozSrcObject = stream;
                } else {
                    var vendorURL = window.URL || window.webkitURL;
                    video.src = vendorURL.createObjectURL(stream);
                }
                video.play();
            },
            function(err) {
                console.log("An error occured! " + err);
            }
        );

        video.addEventListener('canplay', function(ev) {
            if (!streaming) {
                height = video.videoHeight / (video.videoWidth / width);

                // Firefox currently has a bug where the height can't be read from
                // the video, so we will make assumptions if this happens.

                if (isNaN(height)) {
                    height = width / (4 / 3);
                }

                video.setAttribute('width', width);
                video.setAttribute('height', height);
                canvas.setAttribute('width', width);
                canvas.setAttribute('height', height);
                streaming = true;
            }
        }, false);

        startbutton.addEventListener('click', function(ev) {
            takepicture();
            ev.preventDefault();
        }, false);

        clearphoto();
    }

    // Fill the photo with an indication that none has been
    // captured.

    function clearphoto() {
        var context = canvas.getContext('2d');
        context.fillStyle = "#AAA";
        context.fillRect(0, 0, canvas.width, canvas.height);

        var data = canvas.toDataURL('image/png');
        photo.setAttribute('src', data);
    }

    // Capture a photo by fetching the current contents of the video
    // and drawing it into a canvas, then converting that to a PNG
    // format data URL. By drawing it on an offscreen canvas and then
    // drawing that to the screen, we can change its size and/or apply
    // other changes before drawing it.

    function takepicture() {
        var context = canvas.getContext('2d');
        if (width && height) {
            canvas.width = width;
            canvas.height = height;
            context.drawImage(video, 0, 0, width, height);

            var data = canvas.toDataURL('image/png');
            photo.setAttribute('src', data);

            previewarea.classList.remove("hide");
            downloadbutton.href = data;

        } else {
            clearphoto();
        }
    }

    startup();
})();

以上代码是从

复制的

https://mdn-samples.mozilla.org/s/webrtc-capturestill/

Answer 1

如果您在jsfiddle页面上打开控制台，您将看到以下错误：

  

getUserMedia（）不再适用于不安全的起源。要用这个   功能，您应该考虑将应用程序切换为安全的   原点，例如HTTPS。有关详细信息，请参阅https://goo.gl/rStTGz。

如果您尝试将其与https一起使用，则可以正常使用。

为什么它在带有http的FireFox中有效？可能是因为此时它仅在Chrome中被弃用，但无论如何你应该使用https，使用WebRTC。

顺便说一句，我看到你在代码中使用了浏览器前缀。最好使用adapter instead：

  

所有示例都使用adapter.js，一个垫片来隔离应用程序与规范   更改和前缀差异。实际上，标准和协议   用于WebRTC的实现非常稳定，而且只有   一些前缀名称。有关完整的互操作信息，请参阅   webrtc.org/web-apis/interop。