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

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>

效果演示

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

Unity实现安卓端手势控制摄像机的旋转和缩放
说明上一篇记录了PC端鼠标控制摄像机的移动和缩放,这一篇写的是在安卓机上实现手势控制摄像机围绕一个物体进行旋转和缩放,两篇的代码逻辑基本一样只是输入检测有区别,这里我是分开记录,没有整合[Uni ...
web技术分享| AudioContext 实现音频可视化
要实现音频可视化,实现一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext. AudioContext接口表示由链接在一起的音频模块构建的音频处理图,每个模块由一 ...
web技术分享| 快速实现一个呼叫邀请 SDK
什么是呼叫邀请 SDK? 微信的音视频呼叫想必大家都用过吧,它就是呼叫邀请在社交场景的表现形式之一,同时呼叫邀请还被运用到很多场景: 娱乐场景:PK 连麦.抢麦教培场景:举手发言企业服务:类企业微 ...
技术分享 | 遥控器控制（Joystick）
一.遥控器控制在真实飞行过程中,我们使用真实的遥控器作为控制无人机的主要操作来源,遥控器始终拥有最高的权限,精湛的遥控器操作手法可以保证无人机安稳着陆,但对于很多非专业人士来说,遥控的操作技巧是需要 ...
web技术分享| web的白板工具栏封装
最近做白板项目,最重要的工具栏模块在网上搜了搜都没找到想要的,狠下心自己原生封装一个. 最终效果展示: 使用白板 SDK 使用 anyRTC 的白板SDK 项目地址:https://demos.any ...
web技术分享| 白板SDK之函数和方程式的运用
白板通常会提供多种工具类型,每种工具的用途也各不相同,例如下表: 工具名称用途框选工具框选其他图形涂鸦工具涂鸦橡皮擦工具擦除画笔痕迹或者图形激光笔工具激光笔直线工具绘制直线箭头 ...
web技术分享| 【高德地图】实现自定义的轨迹回放
实现(轨迹回放)方式有两种: 第一种是使用 JS API 和 AMap.PolyLine(折线)等图形配合实现. 第二种是使用 JS API 和 AMapUI 组件库配合使用,利用 PathSimp ...
腾讯技术分享：微信小程序音视频与WebRTC互通的技术思路和实践
概述本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebRTC ...
web开发技术和技术分享_2020年将改变Web开发的顶级技术
web开发技术和技术分享 Web improvement encompasses a gigantic arrangement of rules and procedures each site en ...
大表与大表join数据倾斜_技术分享|大数据技术初探之Spark数据倾斜调优
侯亚南数据技术处支宸啸数据技术处在大数据计算中,我们可能会遇到一个很棘手的问题--数据倾斜,此时spark任务的性能会比预期要差很多:绝大多数task都很快执行完成,但个别task执行极慢或者 ...

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

参数

效果演示

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

最新文章

热门文章