获取浏览器硬件资源的媒体数据(拍照、录音、录频、屏幕共享)

news2025/7/21 10:49:55

目录

  • 一、window.navigator 对象包含有关访问者浏览器的信息取
  • 二、MediaDevices
    • 1.使用麦克风
    • 2.使用摄像头(和音频一样)
    • 3.拍照
    • 4.录屏
  • 三、MediaRecorder(录制,可录制音频视屏)

一、window.navigator 对象包含有关访问者浏览器的信息取

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      function fun() {
        var txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
        txt += "<p>浏览器名称: " + navigator.appName + "</p>";
        txt += "<p>浏览器版本: " + navigator.appVersion + "</p>";
        txt += "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
        txt += "<p>硬件平台: " + navigator.platform + "</p>";
        txt += "<p>用户代理: " + navigator.userAgent + "</p>";
        txt += "<p>用户代理语言: " + navigator.language + "</p>";
        txt += "<p>媒体设备: " + navigator.mediaDevices + "</p>";
        console.log(navigator.mediaDevices);
        document.getElementById("test").innerHTML = txt;
        
      }
      window.onload = fun;
    </script>
  </head>
  <body>
    <div id="test"></div>
  </body>
</html>

在这里插入图片描述
在这里插入图片描述

二、MediaDevices

MediaDevices API

MediaDevices 接口提供访问连接媒体输入的设备,如照相机和麦克风,以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据。

  1. MediaDevices.enumerateDevices()
    获取有关系统中可用的媒体输入和输出设备的一系列信息。
  2. getSupportedConstraints()
    返回一个符合 MediaTrackSupportedConstraints (en-US) 的对象。该对象指明了 MediaStreamTrack 接口支持的可约束的属性。
  3. getDisplayMedia()
    提示用户选择显示器或显示器的一部分(例如窗口)以捕获为MediaStream 以便共享或记录。返回解析为 MediaStream 的 Promise。
  4. MediaDevices.getUserMedia()
    在用户通过提示允许的情况下,打开系统上的相机或屏幕共享和/或麦克风,并提供 MediaStream 包含视频轨道和/或音频轨道的输入。

1.使用麦克风

var promise = navigator.mediaDevices.getUserMedia(constraints);

constraints 参数是一个包含了video 和 audio两个成员的MediaStreamConstraints 对象,用于说明请求的媒体类型。必须至少一个类型或者两个同时可以被指定。如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求,那么返回的 Promise 对象就会处于 rejected[失败]状态,NotFoundError作为 rejected[失败]回调的参数。

以下同时请求不带任何参数的音频和视频:

{ audio: true, video: true }
更多参数详情请点此处

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      async function fun() {
        //获取语音数据流
        let stream = await navigator.mediaDevices.getUserMedia({
          audio: true, //获取语音输入许可
          video: false,
        });
        //将语音数据流放到audio中输出(用于监听语音输入的效果)
        document.querySelector("audio").srcObject = stream;
      }
      window.onload = fun;
    </script>
  </head>
  <body>
    <audio controls id="audioTest"></audio>
  </body>
</html>

在这里插入图片描述
选择输入设备(你自己实现即可比较简单,视屏也是如此)

  • 使用MediaDevices.enumerateDevices()获取媒体设备后筛选输入设备
    在这里插入图片描述
  • 将audio: true换成audio:语音输入设备即可获取音频输入流

2.使用摄像头(和音频一样)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      async function fun() {
        //获取摄像头数据流
        let stream = await navigator.mediaDevices.getUserMedia({
          audio: false,
          video: true, //获取摄像头输入许可
        });
        //将摄像头数据流放到audio中输出
        document.querySelector("video").srcObject = stream;
      }
      window.onload = fun;
    </script>
  </head>
  <body>
    <video controls width="400px" height="400px"></video>
  </body>
</html>

在这里插入图片描述

3.拍照

原理看这里

原理就是:

  1. 获取画布的 2D 渲染上下文
  2. 将图片输入源的(dx, dy)起始坐标到(dx+dWidth, dy+dHeight)所形成的矩形的内容画到画布中去
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      //获取摄像头数据流
      async function fun() {
        let stream = await navigator.mediaDevices.getUserMedia({
          audio: false,
          video: true, //获取摄像头输入许可
        });
        //将摄像头数据流放到audio中输出
        document.querySelector("video").srcObject = stream;
      }
      window.onload = fun;
      //拍照
      function takePhoto() {
        //获取画布
        let context = document.getElementById("photo").getContext("2d");
        //将某一元素的内容画下来
        //imageResource 图片源
        //dx, dy 起始坐标
        //dWidth, dHeight 图片长宽
        context.drawImage(document.querySelector("video"), 0, 0, 300, 300);
      }
    </script>
  </head>
  <body>
    <video autoplay width="300px" height="300px"></video>
    <input type="button" value="拍照" onclick="takePhoto()" />
    <canvas width="300px" height="300px" id="photo"></canvas>
  </body>
