html | 控件 video

这里讲一下 video 控件的用法。

开发环境

• chrome 最新版

video 显示摄像头拍摄内容

html

<video id="video" style="height: 100%"></video>

js

方法一「顺序」

const video = document.getElementById('video');

const load_camera = () => {
    navigator.getUserMedia = navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia; //获取媒体对象（这里指摄像头）

    navigator.getUserMedia({
        video: true
    }, gotStream, noStream); //参数1获取用户打开权限；参数二成功打开后调用，并传一个视频流对象，参数三打开失败后调用，传错误信息
};


const gotStream = (stream) => {
    video.srcObject = stream;
    video.play();
}

const noStream = (err) => {
    alert("失败");
}

load_camera()

方法二「异步」

async function setupCamera() {
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        throw new Error(
            'Browser API navigator.mediaDevices.getUserMedia not available');
    }

    const video = document.getElementById('video');
    video.width = videoWidth;
    video.height = videoHeight;

    video.srcObject = await navigator.mediaDevices.getUserMedia({
        'audio': false,
        'video': {
            facingMode: 'user',
            width: videoWidth,
            height: videoHeight,
        },
    });

    return new Promise((resolve) => {
        video.onloadedmetadata = () => {
            resolve(video);
        };
    });
}

async function loadVideo() {
    const video = await setupCamera();
    video.play();

    return video;
}

css

video 镜像显示

#video {
    transform: rotateY(180deg);
}

控制 video 大小

一般很难用 css 或者 js 来控制 video 的大小。

这里给出两个办法

• css
• canvas

css

这里的原理是，将 video 放在一个父类容器里，通过对父类容器进行大小设定，然后让 video 强行填充父类容器就可以了。

• 优点
  • 方便、简单
• 缺点
  • 因为是强行填充，所以，有可能失真

这里给出 video 的样式

video {
    transform: rotateY(180deg);
    width: 100%;
    height: 100%;
    object-fit: fill;
}

canvas

这里是将 video 绘制到 canvas 上，然后，修改 canvas 尺寸做到。

• 优点
  • 比例可控，失真性小
• 缺点
  • 逻辑复杂

具体的情况可以查看

• pose_score | tensorflow.js 实时评估改进