1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>Document</title>
  9. <script>
  10. let recorder
  11. function start() {
  12. let videoTarget = document.getElementById('audio');
  13. // navigator.mediaDevices.getUserMedia({audio: true, video: {width: 400, height: 600}})
  14. //getDisplayMedia 录屏
  15. navigator.mediaDevices.getUserMedia({audio: true, video: {width: 400, height: 600}})
  16. .then((stream) => {
  17. recorder = new MediaRecorder(stream);
  18. console.log(recorder,'recorder');
  19. console.log(stream,'stream');
  20.  
  21. videoTarget.srcObject = stream;
  22. videoTarget = (...arg) => {
  23. console.log(arg);
  24. }
  25. recorder.ondataavailable = (event) => {
  26.  
  27. let url = URL.createObjectURL(event.data);
  28. let link = document.createElement("a");
  29. console.log(url,event,'event')
  30. window.location.href = url
  31. link.target = "_blank";
  32. link.href = url;
  33. link.click();
  34.  
  35. }
  36. recorder.start();
  37. });
  38. }
  39.  
  40. function stop() {
  41. console.log('结束录像');
  42.  
  43. recorder.stop();
  44. }
  45. </script>
  46. </head>
  47.  
  48. <body>
  49. <video id="audio" width="400" height="600" controls autoplay></video>
  50. <input onclick="start()" type="button" value="开始" />
  51. <input onclick="stop()" type="button" value="结束" />
  52. </body>
  53.  
  54. </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. 转:inline-block 前世今生

    曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码.如今 ...

  2. 后台获取html控件的值

    string name = Request.Form["Name1"].ToString(); “xxx” 里的是name值 Request["xx"]取到相同 ...

  3. Netty 如何实现心跳机制与断线重连?

    作者:sprinkle_liz www.jianshu.com/p/1a28e48edd92 心跳机制 何为心跳 所谓心跳, 即在 TCP 长连接中, 客户端和服务器之间定期发送的一种特殊的数据包, ...

  4. BUUCTF weirdlist 一路到底

    Weird list 这题恶心的一批 给了一堆列表 这...这是人做的题吗... 放飞自我,打开脑洞 把‘1’空出来,其他数字换为‘*’画出来 然后看到了flag,但是 这...这是什么flag,ag ...

  5. C语言中的关键字初识

    C89标准定义的32个关键字 关键字 含义 void 声明函数无返回值或者无参数,声明空类型指针 char 声明字符型变量 short 声明短整型变量 int 声明整型变量 long 声明长整型变量 ...

  6. go语言从例子开始之Example27.超时处理

    超时 对于一个连接外部资源,或者其它一些需要花费执行时间的操作的程序而言是很重要的.得益于通道和 select,在 Go中实现超时操作是简洁而优雅的. Example: package main im ...

  7. 2019HDU多校训练第三场 Planting Trees 暴力 + 单调队列优化

    题意:有一个n * n的网格,每个网格中间有一颗树,你知道每棵树的高,你可以选择一个矩形区域把里面的树都围起来,但是矩形区域里面任意两棵树的高度差的绝对值不超过m,问这个矩形的最大面积是多少? 思路: ...

  8. html打开子窗口

    第一个参数是打开的链接,第二个参数是窗口的名字,第三个参数是窗口的属性 window.open ("page.html", "newwindow", " ...

  9. 15.stop引发的数据不一致

    /** * 数据不一致问题 * stop */ public class StopDemo { public static Student student = new Student(); publi ...

  10. 监控服务(keepalived,httpd)

    #!/bin/bashpidof httpdif [ $? -eq 0 ];then echo "httpd is ok"else echo "httpd is not ...