录屏

点击页面捕获和录制按钮,进行录屏

  1. // ==UserScript==
  2. // @name 录屏
  3. // @namespace https://blog.csdn.net/mukes
  4. // @version 0.0.1
  5. // @description 点击页面捕获和录制按钮,进行录屏
  6. // @author zhansheng
  7. // @include *.100bm.cn
  8. // @include *.blog.csdn.net/article/details/*
  9. // ==/UserScript==
  10. (function() {
  11. 'use strict';
  12. let videoBuffer = []
  13. let mediaRecorder
  14. let recording = false
  15.  
  16. async function getMediaStream(stream) {
  17. window.$stream = stream
  18. }
  19.  
  20. async function startCapture(displayMediaOptions) {
  21. let captureStream = null;
  22. try {
  23. captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
  24. } catch (err) {
  25. console.error("Error: " + err);
  26. }
  27. return captureStream;
  28. }
  29.  
  30. async function start() {
  31. if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
  32. console.log('getUserMedia is not supported')
  33. } else {
  34. const displayMediaOptions = {
  35. video: true,
  36. audio: false,
  37. }
  38.  
  39. let captureStream = await startCapture(displayMediaOptions)
  40. await getMediaStream(captureStream)
  41. }
  42.  
  43. }
  44.  
  45. function handleDataAvailable(e) {
  46. if (e && e.data && e.data.size > 0) {
  47. videoBuffer.push(e.data)
  48. }
  49. }
  50.  
  51. async function record(even) {
  52. let $target = even.target
  53. if (recording) {
  54. stopRecord()
  55. $target.innerText = '录制'
  56. } else {
  57. startRecord()
  58. }
  59. }
  60.  
  61. function startRecord() {
  62. videoBuffer = []
  63. const options = {
  64. mimeType: 'video/webm; codecs = vp8',
  65. }
  66.  
  67. if(!window.$stream){
  68. alert('请先捕获屏幕')
  69. return
  70. }
  71.  
  72. if (!MediaRecorder.isTypeSupported(options.mimeType)) {
  73. console.error('${options.mimeType} is not supported!')
  74. return
  75. }
  76.  
  77. try {
  78. mediaRecorder = new MediaRecorder(window.$stream, options)
  79. } catch (e) {
  80. console.error('Failed to create MediaRecorder:', e)
  81. return
  82. }
  83. mediaRecorder.ondataavailable = handleDataAvailable
  84. mediaRecorder.start(10)
  85. recording = true
  86. document.querySelector("#luzhi").innerText = '结束'
  87. }
  88.  
  89. function stopRecord() {
  90. mediaRecorder.stop()
  91. recording = false
  92. downRecord()
  93. }
  94.  
  95. // 下载录制
  96. function downRecord() {
  97. const blob = new Blob(videoBuffer, { type: 'video/webm' })
  98. const url = window.URL.createObjectURL(blob)
  99. const a = document.createElement('a')
  100. const fileName = new Date().toLocaleString()
  101. a.href = url
  102. a.style.display = 'none'
  103. a.download = `${fileName}.mp4`
  104. a.click()
  105. }
  106.  
  107. function init() {
  108. // js 构造相关按钮
  109. // 构造 开始捕获屏幕按钮
  110. let button_start = document.createElement('div')
  111. button_start.style.position = 'absolute'
  112. button_start.style.top = '0px'
  113. button_start.style.left = '0px'
  114. button_start.style.zIndex = 999
  115. button_start.style.width = '50px'
  116. button_start.style.height = '50px'
  117. button_start.style.borderRadius = '50%'
  118. button_start.style.background = 'pink'
  119. button_start.innerText = '捕获'
  120. button_start.style.textAlign = 'center'
  121. button_start.style.lineHeight = '50px'
  122. button_start.style.fontSize = '15px'
  123. button_start.setAttribute('id', 'start')
  124.  
  125. // 构造 录制(结束)按钮
  126. let button_luzhi = document.createElement('div')
  127. button_luzhi.style.position = 'absolute'
  128. button_luzhi.style.top = '80px'
  129. button_luzhi.style.left = '0px'
  130. button_luzhi.style.zIndex = 999
  131. button_luzhi.style.width = '50px'
  132. button_luzhi.style.height = '50px'
  133. button_luzhi.style.borderRadius = '50%'
  134. button_luzhi.style.background = 'blue'
  135. button_luzhi.innerText = '录制'
  136. button_luzhi.style.textAlign = 'center'
  137. button_luzhi.style.lineHeight = '50px'
  138. button_luzhi.style.fontSize = '15px'
  139. button_luzhi.setAttribute('id', 'luzhi')
  140.  
  141. document.body.appendChild(button_start)
  142. document.body.appendChild(button_luzhi)
  143.  
  144.  
  145. document.querySelector("#start").addEventListener('click', start)
  146. document.querySelector("#luzhi").addEventListener("click", record)
  147. }
  148.  
  149. init()
  150. })(); //(function(){})() 表示该函数立即执行