</html>

4.录屏

MediaDevices.getDisplayMedia()
这个 MediaDevices 接口的 getDisplayMedia() 方法提示用户去选择和授权捕获展示的内容或部分内容(如一个窗口)在一个 MediaStream 里. 然后,这个媒体流可以通过使用 MediaStream Recording API 被记录或者作为WebRTC 会话的一部分被传输。

在这里插入图片描述

使用了vue框架

<template>
  <div class="home">
    <!-- 预览视屏框 -->
    <video autoplay controls ref="test1"></video>
    <div>
      <input type="button" value="开始" @click="start()" />
      <input type="button" value="暂停" @click="pause()" />
      <input type="button" value="继续" @click="resume()" />
      <input type="button" value="结束" @click="stop()" />
      <input type="button" value="播放" @click="play()" />
    </div>
    <!-- 录制的视屏 -->
    <video autoplay controls ref="test2" id="audioTest"></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //MediaRecorder对象
      mediaRecorder: null,
      //录制结束后获得的数据源
      mediaData: null,
      chunks: [],
      //数据流
      stream: null,
    };
  },
  mounted() {
    this.fun();
  },
  methods: {
    async fun() {
      var self = this;
      //获取录频数据源
      this.stream = await navigator.mediaDevices.getDisplayMedia({
        audio: true,
        video: true,
      });
      //预览视屏绑定数据源
      this.$refs.test1.srcObject = this.stream;
      //创建MediaRecorder对象
      this.mediaRecorder = new MediaRecorder(this.stream, {
        mimeType: "video/webm;codecs=h264",
      });
      //设置ondataavailable的函数。该事件可用于获取录制的媒体资源 (在事件的 data 属性中会提供一个可用的 Blob 对象.)
      this.mediaRecorder.ondataavailable = function (e) {
        self.mediaData = e.data;
      };
    },
    start() {
      //开始录制
      this.mediaRecorder.start();
    },
    pause() {
      //暂停录制
      this.mediaRecorder.pause();
    },
    resume() {
      //继续录制
      this.mediaRecorder.resume();
    },
    stop() {
      //结束录制
      this.mediaRecorder.stop();
    },
    play() {
      this.$refs.test2.src = URL.createObjectURL(this.mediaData);
    },
  },
};
</script>

三、MediaRecorder(录制,可录制音频视屏)

更多详情请点击这里

MediaRecorderMediaStream Recording API 提供的用来进行媒体轻松录制的接口,他需要通过调用 MediaRecorder() 构造方法进行实例化。

构造方法

//语法
var mediaRecorder = new MediaRecorder(stream[, options]);

参数

  1. stream
    MediaStream 将要录制的流。它可以是来自于使用 navigator.mediaDevices.getUserMedia() 创建的流或者来自于 , 以及 DOM 元素。

  2. options 可选
    一个字典对象,它可以包含下列属性:
    mimeType: 为新构建的 MediaRecorder 指定录制容器的 MIME 类型。在应用中通过调用 MediaRecorder.isTypeSupported() 来检查浏览器是否支持此种mimeType .
    audioBitsPerSecond: 指定音频的比特率。
    videoBitsPerSecond: 指定视频的比特率。
    bitsPerSecond: 指定音频和视频的比特率。此属性可以用来指定上面两个属性. 如果上面两个属性只有其中之一和此属性被指定,则此属性可以用于设定另外一个属性。

录制视屏(音频同理)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      //MediaRecorder对象
      var mediaRecorder = null;
      //录制结束后获得的数据源
      var mediaData = null;
      //数据流
      var stream = null;

      async function fun() {
        //获取语音、摄像头数据流
        stream = await navigator.mediaDevices.getUserMedia({
          audio: true,
          video: true,
        });
        //预览视屏绑定数据源
        document.getElementById("test1").srcObject = stream;
        //创建MediaRecorder对象
        mediaRecorder = new MediaRecorder(stream, {
          mimeType: "video/webm;codecs=h264",
        });
        //设置ondataavailable的函数。该事件可用于获取录制的媒体资源 (在事件的 data 属性中会提供一个可用的 Blob 对象.)
        mediaRecorder.ondataavailable = function (e) {
          mediaData = e.data;
        };
      }
      window.onload = fun;
      function start() {
        //开始录制
        mediaRecorder.start();
      }
      function pause() {
        //暂停录制
        mediaRecorder.pause();
      }
      function resume() {
        //继续录制
        mediaRecorder.resume();
      }
      function stop() {
        //结束录制
        mediaRecorder.stop();
        document.getElementById("test2").src = URL.createObjectURL(mediaData);
      }
    </script>
  </head>
  <body>
    <!-- 预览视屏框 -->
    <video autoplay width="300px" height="300px" id="test1"></video>
    <div>
      <input type="button" value="开始" onclick="start()" />
      <input type="button" value="暂停" onclick="pause()" />
      <input type="button" value="继续" onclick="resume()" />
      <input type="button" value="结束" onclick="stop()" />
    </div>
    <!-- 录制的视屏 -->
    <video autoplay width="300px" height="300px" id="test2"></video>
  </body>
</html>

结束后获取的数据源(Blob)
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/368579.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

YZRJ面试

面试过程目录概述需求&#xff1a;设计思路实现思路分析1.自我介绍之类的2.http 和https 协议的区别3.进程和线程的区别4.vm 安装的nginx 和Mysql5.评价拓展实现参考资料和推荐阅读Survive by day and develop by night. talk for import biz , show your perfect code,full bu…

自然语言处理(NLP)之求近义词和类比词<MXNet中GloVe和FastText的模型使用>

这节主要就是熟悉MXNet框架中的两种模型&#xff1a;GloVe和FastText的模型(词嵌入名称)&#xff0c;每个模型下面有很多不同的词向量&#xff0c;这些基本都来自wiki维基百科和twitter推特这些子集预训练得到的。我们只需要导入mxnet.contrib中的text模块即可&#xff0c;这里…

模拟百度翻译-课后程序(JAVA基础案例教程-黑马程序员编著-第六章-课后作业)

【案例6-5】 模拟百度翻译 【案例介绍】 1.任务描述 大家对百度翻译并不陌生&#xff0c;本案例要求编写一个程序模拟百度翻译。用户输入英文之后搜索程序中对应的中文&#xff0c;如果搜索到对应的中文就输出搜索结果&#xff0c;反之给出提示。本案例要求使用Map集合实现英…

C/C++开发,无可避免的内存管理(篇一)-约束好跳脱的内存

一、养成内存管理好习惯 1.1 养成动态对象创建、调用及释放好习惯 开发者手动接管内存分配时&#xff0c;必须处理这两个任务。分配原始内存时&#xff0c;必须在该内存中构造对象&#xff1b;在释放该内存之前&#xff0c;必须保证适当地撤销这些对象。如果你的项目是c项目&am…

windows、linux系统设置404教程(适用虚拟主机)

设置一个好的自定义错误页面&#xff0c;可以增加网站的收录&#xff0c;挽留住一些可能因打不开的页面而放弃的客户&#xff0c;我司虚拟主机特别提供了自定义错误页面设置&#xff0c;包括404错误在内的所有自定义错误都可以设置。 linux系统设置方法&#xff1a; 第一步:在…

mysql 内存架构

1. 背景 从 innodb 的整体架构中可以知道 innodb 的内存架构中分为 buffer pool 缓存区, change pool 修改缓冲区, adaptive hash index 自适应哈希索引, 和 log buffer 日志缓冲区. 2. buffer pool buffer pool 是用于缓冲磁盘页的数据&#xff0c;mysql 的80%的内存会分配给…

通过cfssl自签证书https证书

背景 公司内部自建Web服务&#xff0c;通过自签CA&#xff0c;然后签发https证书 工具地址: GitHub - cloudflare/cfssl: CFSSL: Cloudflares PKI and TLS toolkit 使用步骤: 1. 在release页面中下载最新的二进制包&#xff0c;我使用的是1.5的解压并重命名二进制文件 tar…

Idea集成码云

1&#xff1a;Idea集成码云1.1&#xff1a;IDEA安装码云插件【第一步】Idea 默认不带码云插件&#xff0c; 我们第一步要安装 Gitee 插件。如图所示&#xff0c; 在 Idea 插件商店搜索 Gitee&#xff0c;然后点击右侧的 Install 按钮。安装成功后&#xff0c;重启 Idea。Idea 重…

复旦团队发布国内首个模型MOSS 类ChatGPT

复旦团队发布国内首个模型MOSS 类ChatGPT 首先看到这个标题&#xff0c;还有这个名字&#xff0c;我是正经&#xff08;zhen jing&#xff09;的 &#xff08;bu shi 流浪地球&#xff1f;550W&#xff1f;不了解的可以把550W倒过来写&#xff0c;就懂了 看到新闻里的一些图…

Interview系列 - 07 Java | 集合的快速失败和安全失败机制 | 迭代器类源码 | CopyOnWriteArrayList

文章目录1. 集合的快速失败 (fail-fast)1. 使用增强for遍历集合并使用ArrayList的 remove() 方法删除集合元素2. 使用 forEach 遍历集合并使用ArrayList的 remove() 方法删除集合元素3. 使用迭代器遍历集合并使用ArrayList的 remove() 方法删除集合元素4. 使用迭代器遍历集合并…

人脑脊液的代谢组学研究—标识恶性神经胶质瘤的特征

百趣代谢组学分享&#xff0c;脑疾病病人的脑脊液&#xff08;CSF&#xff09;通常用来诊断和监测研究&#xff0c;但是恶性胶质瘤病人脑脊液组成的变化很少被人们所知。该研究作者建立了靶向代谢组学分析方法&#xff0c;采用SRM监测模式&#xff0c;使用正负离子切换的方法在…

MySQL实战之深入浅出索引(上)

1.前言 提到数据库&#xff0c;大家肯定会想到数据库的索引&#xff0c;很多人都知道索引是为了提高查询效率的&#xff0c;那么今天我就给大家讲一下&#xff0c;什么是索引&#xff0c;索引的数据结构是什么&#xff0c;索引是如何工作的。 因为索引的内容比较多&#xff0…

大数据应用要经得起考验,不可盲目跟风_光点科技

一项大数据应用&#xff0c;如果不是经得起推敲的&#xff0c;那就值得怀疑它是不是优秀的大数据应用&#xff0c;是不是有可利用的价值&#xff0c;是不是值得将人力物力财力花费在其中。所以&#xff0c;必须对大数据应用进行必要的筛选&#xff0c;做一定的检验之后才可以做…

vegfr2药物|适应症|市场销售数据-上市药品前景分析

癌症作为人类身体健康的主要威胁&#xff0c;其高死亡率一直是人类死亡的主要原因。尽管人类为控制癌症付出了巨大的努力&#xff0c;然而癌症的发病率和死亡率还是在高速增长。而肺癌、结直肠癌、肝癌和乳腺癌等被认为是癌症死亡的主要因素。而根据科研人员发现&#xff0c;癌…

JavaScript HTML DOM 简介

文章目录JavaScript HTML DOM 简介HTML DOM (文档对象模型)HTML DOM 树查找 HTML 元素通过 id 查找 HTML 元素通过标签名查找 HTML 元素通过类名找到 HTML 元素下面我们将学到如下内容JavaScript HTML DOM 简介 通过 HTML DOM&#xff0c;可访问 JavaScript HTML 文档的所有元素…

高清无码的MP4如何采集?python带你保存~

前言 大家早好、午好、晚好吖 ❤ ~ 又是我,我又来采集小姐姐啦~ 这次我们采集的网站是(看下图): 本文所有模块\环境\源码\教程皆可点击文章下方名片获取此处跳转 话不多少,我们赶快开始吧~ 第三方模块: requests >>> pip install requests 如果安装python第三方模块…

刷题专练之数组移除元素

文章目录前言一、移除元素1.题目介绍2.思路&#xff1a;3.代码二、移动零1.题目介绍2.思路3.代码三、删除有序数组中的重复项1.题目介绍2.思想3.代码四、80. 删除有序数组中的重复项 II1.题目介绍2.思路3.代码4.推荐题解前言 我每个刷题篇的题目顺序都是特别安排的&#xff0c;…

FSM——squirrel状态机使用

FSM——squirrel状态机使用 1 FSM介绍 1.1 概念 FSM&#xff08;finite state machine&#xff09;:有限状态机 是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。核心内容&#xff1a;有限个状态、通过外部操作引起状态的转移。用来对状态的流转进行解耦&a…

C++031-C++日期模拟

文章目录C031-C日期模拟日期模拟题目描述 给出天数求月份日期题目描述 给出天数求月份日期-倒计时题目描述 求任意日期插值在线练习&#xff1a;总结C031-C日期模拟 在线练习&#xff1a; http://noi.openjudge.cn/ https://www.luogu.com.cn/ 日期模拟 题目描述 给出天数求月…

CSS 网页动画【快速掌握知识点】

目录 前言 一、使用CSS3动画 二、使用CSS过渡 三、使用CSS变换&#xff1a; 前言 CSS是一种用于网页设计和排版的语言&#xff0c;也可以用它来制作网页动画。 一、使用CSS3动画 CSS3引入了动画属性&#xff0c;允许您为元素设置动画效果。您可以使用关键帧来定义动画的开始…