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.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>Pan:</div>


        <input name="pan" type="range" disabled>


    </div>


    <div>


        <div>Tilt:</div>


        <input name="tilt" type="range" disabled>


    </div>


    <div>


        <div>Zoom:</div>


        <input name="zoom" type="range" disabled>


    </div>


</body>