Use the powerful API of modern browser to record any interface in the browser and realize export, save and management

asdjgfr 2021-02-23 03:44:30
use powerful api modern browser


I wrote an article two years ago Take advantage of the power of modern browsers API Recording , Play back and save any web User actions in the interface Realize the recording of browser operation 、 preservation 、 The playback 、 Management and other functions . But the previous implementation was based on rrweb This project , Limited to the browser itself, for API as well as rrweb The limitations of the video are not perfect recording ( such as webgl All operations .

As a weekend project, I didn't expect to gain hundreds of star, During this period, there are still many problems in the use of private letters . It's just that I didn't go home for the Chinese new year because of the epidemic , So the whole project was refactored , Using a more powerful API And better documentation . The core API yes MediaDevices.getDisplayMedia(), Although the state is Working Draft, But the major mainstream browsers have implemented it for a long time (Chrome 72 2019-1 , Firefox 66 2019-3 , Safari 13 2019-9) .

Before we start, we're still looking for a wave star Project address

preview

 Preview animation

The original

The application scenario is set on the recording screen for convenience debug, Therefore, while recording the screen, it also provides the function of reporting information , And it can be exported to use subtitles and videos at the same time .

characteristic

  • Whether it's the library itself or the front and back end of the management system 100% TypeScript Realization .
  • because getDisplayMedia Powerful features , It's not just the content of the page itself , At the same time, you can choose to record the entire desktop or other software or a certain label , You can record audio at the same time .
  • The recording itself uses VFR ( Variable frame rate ) Frame rate mode of , So as to save resources , The volume of the recording is also smaller .
  • Library development uses webpack Packaging for umd, You can introduce js You can also use npm.
  • No longer rely on any third-party libraries .
  • The library can be used separately from the management system , You can export local videos and subtitles directly , Use the video player to view , A more general .
  • The database uses orm, Compatible with more databases .

Support environment

  • front end

    Modern browsers

  • Management system

    Node.js (> = 8.9.0)

Front end architecture

  • 100% TypeScript.
  • be based on webpack packaged umd Pattern .
  • Network request use Fetch

Back end architecture

install

  • library

    Use npm or yarn

    $ npm install op-rec --save
    # or
    $ yarn add op-rec
     Copy code 

    Directly introducing :

    <script type="text/javascript" src="//unpkg.com/op-rec@latest"></script>
     Copy code 
  • The management end :

    See usage below .

Use

Front end Library

  1. Easy to use :
new OpRec()
 Copy code 

You can see the start recording button in the lower right corner of the page , By default, it will be downloaded to local after successful recording .

  1. You can also fill in the address of the management page to realize management :
new OpRec({
url: "http://127.0.0.1:8990",
});
 Copy code 
  1. Also can put the stream Pass in video In real time :
const or = new OpRec();
or.on("startREC", function (stream) {
document.querySelector("video").srcObject = stream;
});
 Copy code 
  1. You can also start the example in the source code :

    • clone Project to local :

      $ git clone https://github.com/asdjgfr/operationRecord.git && cd operationRecord/src/op-rec
       Copy code 
    • Installation dependency :

      # pwd /operationRecord/src/op-rec
      $ npm i
      # or
      $ yarn
       Copy code 
    • modify dev/index.html Medium http://127.0.0.1:8990 by local

    • Start example :

      $ npm dev
      # or
      $ yarn dev
       Copy code 

    Open it in a browser http://localhost:8989/ You can see a live video and webgl10 An example of ten thousand points moving randomly . Open the console and you can see that the error is thrown randomly .

    Server side

    Packaged version :

    • Create a new database .

    • download release Medium server.zip, Unzip and modify .env Configuration in .

    • Installation dependency :

      $ npm i
      # or
      $ yarn
       Copy code 
    • start-up :

      $ node main.js
       Copy code 

    Development Edition :

    • cd operationRecord/src/server

    • modify .development.env Configuration in .

    • Install dependencies and start background services

      $ yarn && yarn dev
       Copy code 
    • cd operationRecord/src/server

    • Install the dependency and start the front page in the management system :

      $ yarn && yarn dev
       Copy code 

    For more configuration parameters and usage, please see file .

    Known problems

    ​ because mysql Our library doesn't support mysql 8 The new version of encryption , So use 8.x You need to change the default encryption method :

    ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password'
     Copy code 

    And then refresh :

    flush privileges;
     Copy code 

    Or switch to mysql 5.x edition .

    end

    Ask for another wave star Project address

    welcome PR.

版权声明
本文为[asdjgfr]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210222134322267X.html

  1. Configure the certificate to enable ngnix to publish the trusted website of HTTPS
  2. Javascript数据类型
  3. HTTP interface debugging tool! 48000 star HTTP command line client!
  4. Parameter encryption of front end URL link band
  5. HTTP interface debugging tool! 48000 star HTTP command line client!
  6. Three front end frameworks: data binding and data flow
  7. Reading Axios source code (1) -- exploring the realization of basic ability
  8. Event bubble and capture in JavaScript
  9. 【微前端】微前端最終章-qiankun指南以及微前端整體探索
  10. R & D solution e-Car front end monitoring system
  11. [JS] 877 - 35 wonderful knowledge of JavaScript, long experience!
  12. R & D solution e-Car front end monitoring system
  13. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%
  14. 解决ajax跨域问题【5种解决方案】
  15. Top ten classic sorting of JavaScript
  16. HTTP 1. X learning notes: an authoritative guide to Web Performance
  17. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control component
  18. My http / 1.1 is so slow!
  19. Why Vue uses asynchronous rendering
  20. The response status was 0. Check out the W3C XMLHttpRequest Level 2 spec for
  21. The tapable instance object hook of webpack4. X core tool library
  22. The tapable instance object hook of webpack4. X core tool library
  23. Using libcurl for HTTP communication in C + +
  24. Using libcurl for HTTP communication in C + +
  25. Using CSS variable in Vue
  26. Deeply understand the update of state and props in react
  27. No matter how fast the Internet is, it's useless! In addition to Baidu disk, there is this website slow to let you eat shriveled
  28. Baidu share does not support the solution of HTTPS
  29. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  30. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  31. Vue cli creates vue3 project
  32. Nginx reverse proxy for windows authentication using NTLM
  33. Rust tutorial: introduction to rust for JavaScript developers
  34. Deploying personal blog to Tencent cloud with serverless framework
  35. R & D solution e-Car front end monitoring system
  36. JavaScript advanced learning
  37. Spend 1 minute to master these 5 ppt tips, courseware making less detours
  38. Vue: vuex persistent state
  39. React native gets the current network state of the device Netinfo
  40. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%
  41. JavaScript advanced: Javascript object-oriented, JavaScript built-in object, JavaScript BOM, JavaScript encapsulation
  42. JavaScript advanced: Javascript object-oriented, JavaScript built-in object, JavaScript BOM, JavaScript encapsulation
  43. Vue determines whether the El form in the elementui is updated or changed. If it changes, it will prompt whether to save it. If it does not change, it will leave directly
  44. Algorithm problem: sum of two numbers -- JavaScript and Java implementation
  45. High performance nginx HTTPS tuning
  46. JQuery advanced
  47. day 30 jQuery
  48. JQuery:JQuery Basic syntax, jQuery selector, jQuery DOM, comprehensive case check box, comprehensive case random picture
  49. TCP/IP 开胃菜 之 HTTP
  50. JQuery:JQuery Basic syntax, jQuery selector, jQuery DOM, comprehensive case check box, comprehensive case random picture
  51. JavaScript data type
  52. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  53. Solve Ajax cross domain problem [5 solutions]
  54. HTTP of TCP / IP appetizer
  55. Optimization of pod creation efficiency in serverless scenario
  56. Iqiyi Sports: experience the ultimate expansion and contraction of serverless, and increase the utilization rate of resources by 40%
  57. First knowledge of HTTP / 1.1
  58. First knowledge of HTTP / 1.1
  59. Webpack learning notes series 05 devserver
  60. Webpack learning notes series 04 - resource processing optimization