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

原创

于 2022-03-10 11:35:44 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#webrtc #前端 #web #音视频 #摄像头

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(constr