<!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. python3项目打包成exe可执行程序

    使用pyinstaller将python文件打包成exe程序,打包步骤如下: 一.安装pyinstaller (1)win+R输入cmd,打开命令窗口 (2)安装pyinstaller,安装指令:pi ...

  2. Digital Root 的推导

    背景 在LeetCode上遇到这道题:Add Digits 大意是给一个数,把它各位数字相加得到一个数,如果这个数小于10就返回,不然继续 addDigits(这个相加得到的数). 题目很简单,但是如 ...

  3. Jmeter 使用技巧 (如何在linux下运行jmeter视窗界面呢）-jmeter如何模拟http发送gzip数据

    jmeter如何模拟http发送gzip数据 有时候我们需要模拟在客户端将数据压缩后, 发送(post)到服务器端. 通常这种情况,会发生在移动终端上. 这样做的好处, 是可以节省流量.  当然, 服 ...

  4. JavaScript DOM编程艺术-第一章

    发现基础不是很好,补习一下.37买了2本书(dom编程和高级程序设计). 以前读书总是自己勾勾画画,有点没意思.现在写下来,说不定会成为传世经典.哈哈...........随便扯扯淡. 第一天(201 ...

  5. 【图像编辑】三款图像编辑软件Photoshop、AffinityPhoto、Gimp非专业简单横向对比

    人的感知分为:视觉.听觉.嗅觉.味觉.触觉.视觉即是对光的强弱.颜色.鲜艳程度的感知.视觉在纸质上通过图像来表达,在计算机数字领域则通过图像(位图)和图形(矢量图)来表达,本文提及的三款软件均为图像( ...

  6. 前后端分离使用 Token 登录解决方案

    前后端分离使用 Token 登录解决方案:https://juejin.im/post/5b7ea1366fb9a01a0b319612

  7. CSS div内放长英文字母或长数字自动换行 CSS一行排不下自动打断换行

    添加css  word-wrap:break-word 解释:使用break-word时,是将强制换行. 兼容各版本IE浏览器,兼容谷歌浏览器.

  8. Groovy学习：第一章 用Groovy简化Java代码

    1. Groovy的安装 目前Groovy的最新版本为2.1.2版,下载地址为:http://groovy.codehaus.org/Download下载后解压groovy-binary-2.1.2. ...

  9. Python3学习笔记（MOOC）

    文本进度条实例 #!/usr/bin/env python3 import time #for i in range(101): # print ("\r{:3.0f}%".for ...

  10. Struts2后台使用Request和Session方法

    在Struts2后台,如果需要使用Request和Session的话,可以通过下面的方法: 主要是利用了com.opensymphony.xwork2.ActionContext类以及ora.apac ...