Search Results for: getUserMedia – Page 2

基于WebRTC 用Laravel 7和Vue.js创建视频聊天应用

本文介绍了如何借助Vue.js和Laravel 7创建一个简单的视频聊天应用。 如何实现视频聊天 我们会用到一个免费的开源项目WebRTC（Web实时通信），它能为Web浏览器和手机应用程序提供实时通信。 概述 步骤1——安装和设置Laravel 步骤2——安装npm包 步骤3——创建Pusher账户 步骤4——创建页面 步骤5——测试 步骤1 安装Laravel UI和Vue包 安装Laravel 既然Laravel已经安装完毕了, 接下来我们就来安装Vue.js前端脚手架。安装要运行以下步骤: 然后 最后 现在你可以访问http://127.0.0.1:8000来查看Laravel的默认页面。 注：WebRTC仅在来源安全(HTTPS或localhost)情况下可用。所以如果你使用的不是localhost, 请换成HTTPS来运行操作。 步骤2——安装所需包 在你的终端中，通过运行以下命令安装 “simple-peer “和 “pusher-js”： 之后，按照本项目需求，用Composer添加PHP库与Pusher交互： 步骤3——

Vue、WebRTC、SocketIO、Node和Redis助力多人视频会议

几个月来疫情持续蔓延，大家使用视频会议应用的次数也水涨船高。无论身处何地，只要有视频应用我们就能与朋友见面。那我们为什么不试着定制一款自己的会议应用，让会话变得更加真实呢? 话不多说，我们直接开始吧！ 实现这个目标不需要我们从头开始。在之前的文章中，我已经介绍过构建具有一对一私人视频功能的应用所需的各个步骤。那么我们就以此为基础对其进行完善，最后添加多对多视频的功能就大功告成了。 （因为下文我们会提到一些在上一篇文章中解释过的概念，如果你之前没有读过，我建议你先移步上一篇文章。） 基于需求，视频会议应具备以下功能： 创建会议的用户自动成为管理员，只有他/她能邀请其他人进入会议； 管理员只能邀请同一公共房间的用户进入会议； 无论是启动会议还是加入会议，用户都不能与其他用户私下交谈； 已经进入某个会议的用户不能进行私聊，也就是说没有人可以和他/她对话； 如果管理员结束会议，所有用户会自动退出会议； 在深入探讨实现细节之前，我们先来了解一下webRTC多方架构的主要方法。 网状结构（Mesh） Mesh是最简单的一种架构。所有端之间都是相互连接的，会直接把自己的媒体发送到其他所有端上。 Me

WebRTC和WASM如何给网络应用提供新机会

从依靠文字短信的延迟通信，到潜力无限的实时通信多媒体平台，我们在线通信协作这一领域的成就十分可观。 得益于谷歌及其开源平台WebRTC，我们可以在浏览器内使用HTML和纯JavaScript来开发像Skype、Whatsapp等视频聊天应用。 谷歌提及WebAssembly适配其最近Chrome的WebRTC音频管道以及未来WebRTC NV的建设。Low Level APIs说明了WebAssembly会被用在哪些地方。 这些建设使我们不再需要写那么多代码，允许我们移植代码。此外，整个网络生态系统中的每一个浏览器都可用此功能。 WebRTC二代（NV）塑造未来 WebRTC NV是技术开发人员用的一个总括性术语。供应商和其他服务供应商都会慢慢接受这一WebRTC新版本。该版本包括以下几个要点： WASM：主流网络浏览器都支持的第二语言。那第一种语言是什么呢？当然是JavaScript； QUIC：一种流行的拥堵控制机制，它能决定你加载页面时要等多长时间； AV1：一种免税的视频编解码器，提供高性能的视频流。 在深入探讨WebAssembly在WebRTC中起何种作用之前，我们先来介绍

WebRTC开发人员调试建议

