WebRtc06: 音视频数据采集

学而知不足~

于 2025-01-24 15:16:50 发布

阅读量1.7k

点赞数 16

分类专栏：音视频开发 WebRtc 文章标签：音视频实时音视频

本文链接：https://blog.csdn.net/upset_poor/article/details/145306546

版权

音视频采集API

在这里插入图片描述通过getUserMedia这个API去获取视频音频，
通过constraints这个对象去配置偏好，比如视频宽高、音频降噪等

测试代码

index.html

<html>
    <head>
            <title>WebRtc capture video and audio</title>
    </head>
    <body>
            <video autoplay playsinline id="player"></video>
            <script src="./js/client.js"></script>
    </body>
</html>

client.js

'use strict'

var videoplay = document.querySelector('video#player');
function getMediaStream(stream) {
   
    videoplay.srcObject = stream;
}
function handleError(err) {
   
    console.log('getUserMedia error: ', err);
}

if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
   
    console.log('getUserMedia is not supported');
} else {
   
    var constraints = {
   
        video : true,
        audio : true
    }
    navigator.mediaDevices.getUserMedia(constraints).then(getMediaStream).catch(handleError);
}

会打开前置摄像头并且输出视频音频

浏览器适配

getUserMedia适配

getUserMedia (www)
webkitGetUserMedia(google)
mozGetUserMedia(firefox)
每个厂商的API名称都不一样
比如在前面的index.html中加上下述代码

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

获取音视频设备的访问权限

在前面代码的基础上，返回navigator.mediaDevices.enumerateDevices()，从而得到每一个媒体信息
然后通过添加到HTML的选择器中实现打印不同设备信息
index.html

<html>
    <head>
            <title>WebRtc capture video and audio</title>
    </head>
    <body>
                <div>
                        <label>audioSource:</label>
                        <select id="audioSource"></select>
                </div>
                <div>
                        <label>audioOutput:</label>
                        <select id="audioOutput"></select>
                </div>
                <div>
                        <label>videoSource:</label>
                        <select id="videoSource"></select>
                </div>
                <video autoplay playsinline id="player"></video>
                <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
                <script src="./js/client.js"></script>
    </body>
</html>

client.js

'use strict'

var audioSource = document.querySelector('select#audioSource');
var audioOutput = document.querySelector('select#audioOutput');
var videoSource = document.querySelector('select#videoSource');

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

function getDevice(deviceInfos) {
   
    deviceInfos.forEach(function(deviceInfos) {
   
        var option = document.createElement('option');
        option.text = deviceInfos.label;
        option.value = deviceInfos.deviceId;

        if (deviceInfos.kind == 'audioinput') {
   
            audioSource.appendChild(option);
        } else if (deviceInfos.kind == 'audiooutput') {
   
            audioOutput.appendChild(option);
        } else if (deviceInfos.kind == 'videoinput') {
   
            videoSource.appendChild(option);
        }
    });
}

function getMediaStream(stream) {
   
    videoplay.srcObject = stream;
    return navigator.mediaDevices.enumerateDevices();
}
function handleError(err) {
   
    console.log('getUserMedia error: ', err);
}

if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
   
    console.log('getUserMedia is not supported');
} else {
   
    var constraints = {
   
        video : true,
        audio : true
    }
    navigator.mediaDevices.getUserMedia(constraints).then(getMediaStream).then(getDevice).catch(handleError);
}

音视频采集约束

视频约束

width
height
aspectRatio 宽高比
frameRate 帧率
facingMode
- user 前置摄像头
- environment 后置摄像头
- left 前置左侧摄像头
- right 前置右侧摄像头
resizeMode

设置constraints中视频的参数如下

var constraints = {
   
        video : {
   
            width: 1920,
            height: 1080,
            frameRate: 30,
            facingMode: 'environment'
        },
        audio : true
    }

音频约束

volume 音量 [0-1.0]
sampleRate 采样率
sampleSize 采样大小位深一般16位
echoCancellation 回音消除 true/false
autoGainControl 自动增益 true/false 在原有声音的基础上，增加音量
noiseSuppression 降噪 true/false
latency 延迟大小
channelCount 声道数量
deviceID
groupID 组ID

var constraints = {
   
        video : {
   
            width: 1920,
            height: 1080,
            frameRate: 30,
            facingMode: 'environment'
        },
        audio : {
   
            noiseSuppression: true,
            echoCancellation: true
        }
    }

整体例子：切换不同摄像头

'use strict'

var audioSource = document.querySelector('select#audioSource');
var audioOutput = document.querySelector('select#audioOutput');
var videoSource = document.querySelector('select#videoSource');

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

function getDevice(deviceInfos) {
   
    deviceInfos.forEach(function(deviceInfos) {
   
        var option = document.createElement('option');
        option.text = deviceInfos.label;
        option.value = deviceInfos.deviceId;
        console.log('lai: deviceInfo: ', deviceInfos.label);

        if (deviceInfos.kind == 'audioinput') {
   
            audioSource.appendChild(option);
        } else if (deviceInfos.kind == 'audiooutput') {
   
            audioOutput.appendChild(option);
        }

最低0.47元/天解锁文章