<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script>

    let recorder

    function start() {

      let videoTarget = document.getElementById('audio');

      // navigator.mediaDevices.getUserMedia({audio: true, video: {width: 400, height: 600}})

      //getDisplayMedia 录屏

      navigator.mediaDevices.getUserMedia({audio: true, video: {width: 400, height: 600}})

        .then((stream) => {

          recorder = new MediaRecorder(stream);

          console.log(recorder,'recorder');

          console.log(stream,'stream');

          videoTarget.srcObject = stream;

          videoTarget = (...arg) => {

            console.log(arg);

          }

          recorder.ondataavailable = (event) => {

            let url = URL.createObjectURL(event.data);

            let link = document.createElement("a");

            console.log(url,event,'event')

            window.location.href = url

            link.target = "_blank";

            link.href = url;

            link.click();

          }

          recorder.start();

        });

    }

    function stop() {

      console.log('结束录像');

      recorder.stop();

    }

  </script>

</head>

<body>

  <video id="audio" width="400" height="600" controls autoplay></video>

  <input onclick="start()" type="button" value="开始" />

  <input onclick="stop()" type="button" value="结束" />

</body>

</html>

录完会返回一个blob对象，可通过 formdata上传给后台

Web RTC录视频的更多相关文章

  1. 如何实现Web页面录屏？

    摘要: 很有意思的操作... 原文:web页面录屏实现 译者:frontdog Fundebug经授权转载,版权归原作者所有. 写在前面的话 在看到评论后,突然意识到自己没有提前说明,本文可以说是一篇 ...

  2. 用js实现web端录屏

    用js实现web端录屏 原创2021-11-14 09:30·无意义的路过 随着互联网技术飞速发展,网页录屏技术已趋于成熟.例如可将录屏技术运用到在线考试中,实现远程监考.屏幕共享以及录屏等:而在我们 ...

  3. Kali Linux Web 渗透测试视频教—第二十课-利用kali linux光盘或者usb启动盘破解windows密码

    Kali Linux Web 渗透测试视频教—第二十课-利用kali linux光盘或者usb启动盘破解windows密码 文/玄魂 目录 Kali Linux Web 渗透测试视频教—第二十课-利用 ...

  4. 我的第一个项目：用kinect录视频库

    kinect深度视频去噪 kinectmod32.dll http://pan.baidu.com/s/1DsGqX 下载后改名kinect.dll 替换掉Redist\OpenNI2\Drivers ...

  5. Android 音视频深入 五 完美的录视频(附源码下载)

    本篇项目地址,名字是录视频,求star https://github.com/979451341/Audio-and-video-learning-materials 这一次的代码录视频在各个播放器都 ...

  6. Android 音视频深入 四 录视频MP4（附源码下载）

    本篇项目地址,名字是<录音视频(有的播放器不能放,而且没有时长显示)>,求star https://github.com/979451341/Audio-and-video-learnin ...

  7. Android录屏命令、Android录Gif、Android录视频

    NoHttp开源地址:https://github.com/yanzhenjie/NoHttp NoHttp具体使用文档已公布,你想知道的全都有,请点我移步! 版权声明:转载请注明本文转自严振杰的博客 ...

  8. 无需Flash录视频——HTML5中级进阶

    前言 HTML5的权限越来越大了,浏览器可以直接调用摄像头.麦克风了,好激动啊.我们要用纯洁的HTML代码造出自己的天地. 视频采集 本篇介绍的栗子 都是在chrome 47 版本以上的,低版本的可能 ...

  9. 转一下大牛的嵌入web页播放视频方法（转）

    来自:http://www.cnblogs.com/bandry/archive/2006/10/11/526229.html 在Web页中嵌入Media Player的方法比较简单,只要用HTML中 ...

随机推荐

  1. POJ 1860 Currency Exchange (Bellman-Ford)

    题目链接:POJ 1860 Description Several currency exchange points are working in our city. Let us suppose t ...

  2. Codesys 使用共享内存 打通通讯

    Codesys V3.5 平台   提供了库SysShm,其中包含了共享内存操作的接口函数: SysSharedMemoryClose; SysSharedMemoryCreate; SysShare ...

  3. python-javascript之dom

    DOM DOM:(document object mode)文档对象模型.DOM为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构. 目的就是为了能让js操作html元素而制定的一个规范 DO ...

  4. vue基础学习一

    写一个例子,告诉你VUE的方便之处,就是双向绑定,不需要操作DOM对象,而是操作数据 div中msg 和JS中msg是一一对应的 然后看浏览器中 然后如果我想改变浏览器中值,我在console这么操作 ...

  5. mysql常见的hint

    mysql常用的hint对于经常使用oracle的朋友可能知道,oracle的hint功能种类很多,对于优化sql语句提供了很多方法.同样,在mysql里,也有类似的hint功能.下面介绍一些常用的. ...

  6. JavaScript_基础笔记

    javaScript基础:概念:一门客户端脚本语言 运行在客户端浏览器中的,每一个浏览器都有javaScript的解析引擎 脚本语言:不需要编译,直接可以被浏览器解析执行功能区: 可以来增强用户和ht ...

  7. Juqery插件编写 基础说明

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  8. 【记录】linux docker 安装 tomcat

    前言:首先linux需要先安装docker,具体步骤可以参考博主之前博客,也可自行百度. 话不多说,开始安装tomcat: 通过docker安装tomcat docker pull tomcat:8. ...

  9. 高逼格企业级MySQL数据库备份方案，原来是这样....

    很多人,这里说的是运维工程师们,一提到写某某方案,很是头疼.不是上某度一统搜索,就是同样一句话在N个群全部群发一遍:“有没有某某方案,可以共享一下的吗??求助,各位大佬们”,估计十有八九,全部石沉大海 ...

  10. go语言从例子开始之Example1.helloworld

    Example: package main import "fmt" func main() { fmt.Println("hello world") } Re ...