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

精选留言(20)

• 

  月光伴奏

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

  作者回复: 不能用同一个 stream进行采集

  2019-11-22

  

   1
• 

  恋着歌

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

  作者回复: 赞！

  2019-07-25

  

   1
• 

  技术乞丐

  因为带宽不够，而视频模糊一点也没事，不影响理解

  2019-11-29

  

  
• 

  张旭

  是否有办法能主动触发桌面流结束，现在做桌面采集后gpu升高，机器变卡，手动切换成采集摄像头内容，采集桌面流的进程似乎没有终止，机器依然很卡顿

  作者回复: 的到你的桌面的track, 然后调用close 方法。

  2019-11-26

  

  
• 

  月光伴奏

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

  作者回复: 可以分别采集，然后入到同一个stream中。

  2019-11-15

   1

  
• 

  春风吹又生

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

  作者回复: 你是指的播放了的多媒体文件的声音吧？是可以的！

  2019-10-27

   1

  
• 

  初音韶歌

  老师，我的截取桌面播放的视频内容是嵌套的是怎么回事呢，就是一个桌面内容里又有n层小的内容

  作者回复: 你切换一下窗口就好了，你可以想一下为什么会这样哈

  2019-08-26

  

  
• 

  ZeroIce

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

  作者回复: getUserMedia API 中调整一下分辩率就好了！

  2019-08-04

  

  
• 

  ZeroIce

  交作业：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
  };
  })();
  
  
  

  作者回复: 赞！

  2019-08-04

  

  
• 

  相见恨晚

  大佬，4章以后的代码啥时候能提供，应该每章都有demo吧，再多的理论都不如代码来得实在。

  作者回复: 第五篇文章的demo这两天就会有

  2019-08-03

  

  
• 

  ZeroIce

  老师，课程大概什么时候可以完结？

  作者回复: 9月份

  2019-08-03

  

  
• 

  tommy_zhang

  老师，弹出的共享屏幕界面上内容能自定义吗？比如上面的文字"xxx想要共享共享您屏幕上的内容"

  作者回复: 不能！

  2019-07-29

  

  
• 

  LongXiaJun

  打卡
  

  作者回复: 打卡！打卡！

  2019-07-26

  

  
• 

  K

  //第二部分
  
  function playbackVideo(){
      blob = new Blob(buffer, {type:'video/webm'});
      rePlayVideo.src = window.URL.createObjectURL(blob);
      rePlayVideo.srcObject = null;
      rePlayVideo.constructor = true;
      rePlayVideo.play();
  }
  
  function download(){
      blob = new Blob(buffer, {type:'video/webm'});
      let a = document.createElement('a');
      a.href = window.URL.createObjectURL(blob);
      a.download = 'download.webm';
      a.click();
      a.remove();
  }
  
  recordingButton.addEventListener('click', function () {
      recordingVideo();
  });
  
  playbackButton.addEventListener('click', function () {
      playbackVideo();
  });
  
  downloadButton.addEventListener('click', function () {
      download();
  });
  
  init();

  2019-07-25

  

  
• 

  K

  //第一部分代码
  
  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);
      }
  }

  作者回复: 赞！

  2019-07-25

  

  
• 

  Jason

  思考题：我猜一下，wenrtc底层主要使用udp传输，网络不好的情况下，会有丢包。所以会有模糊的现象发生。

  作者回复: 如果是自适应码率，当发生丢包时，编码器会降低码率，当分辨率不变，码率变低时，就是模糊哈！

  2019-07-25

  

  
• 

  漫慢

  使用的chrome提示不支持navigator.mediaDevices.getDisplayMedia API，请问该如何解决？

  作者回复: 是使用的https吗？

  2019-07-25

  

  
• 

  xiao豪

  简单demo
  
  var deskVideo = document.querySelector("video#deskVideo");
  function getDeskStream(stream){
      deskVideo.srcObject = stream;
  }
  
  // 对采集的数据做一些限制
  var constraints = {
      video : {
              width: 1280,
              height: 720,
              frameRate:15,
      },
      audio : false
  }
  
  function handleError(err){
      console.log('getUserMedia error:', err);
  }
  
  function IsPC() {
      var userAgentInfo = navigator.userAgent;
      var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPod", "iPad"];
      var flag = true;
      for (var i = 0; i < Agents.length; i++) {
          if (userAgentInfo.indexOf(Agents[i]) > 0) {
              flag = false;
              break;
          }
      }
      return flag;
  };
  // 抓取桌面
  function shareDesktop(){
      // 只有在 PC 下才能抓取桌面
      if(IsPC()){
              // 开始捕获桌面数据
              navigator.mediaDevices.getDisplayMedia(constraints)
                      .then(getDeskStream)
                      .catch(handleError);
              return true;
      }
      return false;
  }
  
  var buffer;
  // 创建录制对象
  var mediaRecorder;
  
  function handleDataAvailable(e){
          if(e && e.data && e.data.size > 0){
                  buffer.push(e.data);
          }
  }
  
  function startRecord(){
          // 定义一个数组，用于缓存桌面数据，最终将数据存储到文件中
          buffer = [];
  
          var options = {
                  mimeType: 'video/webm;codecs=vp8'
          }
  
          if(!MediaRecorder.isTypeSupported(options.mimeType)){
                  console.error(`${options.mimeType} is not supported!`);
                  return;
          }
  
          try{
                  // 创建录制对象，用于将桌面数据录制下来
                  mediaRecorder = new MediaRecorder(deskVideo.srcObject, options);
          }catch(e){
                  console.error('Failed to create MediaRecorder:', e);
                  return;
          }
          // 当捕获到桌面数据后，该事件触发
          mediaRecorder.ondataavailable = handleDataAvailable;
          mediaRecorder.start(10);
  }
  document.querySelector("button#record").onclick = function (){
      startRecord();
  }
  
  shareDesktop()

  作者回复: 赞！

  2019-07-25

  

  
• 

  许童童

  老师能否给一个能够完整跑起来的Demo。

  作者回复: 这个主题结束之后，会有一个完整的 demo

  2019-07-25

  

  
• 

  流浪剑客

  看完打卡

  作者回复: 打卡！ 打卡！

  2019-07-25

  

  