<!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. 至强E3-1200 系列部分参数

    1155 Xeon E3-1275V2(E1) Ivy Bridge 3.5GHz BLK 100MHz 8MB 77W All 1155* Xeon E3-1270V2(E1) Ivy Bridge ...

  2. swoole webSocket 聊天室示例

    swoole1.7.9增加了内置的WebSocket服务器支持,通过几行PHP代码就可以写出一个异步非阻塞多进程的WebSocket服务器. 基于swoole websocket的用户上下线通知,在线 ...

  3. 目前写出的bug

    要检测p->next 与p都不=NULL while(p->next!=NULL &&p!=NULL) 会导致访问access NULL pointer的runtime错误 ...

  4. [题解]Print a 1337-string...-数学（codeforces 1202D）

    题目链接:https://codeforces.com/problemset/problem/1202/D 题意: 构造一串只由 ‘1’,‘3’,‘7’ 组成的字符串,使其 ‘1337’ 子序列数量为 ...

  5. 嵌入式C语言4.1 C语言内存空间的使用-指针

    指针:就是内存资源的地址.门牌号的代名词 假如你所在的城市是一个内存(存储器),如果找到你家,就是通过你的家庭住址(指针)寻找,而你家里的摆设面积之类的就是内存的内容(指针指向的内容). 指针变量:存 ...

  6. 拾遗：vim 配置（个人适用，仅供参考）

    ~/.vimrc "===================通用配置====================== set encoding=utf- set statusline=%F%=[L ...

  7. ustc FreeBSD / rust 镜像源

    http://mirrors.ustc.edu.cn/help/ Rust Crates 源使用帮助 地址 https://mirrors.ustc.edu.cn/crates.io-index/ 说 ...

  8. Cocos2d-x之数据的处理

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. FileUtils 在游戏中,用户要保存自己的偏好设置和玩家的信息,都需要涉及到游戏数据的处理.首先要想处理数据,则要找到文件,创建文件, ...

  9. 蛋糕仙人的javascript笔记

    蛋糕仙人的javascript笔记:https://www.w3cschool.cn/kesyi/kesyi-nqej24rv.html

  10. Angular的一些常用命令

    Angular的一些常用命令 cmd中创建项目: ng new taskmgr -si --style=scss //先不安装依赖,si 为skip install material需要scss样式的 ...