Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

javascript - chụp ảnh bằng webrtc

In lại Tác giả: Walker 123 Thời gian cập nhật: 27-11-2023 23:36:06 26 4
mua khóa gpt4 Nike

Trên chrome của tôi, đoạn mã sau vừa mở camera và ngay lập tức gặp sự cố với màn hình đen. Mã này chạy tốt trên Firefox. Tại sao?

http://jsfiddle.net/2mLb6cs2/ 

(chức năng() {
    // Chiều rộng và chiều cao của ảnh đã chụp.
    // chiều rộng thành giá trị được xác định ở đây, nhưng chiều cao sẽ là
    // được tính toán dựa trên tỷ lệ khung hình của luồng đầu vào.

    var width = 320; // Chúng tôi sẽ chia tỷ lệ chiều rộng ảnh này
    var Height = 0; // Điều này sẽ được tính toán dựa trên luồng đầu vào

    // |streaming| cho biết chúng tôi hiện có đang phát trực tuyến hay không
    // video từ camera Rõ ràng là chúng ta bắt đầu ở sai.

    var streaming = false;

    // Các phần tử HTML khác nhau mà chúng ta cần cấu hình hoặc kiểm soát.
    // sẽ được thiết lập bởi hàm startup().

    var video = null;
    var canvas = null;
    ảnh var = null;
    var startbutton = null;

    khởi động hàm() {
        video = document.getElementById('takephoto-video');
        canvas = document.getElementById('takephoto-canvas');
        photo = document.getElementById('takephoto-preview');
        khu vực xem trước = 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: đúng,
                âm thanh: sai
            },
            hàm(luồng) {
                if (navigator.mozGetUserMedia) {
                    video.mozSrcObject = luồng;
                } khác {
                    var nhà cung cấpURL = window.URL || window.webkitURL;
                    video.src = nhà cung cấpURL.createObjectURL(stream);
                }
                video.play();
            },
            hàm (lỗi) {
                console.log("Đã xảy ra lỗi!" + err);
            }
        );

        video.addEventListener('canplay', function(ev) {
            if (!streaming) {
                chiều cao = video.videoHeight / (video.videoWidth / chiều rộng);

                // Firefox hiện đang có lỗi không thể đọc được chiều cao
                // video nên chúng tôi sẽ đưa ra giả định nếu điều này xảy ra.

                if (isNaN(chiều cao)) {
                    chiều cao = chiều rộng / (4/3);
                }

                video.setAttribution('width', width);
                video.setAttribution ('chiều cao', chiều cao);
                canvas.setAttribution('width', width);
                canvas.setAttribution ('chiều cao', chiều cao);
                phát trực tuyến = đúng;
            }
        }, SAI);

        startbutton.addEventListener('click', function(ev) {
            chụp ảnh();
            ev.preventDefault();
        }, SAI);

        ảnh rõ ràng();
    }

    // Điền vào bức ảnh một dấu hiệu cho thấy chưa có bức ảnh nào
    // bị bắt.

    hàm clearphoto() {
        var context = canvas.getContext('2d');
        bối cảnh.fillStyle = "#AAA";
        bối cảnh.fillRect(0, 0, canvas.width, canvas.height);

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

    // Chụp ảnh bằng cách lấy nội dung hiện tại của video
    // và vẽ nó thành canvas, sau đó chuyển đổi nó thành PNG
    // định dạng URL dữ liệu. Bằng cách vẽ nó trên canvas ngoài màn hình và sau đó
    // vẽ nó ra màn hình, chúng ta có thể thay đổi kích thước của nó và/hoặc áp dụng
    // những thay đổi khác trước khi vẽ nó.

    hàm chụp ảnh() {
        var context = canvas.getContext('2d');
        if (chiều rộng && chiều cao) {
            canvas.width = chiều rộng;
            canvas.height = chiều cao;
            context.drawImage(video, 0, 0, chiều rộng, chiều cao);

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

            Previewarea.classList.remove("ẩn");
            downloadbutton.href = dữ liệu;

        } khác {
            ảnh rõ ràng();
        }
    }

    khởi động();
})();

Đoạn mã trên được sao chép từ

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

câu trả lời hay nhất

Nếu bạn mở bảng điều khiển trên trang jsfiddle, bạn sẽ thấy lỗi sau:

getUserMedia() không còn hoạt động trên các nguồn gốc không an toàn. Để sử dụng tính năng này, bạn nên xem xét chuyển ứng dụng của mình sang nguồn gốc an toàn, chẳng hạn như HTTPS. https://goo.gl/rStTGz để biết thêm chi tiết.

Nếu bạn cố gắng sử dụng nó với https thì nó hoạt động.

Tại sao nó hoạt động bằng cách sử dụng http trong FireFox? Có lẽ vì hiện tại nó không được dùng nữa trong Chrome, nhưng dù sao thì bạn cũng nên sử dụng https, sử dụng WebRTC.

BTW, tôi thấy bạn đang sử dụng tiền tố trình duyệt trong mã của mình. Tốt nhất nên sử dụngbộ chuyển đổi thay vì :

Tất cả các mẫu đều sử dụng adapter.js, một miếng đệm để cách ly các ứng dụng khỏi những thay đổi về thông số kỹ thuật và sự khác biệt về tiền tố. Trên thực tế, các tiêu chuẩn và giao thức được sử dụng để triển khai WebRTC có tính ổn định cao và chỉ có một số tên có tiền tố. xem webrtc.org/web-apis/interop.

Về javascript - chụp ảnh bằng webrtc, chúng tôi tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/34121714/

26 4 0
Đề xuất bài viết: c++ - thả nổi tới 4 uint8_t và hiển thị
Đề xuất bài viết: javascript - Dữ liệu từ PHP sang JS - Lịch Google + CanvasJS
Đề xuất bài viết: html - Nút có đường viền lạ xung quanh, làm cách nào để loại bỏ nó?
Đề xuất bài viết: javascript — Buộc chế độ ngang bằng cách tối đa hóa với plyr.io trên thiết bị di động?
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress