html在此页面右侧展示另一个页面,在html下如何实现摄像头录制的视频实时显示在当前页面中的另一个video中...

现在有个项目，在同html中有两个video，一个video打开摄像头录制视频，另一个video实时显示录制的视频，利用MediaRecoder、MediaSouce，求大神指导，代码如下：

test.html

摄像头调用

#test {

width: 200px;

height: 200px;

}

启用摄像头

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

var testVideo = document.querySelector('#test');

var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

var sourceBuffer;

var mediaRecorder;

var mediaStream;

// 接收视频并展示

var mediaSource = new MediaSource();

testVideo.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', (event) => {

console.log('mediaSource打开：', event);

sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);

sourceBuffer.addEventListener('updateend', (event) => {

console.log('sourceBuffer更新结束：', event);

mediaSource.endOfStream();

testVideo.play();

});

});

function openCamera() {

var constraints = { audio: true, video: { width: 100, height: 100 } };

navigator.mediaDevices.getUserMedia(constraints)

.then(stream => {

mediaStream = stream;

console.log('mediaStream-', mediaStream);

video.srcObject = mediaStream;

video.onloadedmetadata = function (e) {

console.log('视频可以使用', e);

console.dir(video);

video.play();

};

mediaRecorder = new MediaRecorder(mediaStream);

mediaRecorder.ondataavailable = (event) => {

sourceBuffer.appendBuffer(event.data);

}

mediaRecorder.start(1000);

})

.catch(err => { console.log(err.name + ": " + err.message); });

}

运行之后会报如下错误：

一运行到sourceBuffer.appendBuffer(event.data)就会报错