web 技术分享| WebRTC 控制摄像机平移、倾斜和缩放

2022 年 3 月 10 日
本文字数：1828 字
阅读完需：约 6 分钟

MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D 转换器等等），也可能是其它轨道类型。

它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，promise会reject回调一个 PermissionDeniedError 或者 NotFoundError 。

参数

constraints
constraints 参数是一个包含了video 和 audio两个成员的MediaStreamConstraints 对象，用于说明请求的媒体类型。必须至少一个类型或者两个同时可以被指定。如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求，那么返回的 Promise 对象就会处于 rejected［失败］状态，NotFoundError作为 rejected［失败］回调的参数。

const constraints = {    video: {        pan: true,         tilt: true,         zoom: true    }};
async function init(e) {    try {        const stream = await navigator.mediaDevices.getUserMedia(constraints);        handleSuccess(stream);        e.target.disabled = true;    } catch (e) {        handleError(e);    }};
document.querySelector('#showVideo').addEventListener('click', e => init(e));

复制代码

getVideoTracks() 方法返回代表此流中视频轨道 MediaStream的对象序列。MediaStreamTrack
一组MediaStreamTrack对象，媒体流中包含的每个视频轨道都有一个对象。视频轨道是那些 kind属性为的轨道video。如果流不包含视频轨道，则该数组为空。
getCapabilities方法返回一个 MediaTrackCapabilities 对象，此对象表示每个可调节属性的值或者范围，该特性依赖于平台和 user agent.
getSettings()方法返回一个MediaTrackSettings 对象，该对象包含 current 的每个可约束属性的当前值MediaStreamTrack。
applyConstraints() 方法将一组约束应用于轨道；这些约束让网站或应用程序为轨道的可约束属性（例如帧速率、尺寸、回声消除等）建立理想值和可接受的值范围。

function handleSuccess(stream) {      const video = document.querySelector('video');      const videoTracks = stream.getVideoTracks();      video.srcObject = stream;
      const capabilities = videoTracks[0].getCapabilities();      const settings = videoTracks[0].getSettings();      for (const ptz of ['pan', 'tilt', 'zoom']) {        if (!(ptz in settings)) {          continue;        }        const input = document.querySelector(`input[name=${ptz}]`);        input.min = capabilities[ptz].min;        input.max = capabilities[ptz].max;        input.step = capabilities[ptz].step;        input.value = settings[ptz];        input.disabled = false;        input.oninput = async event => {              try {                const constraints = {advanced: [{[ptz]: input.value}]};                await videoTracks[0].applyConstraints(constraints);              } catch (err) {                console.error('applyConstraints() failed: ', err);              }        };      }}
function handleError(error) {  console.log(`getUserMedia error: ${error.name}`, error);}

复制代码

<style>    div.label {        display: inline-block;        font-weight: 400;        margin: 0 0.5em 0 0;        width: 3.5em;    }    video {        background: #222;        margin: 0 0 20px 0;        width: 500px;        height: 400px;    }</style>         <body>    <video id="gum-local" autoplay playsinline></video>    <button id="showVideo">Open camera</button>
    <div>        <div class="label">Pan:</div>        <input name="pan" type="range" disabled>    </div>    <div>        <div class="label">Tilt:</div>        <input name="tilt" type="range" disabled>    </div>    <div>        <div class="label">Zoom:</div>        <input name="zoom" type="range" disabled>    </div></body>