Kích thước video html phù hợp

Quay video/âm thanh đã là "Chén thánh" của phát triển web trong một thời gian dài. Trong nhiều năm, chúng tôi đã phải dựa vào các plugin của trình duyệt (Flash hoặc Silverlight) để hoàn thành công việc. Nào

HTML5 để giải cứu. Nó có thể không rõ ràng, nhưng sự gia tăng của HTML5 đã mang lại sự gia tăng quyền truy cập vào phần cứng thiết bị. Định vị địa lý (GPS), API định hướng (máy đo gia tốc), WebGL (GPU) và API âm thanh trên web (phần cứng âm thanh) là những ví dụ hoàn hảo. Các tính năng này cực kỳ mạnh mẽ, hiển thị các API JavaScript cấp cao nằm trên các khả năng phần cứng cơ bản của hệ thống

Hướng dẫn này giới thiệu một API mới, [

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

0][getusermedia-spec], cho phép các ứng dụng web truy cập máy ảnh và micrô của người dùng

Con đường đến getUserMedia()

Nếu bạn không biết về lịch sử của nó, thì cách chúng tôi đến với API

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

1 là một câu chuyện thú vị

Một số biến thể của "API chụp phương tiện" đã phát triển trong vài năm qua. Nhiều người đã nhận ra nhu cầu có thể truy cập các thiết bị gốc trên web, nhưng điều đó đã khiến mọi người và mẹ của họ cùng nhau đưa ra một thông số kỹ thuật mới. Mọi thứ trở nên lộn xộn đến mức cuối cùng W3C quyết định thành lập một nhóm làm việc. Mục đích duy nhất của họ? . Nhóm làm việc về Chính sách API thiết bị (DAP) đã được giao nhiệm vụ hợp nhất + chuẩn hóa rất nhiều đề xuất

Tôi sẽ cố gắng tóm tắt những gì đã xảy ra trong năm 2011…

Vòng 1. Chụp phương tiện HTML

HTML Media Capture là bước đầu tiên của DAP trong việc tiêu chuẩn hóa phương tiện chụp trên web. Nó hoạt động bằng cách nạp chồng

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

2 và thêm các giá trị mới cho tham số

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

3

Nếu bạn muốn cho phép người dùng chụp ảnh nhanh bằng webcam, điều đó có thể thực hiện được với

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

4

<input type="file" accept="image/*;capture=camera">

Ghi video hoặc âm thanh cũng tương tự

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

Khá đẹp phải không? . Về mặt ngữ nghĩa, nó rất có ý nghĩa. Trường hợp "API" cụ thể này bị thiếu là khả năng thực hiện các hiệu ứng thời gian thực (e. g. hiển thị dữ liệu webcam trực tiếp thành

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

5 và áp dụng các bộ lọc WebGL). HTML Media Capture chỉ cho phép bạn ghi tệp phương tiện hoặc chụp ảnh nhanh trong thời gian

Ủng hộ

• android3. 0 trình duyệt - một trong những triển khai đầu tiên. Kiểm tra video này để xem nó trong hành động
• Chrome dành cho Android (0. 16)
• Firefox Di động 10. 0
• iOS6 Safari và Chrome (hỗ trợ một phần)

vòng 2. yếu tố thiết bị

Nhiều người cho rằng HTML Media Capture quá hạn chế, vì vậy một thông số kỹ thuật mới đã xuất hiện hỗ trợ mọi loại thiết bị (trong tương lai). Không có gì đáng ngạc nhiên khi thiết kế yêu cầu một yếu tố mới, yếu tố

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

6, trở thành tiền thân của

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

1

Opera là một trong những trình duyệt đầu tiên tạo triển khai quay video ban đầu dựa trên phần tử

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

6. Ngay sau đó (chính xác là cùng ngày), WhatWG đã quyết định loại bỏ thẻ

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

6 để ủng hộ một người mới nổi khác, lần này là API JavaScript có tên là

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

0. Một tuần sau, Opera đưa ra các bản dựng mới bao gồm hỗ trợ cho thông số kỹ thuật

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

1 đã cập nhật. Cuối năm đó, Microsoft đã tham gia bữa tiệc bằng cách phát hành Phòng thí nghiệm cho IE9 hỗ trợ thông số kỹ thuật mới

Đây là những gì

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

6 sẽ trông như thế nào

<device type="media" onchange="update(this.data)">device>
<video autoplay>video>
<script>
    function update(stream) {
    document.querySelector('video').src = stream.url;
    }
script>

Ủng hộ

Thật không may, không có trình duyệt nào được phát hành bao gồm

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

6. Tôi đoán ít API hơn để lo lắng về. )

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

