使用Mediastream进行网页音视频的采集、转发及录制保存

一、MediaStreamer

Mediastream是WebRTC的核心技术之一，是一种Web API，它提供了一种流媒体处理方案，其中包括音频及视频采集、处理及转发。

使用MediaStreamer，我们可以轻松地通过网页实现音视频的采集及转发，同时也可以进行格式转换和媒体流处理等操作。

需要注意的是，MediaStreamer需要在支持WebRTC的浏览器中才能够正常工作。

二、MediaStreamConstraints

在使用MediaStreamer之前，需要先配置MediaStreamConstraints，以确定需要采集的媒体类型、分辨率、帧率等参数。

var constraints = {
  audio: true,
  video: {
    width: { min: 640, ideal: 1280, max: 1920 },
    height: { min: 360, ideal: 720, max: 1080 },
    frameRate: { ideal: 30, max: 60 }
  }
};

上述代码的意思是需要采集音频和视频，视频分辨率最小为640×360，最大为1920×1080，帧率不低于30fps。

三、MediaStream对象

在配置好MediaStreamConstraints之后，就可以通过MediaStream对象来实现音视频的采集了。

navigator.mediaDevices.getUserMedia(constraints)
  .then(function(stream) {
    var video = document.querySelector('video');
    video.srcObject = stream;
  })
  .catch(function(error) {
    console.log(error);
  });

上述代码中，使用getUserMedia方法来获取媒体流，并将其绑定到页面上的video元素中。

四、MediaStream 转发

利用MediaStream的getTracks方法，我们可以获取到媒体流中所有的轨道(track)，并将其转发到另外一个PeerConnection中，从而实现音视频的实时通讯。

var pc1 = new RTCPeerConnection();
var pc2 = new RTCPeerConnection();

var stream = await navigator.mediaDevices.getUserMedia(constraints);
stream.getTracks().forEach(track => pc1.addTrack(track, stream));

pc2.ontrack = function(event) {
  var video = document.querySelector('video');
  video.srcObject = event.streams[0];
};

pc1.createOffer().then(function(offer) {
  return pc1.setLocalDescription(offer);
}).then(function() {
  return pc2.setRemoteDescription(pc1.localDescription);
}).then(function() {
  return pc2.createAnswer();
}).then(function(answer) {
  return pc2.setLocalDescription(answer);
}).then(function() {
  return pc1.setRemoteDescription(pc2.localDescription);
}).catch(function(error) {
  console.log(error);
});

上述代码中，我们创建了两个PeerConnection，将媒体流中的所有轨道添加到了pc1中，并通过offer/answer交换机制，将pc1和pc2连接起来，实现音视频的实时通讯。

五、MediaStreamRecorder

除了实时转发之外，我们还可以使用MediaStreamRecorder来对媒体流进行录制，从而实现对音视频的可持久化存储。

var stream = await navigator.mediaDevices.getUserMedia(constraints);
var recorder = new MediaStreamRecorder(stream);

recorder.mimeType = 'video/webm';
recorder.ondataavailable = function(blob) {
  // 将blob数据上传到服务器，或者保存到本地等
};

recorder.start(10000); // 每10秒钟进行一次录制

上述代码中，我们首先通过getUserMedia获取到媒体流，然后创建了一个MediaStreamRecorder对象，设置了录制的格式和间隔时间，并将ondataavailable事件用于处理录制的数据。

六、MediaStreamTrack

在MediaStream中，每个音视频流都会对应一个或多个媒体轨道(MediaStreamTrack)，通过MediaStreamTrack对象，我们可以控制音视频流的开关、音量、静音等属性。

navigator.mediaDevices.getUserMedia(constraints)
  .then(function(stream) {
    var audioTrack = stream.getAudioTracks()[0];
    var videoTrack = stream.getVideoTracks()[0];

    audioTrack.enabled = false; // 关闭音频轨道
    videoTrack.volume = 0.5; // 设置视频音量为50%
    videoTrack.muted = true; // 静音
  })
  .catch(function(error) {
    console.log(error);
  });

上述代码中，我们首先获取到音视频流中的轨道，然后通过设置相应的属性，来控制音视频流的开关、音量、静音等。

七、MediaStreamTrackProcessor

除了控制音视频流的属性外，我们还可以使用MediaStreamTrackProcessor来对音视频流进行实时处理。

navigator.mediaDevices.getUserMedia(constraints)
  .then(function(stream) {
    var audioTrack = stream.getAudioTracks()[0];
    var audioContext = new AudioContext();
    var processor = audioContext.createScriptProcessor(1024, 1, 1);

    audioTrack.connect(processor);
    processor.connect(audioContext.destination);

    processor.onaudioprocess = function(event) {
      // 对音频流进行处理
    };
  })
  .catch(function(error) {
    console.log(error);
  });

上述代码中，我们首先获取到音频流中的轨道，然后创建了一个AudioContext和一个ScriptProcessor对象，将轨道连接到了processor中，并通过onaudioprocess事件来对音频流进行处理。

八、MediaStream 声音采集

我们可以使用MediaDevices的getUserMedia方法来获取音频输入设备，并进行音频的录制、处理及转发。

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(function(stream) {
    var audioContext = new AudioContext();
    var source = audioContext.createMediaStreamSource(stream);
    var processor = audioContext.createScriptProcessor(1024, 1, 1);

    source.connect(processor);
    processor.connect(audioContext.destination);

    processor.onaudioprocess = function(event) {
      // 对音频流进行处理
    };
  })
  .catch(function(error) {
    console.log(error);
  });

上述代码中，我们获取到音频输入设备的媒体流，然后创建了一个AudioContext和一个ScriptProcessor对象，将媒体流连接到了processor中，并通过onaudioprocess事件来对音频流进行处理。

九、MediaStream录制保存到服务器

我们可以使用MediaStreamRecorder来将媒体流保存到服务器。

var stream = await navigator.mediaDevices.getUserMedia(constraints);
var recorder = new MediaStreamRecorder(stream);

recorder.mimeType = 'video/webm';
recorder.ondataavailable = function(blob) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/save');
  xhr.send(blob);
};

recorder.start(10000); // 每10秒钟进行一次录制

上述代码中，我们首先通过getUserMedia获取到媒体流，然后创建了一个MediaStreamRecorder对象，设置了录制的格式和间隔时间，并将ondataavailable事件用于处理录制的数据，最后通过XMLHttpRequest来将录制的数据上传到服务器。

十、MediaStream录制保存到oss

我们可以将媒体流保存到阿里云OSS中。

var stream = await navigator.mediaDevices.getUserMedia(constraints);
var recorder = new MediaStreamRecorder(stream);

recorder.mimeType = 'video/webm';
recorder.ondataavailable = function(blob) {
  var client = new OSS({
    region: 'oss-cn-hangzhou',
    accessKeyId: 'your access key id',
    accessKeySecret: 'your access key secret',
    bucket: 'your bucket name'
  });

  var putOptions = {
    headers: {
      'Content-Type': 'video/webm'
    },
    progress: function(p, checkpoint) {
      // 上传进度
    }
  };

  var fileName = 'test.webm'; // 指定上传的文件名

  client.multipartUpload(fileName, blob, putOptions).then(function(result) {
    // 上传成功后的回调
  }).catch(function(err) {
    // 上传失败的回调
  });
};

recorder.start(10000); // 每10秒钟进行一次录制

上述代码中，我们首先通过getUserMedia获取到媒体流，然后创建了一个MediaStreamRecorder对象，设置了录制的格式和间隔时间，并将ondataavailable事件用于处理录制的数据，最后通过阿里云OSS SDK来将录制的数据上传到OSS中。