使用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中。