6 đã có hai điều tuyệt vời cho nó. 1. ) đó là ngữ nghĩa và 2. ) nó có thể dễ dàng mở rộng để hỗ trợ không chỉ các thiết bị âm thanh/video

Hít một hơi. Công cụ này di chuyển nhanh

vòng 3. WebRTC

Yếu tố

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

6 cuối cùng đã đi theo con đường của Dodo

Tốc độ tìm API chụp phù hợp được tăng tốc nhờ nỗ lực lớn hơn [WebRTC][webrtc-spec] (Truyền thông thời gian thực trên web). Thông số kỹ thuật đó được giám sát bởi Nhóm làm việc W3C WebRTC. Google, Opera, Mozilla và một số khác đã triển khai

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

1 có liên quan đến WebRTC vì đó là cổng vào bộ API đó. Nó cung cấp phương tiện để truy cập luồng camera/micrô cục bộ của người dùng

Ủng hộ

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

1 đã được hỗ trợ kể từ Chrome 21, Opera 18 và Firefox 17

Bắt đầu

Với

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

0, cuối cùng chúng ta cũng có thể truy cập đầu vào webcam và micrô mà không cần plugin. Truy cập máy ảnh bây giờ là một cuộc gọi, không phải cài đặt. Nó được nướng trực tiếp vào trình duyệt. Vui mừng chưa?

phát hiện tính năng

Phát hiện tính năng là một kiểm tra đơn giản cho sự tồn tại của

<device type="media" onchange="update(this.data)">device>
<video autoplay>video>
<script>
    function update(stream) {
    document.querySelector('video').src = stream.url;
    }
script>

9

function hasGetUserMedia() {
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
    // Good to go!
} else {
    alert('getUserMedia() is not supported in your browser');
}

Bạn cũng có thể sử dụng Modernizr để phát hiện

function hasGetUserMedia() {
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
    // Good to go!
} else {
    alert('getUserMedia() is not supported in your browser');
}

0 để tránh tự mình nhảy tiền tố nhà cung cấp

