WEBRTC--MediaStream采集

1,357 阅读1分钟
MediaStream:js通过浏览器采集的音频和视频流


通常通过两种方法获取:

(一)通过navigator.getUserMedia采集

'use strict';

navigator.getUserMedia = navigator.getUserMedia ||
    navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

var constraints = { // 音频、视频约束
  audio: true, // 指定请求音频Track
  video: {  // 指定请求视频Track
      mandatory: { // 对视频Track的强制约束条件
          width: {min: 320},
          height: {min: 180}
      },
      optional: [ // 对视频Track的可选约束条件
          {frameRate: 30}
      ]
  }
};


navigator.getUserMedia(constraints, successCallback, errorCallback);

(二)通过navigator.mediaDevices.getUserMedia采集

var constraints = { // 音频、视频约束
  audio: true, // 指定请求音频Track
  video: {  // 指定请求视频Track
      width:640,
      height:480
  }
};navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
  /* 使用这个stream stream */
    successCallback(stream);
}).catch(function(err) {
  /* 处理error */errorCallback(error);});


video展示获取到的MediaStream

var video = document.querySelector('video');

function successCallback(stream) {
  if (window.URL) {
    video.src = window.URL.createObjectURL(stream);
  } else {
    video.srcObject = stream;
  }
}

function errorCallback(error) {
  console.log('navigator.getUserMedia error: ', error);
}