一、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 }
}
};
上述代码的意思是需要采集音频和视频,视频分辨率最小为640x360,最大为1920x1080,帧率不低于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中。