如果你初入WebRTC开发领域，可能会有点沮丧。因为对于问题到底出在哪里你经常摸不着头脑。身边充斥着各色媒体信息，导致你可能不知道到底在哪里遇到了障碍。在这篇博文中，我们将介绍一些能帮助你快速诊断问题，理清思路的工具。 事实上，如果你有超棒的JavaScript SDK工具，就不必担心上述问题了。借助我们的WebRTC平台以及SDK，只需几行JavaScript，你的问题就迎刃而解了。但若你想更深入了解问题或者自力更生的话，就需要正确的工具来协助你处理问题了。 大家最关注的问题之一是媒体是否双向流动。你大可以整天呼吁测试，但压根没有把与会者添加到会话中，又怎么会产生媒体相关问题呢？所以接下来我们会深入探讨解决该问题的正确方法。 WebRTC Internals 现今的浏览器在这方面帮了大忙。我们会着重探讨Chrome浏览器的相关内容（但其实Firefox也有这方面的工具）。WebRTC Internals是Chrome浏览器内部的一个工具，它可以向我们展示WebRTC连接的所有细节。如下图，前往chrome://webrtc-internals/，打开WebRTC Internals。

用WebRTC和Node.js开发实时视频聊天应用

话不多说，我们直奔主题。这篇文章教大家如何编写一个视频聊天应用，使已连接的两用户端能共享视频和音频。操作很简单，非常适合JavaScript语言训练——更准确地说是WebRTC技术和Node.js。 什么是WebRTC？ Web Real-Time Communications 网页实时通信，简称WebRTC。WebRTC是一个HTML5规范，它允许用户在浏览器之间直接进行实时通信，不需要任何第三方插件。WebRTC可用于多种情境（比如文件共享），但端对端实时音频和视频通信是其主要功能。本文将着重为大家介绍这两项。 WebRTC所做的就是允许接入设备。你可以借WebRTC来实时使用麦克风、摄像头和分享你的屏幕。 所以，WebRTC可以用最简单的方式在网页中实现音频和视频通信。 WebRTC JavaScript API WebRTC说起来很复杂，它涉及到很多技术。但建立连接、通信和传输数据的操作是通过一套JS API来实现的，还比较简单。其中主要的API包括： RTCPeerConnection：创建和导航端对端连接。 RTCSessionDescription：描述连接（或潜在连接）

在Jitsi上用getDisplayMedia录制本地音频

事情的起因是这样的，我想往自己的Jitsi Meet实例中添加本地音频，但操作时发现结果并不是我想要的，所以我打算自己开发个简单的程序作为替代。在这过程中，我发现： 1. 用于屏幕截图的getDisplayMedia缺点多多； 2. 用于媒体录制的mediaRecorder也有诸多局限； 3. 在Jitsi Meet里添加HTML / JavaScript的操作非常简单； 下文是操作的具体细节和一些参考代码。点击这里可以查看我的成品。 问题凸显 几个月前，我构建了一个Jitsi Meet服务器。当时我想借其来更新我名为《两天内用WebRTC建立一家通信公司》的文章。当然，已经有很多讲解如何开发Jitsi Meet的文章或视频了，而且我也没有什么新鲜的或有趣的意见可分享了。但还有那么一项我迫切想改善的功能——录制。我经常做展示和录制会议，以供他人参考，为将来留存资料。表面上看，我的要求很简单：按需录制我的音频以及Jitsi Meet会话的音频和视频，将文件保存在本地。听起来操作很简单，实则不然。 Jitsi 云录制挑战 Jitsi中有一个用于记录的模块，叫Jibri。Jibri设置和配置

博人眼球：用WebGL和WebRTC建造线上影院（下）

获取媒体设备 尽管此应用出现在众多WebRTC入门教程的主题中，但它要解决的一大难题是首先获取用户的摄像头和麦克风许可。当然，大多数时候该操作都很简单——只需await navigator.mediaDevices.getUserMedia({ audio:true, video: true })，然后若用户认可你的应用程序，你会收到一个可在< video>元素中查看，或通过RTCPeerConnection发送的MediaStream。虽然该操作看起来可行，但如果你要构建一个实际的生产应用程序，则需要考虑许多其他问题。 首先，如果用户拒绝你摄像头、麦克风或同时开启两者的请求，你需要一种不减少过多功能还能正常回退的方法。就我们而言，我们礼貌地请用户允许我们使用他们的麦克风和摄像头，并让他们知道自己可以在演出中的任何时间开关麦克风和摄像头。但如果他们不信任我们，更愿意通过文字聊天的方式（同时他们还可以看到和听到其他玩家和演员）进行整个演出，那么我们也尊重他们的想法。但这使情况变得复杂了（有一部分原因是我们想借此检测用户是否允许使用摄像头，或只允许使用麦克风），我们还没能解决这