if (Modernizr.getusermedia){
    var gUM = Modernizr.prefixed('getUserMedia', navigator);
    gUM({video: true}, function( //...
    //...
}

Đạt được quyền truy cập vào một thiết bị đầu vào

Để sử dụng webcam hoặc micrô, chúng tôi cần yêu cầu quyền. Tham số đầu tiên của

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

1 là một đối tượng chỉ định các chi tiết và yêu cầu cho từng loại phương tiện bạn muốn truy cập. Ví dụ: nếu bạn muốn truy cập webcam, tham số đầu tiên phải là

function hasGetUserMedia() {
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
    // Good to go!
} else {
    alert('getUserMedia() is not supported in your browser');
}

2. Để sử dụng cả micrô và máy ảnh, hãy vượt qua

function hasGetUserMedia() {
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
    // Good to go!
} else {
    alert('getUserMedia() is not supported in your browser');
}

3

<video autoplay>video>

<script>
    var errorCallback = function(e) {
    console.log('Reeeejected!', e);
    };

    // Not showing vendor prefixes.
    navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {
    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(localMediaStream);

    // Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
    // See crbug.com/110938.
    video.onloadedmetadata = function(e) {
        // Ready to go. Do some stuff.
    };
    }, errorCallback);
script>

VÂNG. Vì vậy, những gì đang xảy ra ở đây? . Nó hoạt động cùng với những người bạn HTML5 khác của chúng tôi,

function hasGetUserMedia() {
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
    // Good to go!
} else {
    alert('getUserMedia() is not supported in your browser');
}

4 và

function hasGetUserMedia() {
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
    // Good to go!
} else {
    alert('getUserMedia() is not supported in your browser');
}

5. Lưu ý rằng chúng tôi không đặt thuộc tính

function hasGetUserMedia() {
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
    // Good to go!
} else {
    alert('getUserMedia() is not supported in your browser');
}

6 hoặc bao gồm các phần tử

function hasGetUserMedia() {
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
    // Good to go!
} else {
    alert('getUserMedia() is not supported in your browser');
}

7 trên phần tử

function hasGetUserMedia() {
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
    // Good to go!
} else {
    alert('getUserMedia() is not supported in your browser');
}

5. Thay vì cung cấp cho video một URL tới một tệp phương tiện, chúng tôi đang cung cấp cho nó một URL thu được từ một đối tượng

function hasGetUserMedia() {
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
    // Good to go!
} else {
    alert('getUserMedia() is not supported in your browser');
}

9 đại diện cho webcam

Tôi cũng đang nói với

function hasGetUserMedia() {
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
    // Good to go!
} else {
    alert('getUserMedia() is not supported in your browser');
}

5 với

if (Modernizr.getusermedia){
    var gUM = Modernizr.prefixed('getUserMedia', navigator);
    gUM({video: true}, function( //...
    //...
}

1, nếu không nó sẽ bị đóng băng ở khung hình đầu tiên. Việc thêm

if (Modernizr.getusermedia){
    var gUM = Modernizr.prefixed('getUserMedia', navigator);
    gUM({video: true}, function( //...
    //...
}

2 cũng hoạt động như bạn mong đợi

Nếu bạn muốn thứ gì đó hoạt động trên nhiều trình duyệt, hãy thử cái này

navigator.getUserMedia  = navigator.getUserMedia ||
                            navigator.webkitGetUserMedia ||
                            navigator.mozGetUserMedia ||
                            navigator.msGetUserMedia;

var video = document.querySelector('video');

if (navigator.getUserMedia) {
    navigator.getUserMedia({audio: true, video: true}, function(stream) {
    video.src = window.URL.createObjectURL(stream);
    }, errorCallback);
} else {
    video.src = 'somevideo.webm'; // fallback.
}

Đặt các ràng buộc phương tiện (độ phân giải, chiều cao, chiều rộng)

Tham số đầu tiên của

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

1 cũng có thể được sử dụng để chỉ định thêm các yêu cầu (hoặc ràng buộc) trên luồng phương tiện được trả về. Ví dụ: thay vì chỉ cho biết bạn muốn có quyền truy cập cơ bản vào video (e. g.

if (Modernizr.getusermedia){
    var gUM = Modernizr.prefixed('getUserMedia', navigator);
    gUM({video: true}, function( //...
    //...
}

4), bạn có thể yêu cầu thêm luồng là HD

var hdConstraints = {
    video: {
    mandatory: {
        minWidth: 1280,
        minHeight: 720
    }
    }
};

navigator.getUserMedia(hdConstraints, successCallback, errorCallback);

...

var vgaConstraints = {
    video: {
    mandatory: {
        maxWidth: 640,
        maxHeight: 360
    }
    }
};

navigator.getUserMedia(vgaConstraints, successCallback, errorCallback);

Để biết thêm cấu hình, hãy xem

Lựa chọn nguồn truyền thông

Trong Chrome 30 trở lên,

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

1 cũng hỗ trợ chọn nguồn video/âm thanh bằng API

if (Modernizr.getusermedia){
    var gUM = Modernizr.prefixed('getUserMedia', navigator);
    gUM({video: true}, function( //...
    //...
}

6

Trong ví dụ này, micrô và máy ảnh cuối cùng được tìm thấy được chọn làm nguồn luồng nội dung nghe nhìn

MediaStreamTrack.getSources(function(sourceInfos) {
    var audioSource = null;
    var videoSource = null;

    for (var i = 0; i != sourceInfos.length; ++i) {
    var sourceInfo = sourceInfos[i];
    if (sourceInfo.kind === 'audio') {
        console.log(sourceInfo.id, sourceInfo.label || 'microphone');

        audioSource = sourceInfo.id;
    } else if (sourceInfo.kind === 'video') {
        console.log(sourceInfo.id, sourceInfo.label || 'camera');

        videoSource = sourceInfo.id;
    } else {
        console.log('Some other kind of source: ', sourceInfo);
    }
    }

    sourceSelected(audioSource, videoSource);
});

function sourceSelected(audioSource, videoSource) {
    var constraints = {
    audio: {
        optional: [{sourceId: audioSource}]
    },
    video: {
        optional: [{sourceId: videoSource}]
    }
    };

    navigator.getUserMedia(constraints, successCallback, errorCallback);
}

Hãy xem bản trình diễn tuyệt vời của Sam Dutton về cách cho phép người dùng chọn nguồn phương tiện

Bảo vệ

Một số trình duyệt hiển thị thanh thông tin khi gọi

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

1, cung cấp cho người dùng tùy chọn cấp hoặc từ chối quyền truy cập vào máy ảnh/micrô của họ. Thật không may, thông số kỹ thuật rất yên tĩnh khi nói đến bảo mật. Ví dụ: đây là hộp thoại cấp phép của Chrome

Hộp thoại cấp phép trong Chrome

Nếu ứng dụng của bạn đang chạy từ SSL (

if (Modernizr.getusermedia){
    var gUM = Modernizr.prefixed('getUserMedia', navigator);
    gUM({video: true}, function( //...
    //...
}

8), thì quyền này sẽ tồn tại lâu dài. Nghĩa là, người dùng sẽ không phải cấp/từ chối quyền truy cập mỗi lần

Cung cấp dự phòng

Đối với những người dùng không hỗ trợ cho

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

1, một tùy chọn là chuyển sang dự phòng cho tệp video hiện có nếu API không được hỗ trợ và/hoặc lệnh gọi không thành công vì lý do nào đó