05 | 原来浏览器还能抓取桌面？

如果是解决网络引起的模糊，那么可能就要牺牲实时性，提高延迟，就像我们看视频时卡顿要缓冲一下。 具体的解决方法是： 1，解决网络问题😂 2，关闭 Web RTC 的自适应码率，frameRate，width，height 设置固定值或高范围值。

老师!文中(不能在采集桌面的同时采集音频),好像是能同时采集的,弹出了一个分享音频的选择框,勾上好像就能采集音频了

老师，webrtc能否录制系统内声音呢？

老师，我现在在用electron-vue写客户端，但是我想分享我的屏幕，结果报这个错误navigator.mediaDevices.getDisplayMedia is not a function，但是我是能看到视频和听到声音的，我之前在web是可以调的，请问这是为什么呢

是不是这一讲的代码只能在Chrome下面运行，别的浏览器不支持，我试了一下，edge和火狐获取不到桌面，另，看到所有代码里面都有<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script> 为什么要引入这两个js，删掉好像一样可以运行

老师,也就是说webrtc这个分享时没办法实现分享系统声音的嘛？分享游戏听不到声音的嘛？

老师，按照demo写的，录下来的桌面视频好模糊，调整了分辨率和帧率也没啥用，分辨率太大了，录下来的视频会嵌套变成很多层；另外getDisplayMedia接口的具体参数在哪里能查到？ MDN的参数很简单，跟实际要用到的相比少了很多

老师，录制的像素太低怎么办？

交作业：https://codepen.io/vicksiyi/pen/oKGJzL // 判断是否为PC端的Chrome let ifMachine = (() => { var ua = navigator.userAgent, isWindowsPhone = /(?:Windows Phone)/.test(ua), isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone, isAndroid = /(?:Android)/.test(ua), isFireFox = /(?:Firefox)/.test(ua), isChrome = /(?:Chrome|CriOS)/.test(ua), isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)), isPhone = /(?:iPhone)/.test(ua) && !isTablet, isPc = !isPhone && !isAndroid && !isSymbian; return { isChrome: isChrome, isPc: isPc }; })();

//第一部分代码 let videoTypes = "video/webm\;codecs=vp8"; let userMediaSetting = { video: true }; let playVideo = document.querySelector('video#play'); let rePlayVideo = document.querySelector('video#replay'); let recordingButton = document.querySelector('button#recording'); let playbackButton = document.querySelector('button#playback'); let downloadButton = document.querySelector('button#download'); let buffer; let mediaRecorder; let blob; function init() { if (!(mediaSupport() && mediaRecorderSupport())) return; getVideo(); } function mediaSupport() { if (!navigator.mediaDevices) { console.log('不支持 mediaDevices'); return false; } console.log('支持 mediaDevices'); return true; } function mediaRecorderSupport() { if (!MediaRecorder.isTypeSupported(videoTypes)) { console.log(`不支持 ${videoTypes}`); return false; } console.log(`支持 ${videoTypes}`); return true; } function getVideo() { navigator.mediaDevices.getDisplayMedia(userMediaSetting) .then(handleGetVideo) .catch(handleGetVideoError) } function handleGetVideo(mediaStream) { playVideo.srcObject = mediaStream; } function handleGetVideoError(err) { console.log(`获取视频输入出错: ${err.name} : ${err.message}`) } function recordingVideo() { if ( typeof(mediaRecorder) != "undefined" && mediaRecorder.state === 'recording') { console.log('已开始录制,请勿重复录制'); return; } console.log('开始录制'); buffer = []; let options = { mimeType : videoTypes }; mediaRecorder = new MediaRecorder(playVideo.srcObject, options); mediaRecorder.ondataavailable = handleDataAvailable; mediaRecorder.start(10); } function handleDataAvailable(d) { if (d && d.data && d.data.size > 0) { buffer.push(d.data); } }