简单的用getUserMedia捕获摄像头

 MediaDevices.getUserMedia 可用于捕获摄像头和麦克风,该方法接受MediaStreamConstraints为参数,MediaStreamConstraints用于指定捕获的类型及一些附加参数。

如下的MediaStreamConstraints表示捕获摄像头和麦克风:

{ audio: true, video: true }

如下的MediaStreamConstraints指定了分辨率:

{
  audio: true,
  video: { width: 480, height: 320}
}

下面是捕获摄像头和麦克风的例子:

// 捕获摄像头和麦克风。
const mediaStreamConstraints = {
    video: true,
    audio: true
};

// 显示流的视频元素。
const localVideo = document.querySelector('video');

// MediaStream获取成功的回调函数。
function gotLocalMediaStream(mediaStream) {
    // MediaStream添加到视频元素。
    localVideo.srcObject = mediaStream;
}

// MediaStream获取失败的回调函数。
function handleLocalMediaStreamError(error) {
    console.log('navigator.getUserMedia error: ', error);
}

navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
    .then(gotLocalMediaStream).catch(handleLocalMediaStreamError);

 

你可能感兴趣的:(webrtc)