WebRTC视频分辨率设置

html#
在页面上摆放一些元素，下面是主要部分

<div id="buttons">

    <button id="stop">停止</button>

    <button id="b320">320x240</button>

    <button id="b240-320">240x320</button>

    <button id="b640">640x480</button>

    <button id="b1280">1280x720</button>

    <button id="b1920">1920x1080</button>

    <button id="b2048">2048x1152</button>

</div>

<div id="videoblock" style="display: none">

    <p id="dimensions" style="height: 1em;"></p>

    <video playsinline autoplay style="background: none;height: auto;width: auto;"></video>

    <div id="width">

        <label>Width <span></span>px:</label>

        <input type="range" min="0" max="7680" value="0">

    </div>

    <input id="isFullWidth" type="checkbox">视频宽度100%<br>

    <input id="aspectlock" type="checkbox">锁定宽高比<br>

</div>

<p id="msg" style="display: none;"></p>

button 一些按钮用来选择分辨率
videoblock 用来显示视频，默认隐藏
dimensions 用来现实视频的一些信息
video 宽高先设置为auto
#width input 滑动选择视频的宽度
isFullWidth 让video宽度为100%
msg 显示错误信息
js#
拿到一些元素

const dimensionsInfo = document.querySelector(’#dimensions’);

const video = document.querySelector(‘video’);

let stream;

const videoblock = document.querySelector(’#videoblock’); // 视频区域

const messagebox = document.querySelector(’#msg’);

const widthInput = document.querySelector(‘div#width input’);

const widthOutput = document.querySelector(‘div#width span’);

const aspectLock = document.querySelector(’#aspectlock’);

const fullWidSetting = document.querySelector(’#isFullWidth’);
启动视频#
先把拿到流的处理方法写出来

function gotStream(mediaStream) {

stream = window.stream = mediaStream; // 给控制台

video.srcObject = mediaStream;

messagebox.style.display = ‘none’;

videoblock.style.display = ‘block’;

const track = mediaStream.getVideoTracks()[0];

const constraints = track.getConstraints();

console.log('当前constraints: ’ + JSON.stringify(constraints));

if (constraints && constraints.width && constraints.width.exact) {

widthInput.value = constraints.width.exact;

widthOutput.textContent = constraints.width.exact;

} else if (constraints && constraints.width && constraints.width.min) {

widthInput.value = constraints.width.min;

widthOutput.textContent = constraints.width.min;

}

}
拿到视频流后，track.getConstraints()获取信息，显示出当前信息并修改ui。

以按钮320为例

document.querySelector(’#b320’).onclick = () => {

const c320 = {

video: { width: { exact: 320 }, height: { exact: 240 } }

};

startPlay(c320);

};

function startPlay(constraints) {

stopStream();

clearMsg();

videoblock.style.display = ‘none’;

navigator.mediaDevices.getUserMedia(constraints)

.then(gotStream)

.catch(e => {

  showErrMsg('getUserMedia报错 ' + e, JSON.stringify(constraints));

});

}

function stopStream() {

if (stream) {

stream.getTracks().forEach(track => {

  track.stop();

});

}

}
定义配置c320，设定宽为320，高伟240
先把视频停下来
调用getUserMedia并把参数配置传进去
还可以监听video的变化

let currentWidth = 0;

let currentHeight = 0;

// 显示视频尺寸信息

function displayVideoDimensions(whereSeen) {

if (video.videoWidth) {

dimensionsInfo.innerText = '实际video尺寸: ' + video.videoWidth +

  'x' + video.videoHeight + 'px.';

if (currentWidth !== video.videoWidth ||

  currentHeight !== video.videoHeight) {

  console.log(whereSeen + ': ' + dimensionsInfo.innerText);

  currentWidth = video.videoWidth;

  currentHeight = video.videoHeight;

}

} else {

dimensionsInfo.innerText = '拿不到video的宽度';

}

}

// 载入meta信息

video.onloadedmetadata = () => {

displayVideoDimensions(‘loadedmetadata’);

};

// 修改了尺寸

video.onresize = () => {

displayVideoDimensions(‘resize’);

};
载入信息或者尺寸改变的时候显示出来。

定义了多种常见的分辨率

document.querySelector(’#b640’).onclick = () => {

const c640 = {

video: { width: { exact: 640 }, height: { exact: 480 } }

};

startPlay(c640);

};

document.querySelector(’#b1280’).onclick = () => {

const c1280 = {

video: { width: { exact: 1280 }, height: { exact: 720 } }

};

startPlay(c1280);

};
滑动调整#
我们放置了一个input，type=“range”，它可以左右滑动。滑动的时候我们改变视频设置的宽度。宽度信息也显示在界面上。

widthInput.onchange = onConstraintChange;

function onConstraintChange(e) {

widthOutput.textContent = e.target.value;

const track = window.stream.getVideoTracks()[0];

let constraints;

if (aspectLock.checked) {

constraints = {

  width: { exact: e.target.value },

  aspectRatio: {

    exact: video.videoWidth / video.videoHeight

  }

};

} else {

constraints = { width: { exact: e.target.value } };

}

clearMsg();

console.log('使用配置 ’ + JSON.stringify(constraints));

track.applyConstraints(constraints)

.then(() => {

  console.log('配置成功');

  displayVideoDimensions('applyConstraints');

})

.catch(err => {

  showErrMsg('配置失败 ', err.name);

});

}
亚马逊测评 www.yisuping.cn