<!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. 美化Windows

    更改壁纸 https://www.omgubuntu.co.uk/2010/09/a-look-back-at-every-ubuntu-default-wallpaper google: ubunt ...

  2. https中引用http

    https里引用http不安全,会报错 解决方案 1.可以部署在http中,http中引用https不会存在安全问题报错 2.https中引用https,把需要引用的http部署成https

  3. AttributeError: module 'requests' has no attribute 'get'的错误疑惑

    我发现文件直接用requests.get(url)会提示我AttributeError: module 'requests' has no attribute 'get' 我把问题百度了一下,解决方法 ...

  4. 属性选择器 [attribute^=value] [attribute~=value] [attribute|=value] [attribute*=value]

    这是css属性选择器的一种:[attribute^=value] ,用来匹配属性值以指定值开头的每个元素.例如: [class^="test"] { background:#fff ...

  5. leetcode.双指针.524通过删除字母匹配到字典里最长单词-Java

    1. 具体题目 给定一个字符串和一个字符串字典,找到字典里面最长的字符串,该字符串可以通过删除给定字符串的某些字符来得到.如果答案不止一个,返回长度最长且字典顺序最小的字符串.如果答案不存在,则返回空 ...

  6. HDU 6464 /// 权值线段树

    题目大意: 共Q次操作 操作有两种 操作一 在序列尾部加入f[i]个s[i] 操作二 查询序列第f[i]小到第s[i]小之间的总和 离线操作 把序列内的值离散化 然后利用离散化后的值 在线段树上对应权 ...

  7. Skimap_ros 利用RGBD创建Octomap(一)

    1. 奥比中光astra RGBD相机安装 1.1 安装依赖 $ sudo apt-get install build-essential freeglut3 freeglut3-dev 1.2 检查 ...

  8. shell整数测试

  9. Codeforces 356D 倍增优化背包

    题目链接:http://codeforces.com/contest/356/problem/D 思路(官方题解):http://codeforces.com/blog/entry/9210 此题需要 ...

  10. LeetCode--Longest Consecutive Sequence（最长连续序列） Python

    题目描述: Longest Consecutive Sequence(最长连续序列) 中文: 给定一个未排序的整数数组,找出最长连续序列的长度. 要求算法的时间复杂度为 O(n). 英文: Given ...