web技术分享| WebRTC控制摄像机平移倾斜和缩放
Posted anyRTC
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web技术分享| WebRTC控制摄像机平移倾斜和缩放相关的知识，希望对你有一定的参考价值。
MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。
它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，promise会reject回调一个 PermissionDeniedError 或者 NotFoundError 。
参数
-
constraintsconstraints 参数是一个包含了
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>
效果演示
以上是关于web技术分享| WebRTC控制摄像机平移倾斜和缩放的主要内容，如果未能解决你的问题，请参考以下文章