<!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. Jenkins构建触发器的区别

    Build periodically:定时进行项目构建或执行(它不care源码是否发生变化),配置如下: 0 2 * * *  (每天2:00 必须build一次源码) 如果是要定时执行脚本,需要选择 ...

  2. 微信小程序发送红包功能。填坑记录

    微信官方文档 1．开通条件 (1)商户号已入驻90日 (2)商户号有连续30天正常交易 (3)只有企业资质的商户才有资格申请 2．注意事项 (1)目前小程序红包仅支持用户微信扫码打开小程序 (2)小程 ...

  3. 【Nacos】数据一致性

    转自:https://blog.csdn.net/liyanan21/article/details/89320872 目录 一.Raft算法 二.Nacos中Raft部分源码 init() 1. 获 ...

  4. easyUI学习笔记二

    1．  拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title> <scr ...

  5. python基础----斐波那契数列

    python实现斐波那契数列的三种方法 """ 斐波那契数列 0,1,1,2,3,5,8,13,21,... """ # 方法一:while ...

  6. python3 tkinter模块小项目联系之邮箱客户端

    # -*- coding:utf-8 -*- from tkinter import * from tkinter.messagebox import askyesno, showerror, sho ...

  7. spring集成rabbitMq(非springboot)

    首先 , pom文件需要加入spring集成rabbitMq的依赖: <dependency> <groupId>org.springframework.amqp</gr ...

  8. capserjs-prototype(上)

    Casper prototyp back() 具体样式: back() Moves back a step in browser's history: 在浏览器历史中回退一步: casper.star ...

  9. exp ORA-01455: converting column overflows integer datatype

    EXP-00008: ORACLE error 1455 encounteredORA-01455: converting column overflows integer datatype add ...

  10. mysql limit 数据重复及遗漏

    某天写了一段CRUD,提测给QA,后来想起来忘记按规则排序了,然后修改了代码提交,这个时候QA扔给我一条狗,不,是一个BUG. 内心一片忧伤,CRUD也有BUG啊,怎么办怎么办,赶紧看看去. BUG描 ...