vue+electron实现获取媒体流

最新推荐文章于 2023-06-02 15:06:28 发布
最新推荐文章于 2023-06-02 15:06:28 发布
阅读量948 收藏 4
点赞数 1
文章标签： vue.js chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LingSnow1019/article/details/113181011
版权
  1. 首先在vue页面中import { desktopCapturer } from “electron”;这个我们以点击事件为例
  2. 在触发点击的时候调用方法在这里插入图片描述
    这里的sources就是我们桌面所有的流
    在这里插入图片描述
    3.接着需要用到浏览器的自带方法navigator.mediaDevices.getUserMedia(constraints),MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。
    在这里插入图片描述
    4.桌面流已经捕获，然后在本地测试可以使用video标签来实现<div class="big-video" id="big-video"> <video></video> </div>
    在这里插入图片描述
LingSnow1019
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
Electron理论知识 19 - Electron 多媒体采集模块介绍
liuzhen007的专栏
03-10 901
目录 前言 正文 首先，来看目录结构 其次，看关系类图 最后，看日志记录 1. DVLOG 2. MediaLog 《Electron实战》系列-总览_liuzhen007的专栏-CSDN博客欢迎大家阅读 Data-Mining 的《Electron实战》专栏。这里简单的罗列一下专栏的文章目录，一方面方便大家阅读，另一方面可以快速的查找对应的文章。需要说明的是，本专栏会持续更新，不断增加新的文章，同时，也会动态更新原有文章。https://liuzhen.blog.csdn.net/arti
Electron常见问题 65 - Electron 如何操作本地的音视频设备
liuzhen007的专栏
04-08 1287
之前的文章中提到过，安卓等移动端APP在采集音视频数据时，需要打开本地摄像头和麦克风设备。同理，桌面端应用程序在采集音视频数据时也需要依赖本地的音视频设备，今天本文的主要内容就是讨论Electron是如何操作本地的麦克风和摄像头以及如何控制麦克风和摄像头采集音视频数据。《Electron实战》系列-总览。
只有你想不到，Electron也可以开发视频播放器
不安分的猿人的专栏
05-10 4385
## 一、桌面版视频播放器 今天又发现一款强大的开源软件，electron 开发的一个可以播放国内主流视频(腾讯、爱奇艺、优酷、芒果、乐视)的播放器。而且播放视频可直接跳过广告。好的开源项目第一时间分享给大家！ 二、开发环境搭建 2.1 前提 本地安装Node12.x+环境，Node.js是一个运行在服务端的JavaScript框架，主要用于创建快速的、可扩展的网络应用。 本地已安装VSCode开发工具（其他工具也可以）。 掌握Vue、Vuex基础语法。 Electron是由Github开发，用HTML，
pc win端桌面级视频播放器 +electron+vue+element
zsq199771的博客
03-30 305
首先 https://juejin.cn/post/6844904137482567688 这个给了很大启发 但是需要注意的点是控制视频进度的时候如果长时间拖动才松开会无作用，但是如果绑定到@input上的话视频会卡顿，等一下我会去找问题 还有就是作者是以15秒的视频做例子，自己需要加上长时间的视频的转换方式 electron的话注意安装过就不能打包了 electron一些js控制样式跟浏览器解析方式不同，写起来要注意格式 能写高度的最好写明高度，一些auto会失效 其他的没什么了，想起来在补充 ...
electron获取媒体流（实现屏幕分享）
死亡的挽歌的博客
07-02 8927
背景 最近项目需要接入直播系统，在调研了多家平台后，发现部分公司的针对electron的sdk存在一些问题，如适配的electron版本较低或sdk本身存在问题，所以使用了web的sdk，然而web的sdk在进行屏幕分享时存在一个权限问题，直接上教程： 在electron中使用屏幕分享 1.使用electron提供的接口获取桌面窗口信息 import { desktopCapturer } from 'electron' desktopCapturer.getSources({ types: ['wind
electron+vue实现div contenteditable截图功能.docx
01-13
electron+vue 实现 div contenteditable 截图功能 electron+vue 实现 div contenteditable 截图功能是 electron 和 vue 框架结合实现的截图功能。下面将详细介绍 electron+vue 实现 div contenteditable 截图功能的...
在Vue中快速引入Live2d
08-12
Live2D是一种二维实时渲染技术，可以创建逼真的动态角色模型，广泛应用于游戏、社交媒体应用和网站中。Vue.js是一个轻量级且功能强大的渐进式JavaScript框架，非常适合构建用户界面。接下来我们将详细介绍如何在Vue...
gesture-kiosk-electron
03-27
"gesture-kiosk-electron"项目的核心就是利用 Electron 的特性，实现对用户手势的识别和响应。这通常涉及到计算机视觉和机器学习领域，可能使用了诸如 MediaDevices.getUserMedia API 来获取摄像头输入，然后通过...
一个基于 electron 的音乐软件.zip
最新发布
02-28
下面，我们将深入探讨这个基于 Electron 的音乐软件的实现原理和关键知识点。 首先，我们要理解 Electron 是什么。Electron 是由 GitHub 开发的一款开源框架，用于构建跨平台的桌面应用。它结合了 Chromium 和 Node...
Electron-screen-recording-app
03-21
2. **屏幕录制功能实现**：在Electron中，可以使用`desktopCapturer`模块来获取屏幕和窗口的预览，然后使用`mediaRecorder` API（来自WebRTC的一部分）开始录制。`mediaRecorder`允许开发者指定视频和音频的编码参数...
vue3+WebRTC拉流（正确姿势）
yasuo56的博客
06-02 3413
vue3+WebRTC拉流（正确姿势）
vue获取摄像头视频、拍照
idoits的博客
10-12 2482
vue获取摄像头视频、拍照
媒体流入门实践
逛街的喵啊
10-05 502
媒体流接口的学习实践，入门级别。可以做的事情：录制声音、录制屏幕、拍照、屏幕共享。
实时展示摄像头内容（go server + electron-vue client）
DisMisPres的博客
11-04 3127
起因 当前程序是以electron + vue作为前端，go作为后端http主服务。最近新来了一个需求，需要能够使用多个PC USB摄像头进行录像，并能够区分到底是哪个摄像头在录，这就需要前端页面能够实时的展示摄像头视频。 实现方式 浏览器支持(例：chrome)，直接调用js的MediaRecorder对象来处理，再通过electron提供的nodejs框架来处理文件的保存。 搭建rtmp服务器，通过推流（如：ffmpeg）和拉视频流的方式展示视频。 后端通过ffmpeg获取视频流，转成图片发给界面展示
electron如何控制电脑摄像头
weixin_42576804的博客
12-16 657
可以使用 Electron 的 navigator.mediaDevices.getUserMedia() 方法来访问电脑摄像头。 首先，你需要在 package.json 中加入如下的权限声明： "permissions": [ "camera" ]
electron客户端中视频监控的实现HLS/HTTP-FLV
imsopoor的博客
05-15 554
对于前端方面对于视频监控实现 我的浅见是获取拉流视频地址 再将流视频地址推到video标签。推流过程主要体现在摄像头至服务端的过程 和前端无关。基于第一点后 就是从直播（监控）协议入手 主要是三个RTMPHLSHTTP-FLV具体的差异和优缺点可以参考文章。简而言之就是RTMP低延迟且兼容性差（浏览器中只能通过Flash使用）、HTTP-FLV承接RTMP的优点 对于仅在flash使用 也有flv.js插件来解决、HLS是苹果推出的 供苹果系统使用。
Springboot+Vue3 整合海康获取视频流并展示
qq_43649937的博客
05-22 5663
Springboot Vue3
如何解决navigator.mediaDevices.getUserMedia兼容问题
刘杨造梦的博客
09-23 4903
/ 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口。// 调用用户媒体设备，访问摄像头、录音、console.log("访问用户媒体设备失败：", error.name, error.message);// 因为这样可能会覆盖已有的属性。// 否则，为老的navigator.getUserMedia方法包裹一个Promise。// 首先，如果有getUserMedia的话，就获得它。// 最新标准API、// 成功的回调函数。// 异常的回调函数。
navigator.mediaDevices.getUserMedia问题总结
热门推荐
pgLi
02-22 1万+
1、在PC端不能配置facingMode字段来设定前置或者后置摄像头，否则不能打开摄像头 2、使用后置摄像头设置分辨率时，宽高颠倒才能正确显示（手机本身的比例是高大于宽） width: { min: 776, ideal: 720, 1080: }, height: { min: 1024, ideal: 1280, max: 1920 } 3、使用浏览器真机调试时，使用了http协议，导致无法打开摄像头 在chrome中可以在url地址栏中直接输入chrome://flags/#unsaf..
vue+electron实现自动更新
09-23
在 Vue Electron 中实现自动更新需要借助 Electron 的 autoUpdater 模块和一些其他辅助工具。 首先，需要在主进程（`main.js`）中配置自动更新。可以使用 Electron 的 autoUpdater 模块来检查新版本，并自动下载和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值