首页 > 其他分享 >js浏览器录制屏幕

js浏览器录制屏幕

时间:2023-01-22 17:11:58浏览次数:39  
标签:function 浏览器 recoder 录制 stop js link var data

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <button type="button" onclick="recordScreen()">Start</button>
    <button type="button" onclick="stop()">stop</button>
    <script src='index.js'></script>
    <script>
        var recoder;
        function recordScreen() {
            navigator.mediaDevices.getDisplayMedia({ audio: true, video: true }).then(stream => {
                 recoder = new MediaRecorder(stream);
                var data = []
                recoder.ondataavailable = function (e) {
                    data.push(e.data)
                }
                recoder.onstop = function () {
                    this.stream.getTracks().forEach(track => track.stop());

                    var blob = new Blob(data, { type: this.mimeType });
                    var link = document.createElement("a")
                    link.href = URL.createObjectURL(blob)
                    link.download = new Date().getTime() + ".webm";
                    document.body.appendChild(link)
                    link.click()
                    URL.revokeObjectURL(link.href)
                    link.remove()
                }
                recoder.start()
            })
        }
        function stop() {           
            recoder.stop();
        }
    </script>
</body>

</html>

  

标签:function,浏览器,recoder,录制,stop,js,link,var,data
From: https://www.cnblogs.com/finghi/p/17064519.html

相关文章

  • js dom节点的属性不能访问
    有些时候,我们会发现DOM节点的某个属性通过dom.XXX不能访问实际上,DOM也是一个对象,当我们通过控制台打印出来后,会发现这个属性并不在DOM节点上面,我们需要先setAttribute,之后......
  • js 操作视频帧
    MDNhttps://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Manipulating_video_using_canvasfunctiongetVideoBase64(url){ returnnewPromise(function(res......
  • sql base nodejs py go操作基本的db
    constmysql=require('mysql2');constconnection=mysql.createConnection({host:'localhost',user:'root',password:'root',database:'mybatis_pl......
  • 推荐一款在浏览器编辑`Blazor`的`IDE`
    不知道是否有Blazor用户羡慕过React或者Vue用户,在一些组件库中,它们就提供了在当前的组件预览对于组件的实时编辑并且预览?比如semi-design的这种在比如codepen这种由......
  • 您是否也有想在浏览器中实时的编辑代码并且渲染的想法?
    不知道是否有人跟我一样想在浏览器上直接可以动态的编译blazor的一些组件库?而不是通过引用NuGet以后才能查看到效果,并且在使用别人的组件的时候可以在动态的调整组件的一些......
  • 浏览器打不开某些网站是什么原因导致,试试用这些方法来解决
    不少小伙伴使用一些浏览器浏览网页的时候,发现打不开某些网站,这是什么原因导致的呢?本文讲汇总几个常见的原因,我们可以通过以下几个原因排查,并且使用下文的解决方法可以试试......
  • JS_11_操作form对象
    通过操作form对象,咱可以动态进行数据提交。  一、form对象获取form对象://使用id值获取form对象varfrm=document.getElementById('frm_id');//使用name值获......
  • js 插入节点
    apendChildelement.appendChild(aChild)如果sp2没有下一个节点,则它肯定是最后一个节点,则sp2.nextSibling返回null,且sp1被插入到子节点列表的最后面(即sp2后面)。......
  • javascript: node.js
     consthttp=require("http");http.createServer(function(request,response){response.writeHead(200,{'Content-type':'text/html'});response.end('<h1>......
  • 学习笔记——SpringMVC消息转换器概述;使用消息转换器处理请求报文;使用消息转换器处理
    2023-01-20一、SpringMVC消息转换器概述1、HttpMessageConverter<T>消息转换器作用:(1)将java对象与请求报文及响应报文进行相互转化(2)使用HttpMessageConverter<T>将请......