使用 WebRTC 和 TensorFlow.js 监测摸脸次数

  不要用手摸脸啦！为防止新冠状肺炎病毒疫情传播，医疗机构建议我们不要用没洗过的手摸脸。但如果您坐在计算机前几个小时不动，要做到这一点就很难了。我不禁想，用浏览器可以解决这个问题吗？ 为此我们进行了许多计算机视觉和WebRTC实验。我早已计划去进行用TensorFlow.js在本地浏览器中运行计算机视觉的实验，现在似乎是个好机会。通过快速搜索，我发现有人在2周前已经想过这样做了。但是该站点使用的模型需要一些用户培训才能理解，这很有趣，但也可能有风险。并且它不是供其他人扩展的开源软件。因此在周末，我通过编码隔离做了一些处理，看看结果如何。 你可以在facetouchmonitor.com上查看该程序。 也可以继续阅读下面的内容以了解其工作原理。所有代码都可以在github.com/webrtchacks/facetouchmonitor上找到。我会在本文中分享一些要点和备选方案。 TensorFlow.js TensorFlow.js是Tensorflow的JavaScript版本。您可能听说过Tensorflow，因为它是世界上最受欢迎的机器学习工具。 TensorFlow.

谁能接力Flash video 流媒体传输

在多年辉煌过后，Flash迎来了2020年——Chrome官方支持其操作的最后一年。 Flash是直播技术领域发展的基石。通过使用RTMP协议，Flash为现在的技术发展奠定了基础。在转为游戏流媒体平台Twitch之前的通用流媒体平台Justin TV是由Flash驱动的。随着视频直播需求增长，Flash被证明有一定局限性（依赖插件、专利技术、性能问题等），会阻碍实时流媒体的发展。 值得一提的是，Flash还是VOD和预录内容的默认解决方案。实际上，YouTube一度依赖Flash。尽管VOD也有Flash的替代产品，但本文将主要讨论实时流媒体（的替代品）。 由于许多基于浏览器的应用程序都依赖Flash，因此Flash即将消失是很多人最担心的问题。幸好有一个全方位的（许多方面的性能更棒）解决方案——WebRTC。 WebRTC 作为一种HTML5规范，WebRTC通过简单的API直接在浏览器和设备之间创建了端到端的实时媒体通信。WebRTC是一个开源项目，得到了行业大佬Apple、Google、Microsoft、Mozilla和Opera的支持。这种支持可确保WebRTC标准在可预见

WebRTC中的完美协商（一）

写在前面：如果你不必担心连接状态、闪退问题（信号冲突）、角色（你处于哪一方），就可以在实时WebRTC连接中添加和删除媒体，你会怎么做呢？不受时间和地点限制，你可以很容易地调用pc.addTrack（track，stream），并且你的连接路径只会显示在另一侧，不会有终端连接失败的风险。这是个白日梦？还有很多问题亟待解决？实际上，现在Chrome已经基本完成了协商，上述操作几乎可以运行！但是这样的操作并没有广泛应用，可能是因为“几乎”这两个字。这代表该操作有5%的时间无法工作，并且若Chrome闪退，风险太高了（无法从该操作回滚，只能运用pc.close（））。但API最初的承诺仍然有效。我们只需要一个除Firefox以外的浏览器来实现回滚，并用规范允许的方法修复一些明显的竞赛问题。 WebRTC API中的一些东西可能会导致像SDP和ICE的非对称交换一样多的操作失误。如果编程不正确，其SignalState和对时间敏感的ICE流可能会导致一些问题。如果这还不够有挑战性，那么保持两端同步并且不同方向的话，会使很多用户陷入死循环。 如果我告诉你我们可以解决这个棘手的问题呢？如果我说，如

WebRTC 中文社区由

运营

沪ICP备14053584号-10