亲宝软件园·资讯

展开

靓仔靓女如何用浏览器自拍和保存

雪山飞猪 人气:2

一、前言

1.核心技术

  • Web Real-Time Communication:网页即时通信,可以在浏览器进行实时语音或者视频对话的API
  • Canvas:HTML5中的新元素,可以用来来绘制图形、图标、以及其它任何视觉性图像

2.音频采集的基本概念

  • 摄像头:用于采集图像和视频
  • 麦克风:采集音频数据
  • 帧率:一秒钟采集图像的次数。帧率越高,越平滑流畅
  • 轨:借鉴了多媒体的概念,每条轨数据都是独立的,如MP4中的音频轨、视频轨,是分别被存储的
  • 流:可以理解为容器。在WebRTC中,流可以分为媒体流(MediaStream)和数据流(DataStream)。
  • 分辨率:2K、1080P、720P等,越清晰,占用带宽越多

3.音视频设备的基本原理

  • 音频设备
    音频输入设备主要是采集音数据,而采集音频数据的本质是模拟信号转成数字信号,
    采集到的数据经过量化、编码,最终开成数字信号,这就是音频设备要完成的工作。
    人的听觉范围的频率是20Hz~20kHz之间,日常语音交流8kHz就哆了。
    为了追求高品质、高保真,需要将音频输入设备采样率设置在40kHz上才能完整保留原始信号

  • 视频设备
    当实物光通过镜头进行摄像机后,它会通过视频设备的模数转换(A/D)模块,即光学传感器,将光转换成数字信号,即RGB数据,获得RGB数据后,再通过DSP进行优化处理,如自动增强、白平衡、色彩饱和等,等到24位的真彩色图片

模数转换使用的采集定理称为奈奎斯特定理:

在进行模拟 / 数字信号的转换过程中,当采样率大于信号中最高频率的 2 倍时,采样之后的数字信号就完整地保留原始信号中的信息。

talk is cheap, 上代码,以下示例运行的时候会请求摄像头权限,同意即可,接下来就是见证奇迹的时刻!

二、示例

1.示例1-打开摄像头

这就是照像的核心功能,以后可以用来化妆,挤痘痘,整理发型

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>打开摄像头</title>
</head>
<body>
<h1>打开摄像头</h1>
<video autoplay playsinline></video>
</body>
</html>

<script>
    const mediaStreamContrains = {
        video: {
            frameRate: {min: 20},
            width: {min: 640, ideal: 1280},
            height: {min: 360, ideal: 720},
            aspectRatio: 16 / 9
        },
        audio: {
            echoCancellation: true,
            noiseSuppression: true,
            autoGainControl: true
        }
    };

    const localVideo = document.querySelector('video');

    function gotLocalMediaStream(mediaStream) {
        localVideo.srcObject = mediaStream;
    }

    function handleLocalMediaStreamError(error) {
        console.log('navigator.getUserMedia error: ', error);
    }

    navigator.mediaDevices.getUserMedia(mediaStreamContrains).then(
        gotLocalMediaStream
    ).catch(
        handleLocalMediaStreamError
    );
</script>

运行结果如下

示例2-拍照保存

这里展示了两个按钮,拍照和保存,yes,就是自拍的核心功能!

<html>
<head>
    <meta charset="UTF-8">
    <title>拍照一分钟,P图两小时</title>
</head>

<body>
<section>
    <div>
        <video autoplay playsinline id="player"></video>
    </div>

</section>
<section>
    <div>
        <button id="snapshot">拍照</button>
        <button id="download">下载</button>
    </div>
    <div>
        <canvas id="picture"></canvas>
    </div>
</section>
</body>
</html>


<script>
    'use strict';

    var videoplay = document.querySelector('video#player');

    function gotMediaStream(stream) {
        window.stream = stream;
        videoplay.srcObject = stream;
    }

    function handleError(err) {
        console.log('getUserMedia error:', err);
    }

    function start() {
        var constraints = {
            video: {
                width: 1280,
                height: 720,
                frameRate: 15,
                facingMode: 'enviroment'
            },
            audio: false
        }

        navigator.mediaDevices.getUserMedia(constraints)
            .then(gotMediaStream)
            .catch(handleError);
    }


    //拍照
    var snapshot = document.querySelector('button#snapshot');
    snapshot.onclick = function () {
        var picture = document.querySelector('canvas#picture');
        picture.width = 1280;
        picture.height = 720;
        picture.getContext('2d').drawImage(videoplay, 0, 0, picture.width, picture.height);
    };


    //下载
    function downLoad(url) {
        var oA = document.createElement("a");
        oA.download = 'photo';// 设置下载的文件名,默认是'下载'
        oA.href = url;
        document.body.appendChild(oA);
        oA.click();
        oA.remove(); // 下载之后把创建的元素删除
    }

    document.querySelector("button#download").onclick = function () {
        downLoad(picture.toDataURL("image/jpeg"));
    };

    start();

</script>

运行结果如下

就是这么简单!

重点方法和参数解释

  • 1.方法:avigator.mediaDevices.getUserMedia(constraints);
    返回一个promise对象,调用成功,可以通过promise对象获取MediaStream对象,

  • 2.参数:mediaStreamContrains
    传入的constraints参数类型为 MediaStreamConstraints,可以指定 MediaStream 中包含哪些类型的媒体轨(音频轨、视频轨),并且可为这些媒体轨设置一些限制。
    视频的帧率最小 20 帧每秒;
    宽度最小是 640,理想的宽度是 1280;
    高度最小是 360,最理想高度是 720;
    宽高比是 16:9;
    对于音频则是开启回音消除、降噪以及自动增益功能。

加载全部内容

相关教程
猜你喜欢
用户评论