Hello,
I’m trying to record streams with the media recorder with the possibility to switch the stream recorded when I click to a switch button.
This is my example :
Promise.all(
[
//audio stream
navigator.mediaDevices.getUserMedia({
audio: {
deviceId: settings.audioDeviceId
}
}),
//webcam stream
navigator.mediaDevices.getUserMedia({
video: {
deviceId: settings.videoDeviceId
}
}),
//window stream
navigator.mediaDevices.getUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: settings.submissionWindowId
}
}
})
])
.then((streams) => {
const [audioStream, videoStream, windowStream] = streams;
const audioTrack = audioStream.getAudioTracks()[0];
const windowTrack = windowStream.getVideoTracks()[0];
const videoTrack = videoStream.getVideoTracks()[0];
audioStream.addTrack(windowStream.getVideoTracks()[0]);
this.setState({audioStream, windowStream, videoStream});
this.setState({audioTrack, windowTrack, videoTrack});
this.startRecord(audioStream);
return audioStream;
}).then(this.handleStream).catch(handleError);
startRecord(stream) {
const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start(100);
const _this = this;
mediaRecorder.ondataavailable = function(e) {
if (e.data && e.data.size > 0) {
let newArray = _this.state.chunks.slice();
newArray.push(e.data);
_this.setState({chunks:newArray});
}
console.log(_this.state.chunks.length);
};
this.setState({mediaRecorder});
}
I tried :
changeSource(event) {
event.preventDefault();
const audioStream = this.state.audioStream;
let mediaRecorder = this.state.mediaRecorder;
mediaRecorder.stop();
if(this.props.currentVideoSource === 'pdf') {
audioStream.removeTrack(this.state.windowTrack);
audioStream.addTrack(this.state.videoTrack);
this.props.switchVideoSource('video');
} else {
audioStream.removeTrack(this.state.videoTrack);
audioStream.addTrack(this.state.windowTrack);
this.props.switchVideoSource('pdf');
}
mediaRecorder.stream = audioStream;
this.startRecord(audioStream);
this.handleStream(audioStream);
}
handleStream (stream) {
const video = document.querySelector('video');
video.srcObject = stream,
video.onloadedmetadata = (e) => video.play()
}
This code switch the stream on the video element but it doesn’t record the switched stream.
Any Idea ?
Thank you