WebRTC 用屏幕分享录制一段视频

			<a class="btn btn-video btn-sm" type="button" onclick="start()" ><i class="fa fa-play"></i></a>
			<a class="btn btn-video btn-sm" type="button" onclick="end()" ><i class="fa fa-stop"></i></a>

var chunks = [];
var mediaRecorder;
var stream;

async function start() {
    // 获取麦克风权限
    const audioTrack = await navigator.mediaDevices.getUserMedia({ audio: true });

    // 获取屏幕分享权限
    stream = await openScreenCapture();
    // 给MediaStream添加音频轨道
    stream.addTrack(audioTrack.getAudioTracks()[0]);
    // 实例化一个MediaRecorder对象
    mediaRecorder = new MediaRecorder(stream, {mimeType: 'video/webm'});
    // 监听可用数据
    mediaRecorder.addEventListener('dataavailable', event => {
        if (event.data && event.data.size > 0) {
        chunks.push(event.data);
    }
});
    // 开始录制
    mediaRecorder.start(10);
}
function end() {
    // 停止录制
    mediaRecorder.stop();
    // 释放MediaRecorder
    mediaRecorder = null;
    // 停止所有流式视频轨道
    stream.getTracks().forEach(track => track.stop());
    // 释放getDisplayMedia或getUserMedia
    stream = null;
    // 获取当前文件的一个内存URL
    var recording = window.URL.createObjectURL(new Blob(chunks, {type: 'video/webm'}));

    const downloadLink = document.querySelector('a#download');
    downloadLink.href = recording;
    // download 规定作为文件名来使用的文本
    downloadLink.download = 'screen-recording.webm';
    downloadLink.click();

}
function openScreenCapture() {
    if (navigator.getDisplayMedia) {
        return navigator.getDisplayMedia({ video: true });
    } else if (navigator.mediaDevices.getDisplayMedia) {
        return navigator.mediaDevices.getDisplayMedia({ video: true });
    } else {
        return navigator.mediaDevices.getUserMedia({
            video: { mediaSource: 'screen' },
        });
    }
}
function takepicture() {
    video = document.getElementById('rtc_1');
    canvas = document.getElementById('canvas');
    // photo = document.getElementById('photo');

    var context = canvas.getContext('2d');
    if (400 && 300) {
        canvas.width = 400;
        canvas.height = 300;
        context.drawImage(video, 0, 0, 400, 300);

        // var data = canvas.toDataURL('image/png');
        // photo.setAttribute('src', data);
    } else {
        context.fillStyle = "#AAA";
        context.fillRect(0, 0, canvas.width, canvas.height);
    }
}