Month: 7月 2022

通过流混合改善音频/视频实时流体验

流混合是一种将多个音频或视频流组合到云上的一个流技术,广泛应用于直播、在线教育、音频室直播等场景。开发人员可以通过播放混合流来查看屏幕并听到聊天室中所有成员的声音,无需管理聊天室中的每个流。

 

流混合是一种将多个音频或视频流组合到云上的一个流技术,广泛应用于直播、在线教育、音频室直播等场景。开发人员可以通过播放混合流来查看屏幕并听到聊天室中所有成员的声音,无需管理聊天室中的每个流。

流混合的优势

流混合之所以广泛应用于音频和视频领域,是因为它可以给开发人员带来以下好处。

1. 低成本

在大型直播或在线教育场景中,如果多方在一个房间内共同主持,房间内的所有用户需要播放多条流。使用流混合技术,只需要播放一个流。即在双方托管的情况下,费用可减半。在多方托管的情况下,成本可以降低(n - 1)/n。如果使用审查机制(比如淫秽内容审核),成本也可以降低(n - 1) /n,因为只需要查看一个流的图像。

2. 简单的代码逻辑

当多个主机共同托管并使用流混合时,观众只需播放混合流并进行渲染,而不是播放和渲染多个流。

3.在不同平台之间轻松转发

如果没有流混合,我们无法在多方共同托管方案中将直播转发到 Facebook​、YouTube 和其他直播流平台。因为这些平台只有一个 RTMP 地址,我们无法将多个流转发到一个地址。

4. 移动客户端上的 Web 浏览器支持的多方共同托管

对于 iPhone 用户,Safari 浏览器不支持同时播放多个音频文件。当播放多个流时,就只能播放一个流,流混合可以解决这个问题。由于手机性能和浏览器性能的限制,手机上的大多数Web浏览器一般可以播放最多四个流。借助流混合技术,可以播放的最大流数会有很大的增加,并且无需额外的带宽和性能消耗。

什么是流混合

如下图所示,当一个聊天室中的多个用户发布流时,服务器会根据布局配置将两个流合并为一个流,这样观众就可以播放混合流查看用户 A 和用户 B 的屏幕。

流混合的实现

1. 流体混合工艺

a) …

    

github package的使用教程

一、写在前面

上一次,笔者向大家介绍了把gitlab仓库作为npm私包的使用方法,具体的详见我的博文地址https://www.cnblogs.com/cnroadbridge/p/16406476.html,它能用,但是不够优雅,比如说你想知道那个包的版本就不是很直观能够在package.json中体现。好多天前,一次偶然的机遇,被甲方的金主发掘并看上,脱离后端好久的我硬着头皮写了一些Node方面的面试题,具体的详见我的博文地址https://www.cnblogs.com/cnroadbridge/p/16361744.html,通过面试后就去了某地一线内卷中心进行周末兼职工作,还挺有意思的,嘿嘿,老板给我工钱的同时,我又能学习接触新的领域和知识,这不,在这其中我就学到了一种基于gitlab管理npm私包的方法。…

Vite 现在是 Laravel 应用程序的默认前端资产捆绑器

Laravel 团队一直在努力为 Laravel 集成Vite 。截至本周,Vite 现在是新 Laravel 项目中的默认前端资产捆绑器,同时更新了 Breeze 和 Jetstream:

    

JavaScript 容器

大多数服务器程序是 Linux 程序。它们包括一个文件系统、一些可执行文件,可能还有一些共享库,它们可能与 systemd 或 nsswitch 等系统软件交互。

Docker 普及了 Linux 容器的使用;操作系统级虚拟化,为分发服务器软件提供了一种极好的机制。每个容器镜像都是一个无依赖的可立即运行的软件包。

由于服务器软件通常依赖于许多系统资源和配置,因此在过去部署它一直充满挑战。Linux 容器解决了这个问题。

PHP 正在干掉 Python

PHP 正在干掉 python .
在流行文化的冲击下,也许很多人都不赞同本文表达的观点,但我毅然决定再一次逆流而上。我认为,虽然 PHP 百般受轻视,但这门编程语言的流行度比以往任何时候都高!
为什么?怎么 PHP 还没死吗?不是有那么多比 PHP 更优秀的编程语言吗?
不,并没有。如果真的有这样的语言的话,它们早就带头干掉 PHP 了。我们需要重新审视什么才是“更好”的编程语言。
为什么 PHP 还没死?如果你表示不解,那可能是因为你并不了解编程、程序员、市场和民主。实际上,这与代码、函数或语法没有任何关系。

抨击 PHP 成为了一种时尚

 
如今,为了在编程的圈子内走红,你就必须抨击与“主流文化”吹捧的编程语言有竞争关系的语言。这与语言本身的功能无关,只是因为文化,就有点像宗教。
程序员是一群固执己见的人,非常傲慢,但我们必须克服这些缺点。我们喜欢抨击我们不喜欢和不使用的编程语言。你会发现有些工程师说 Java 很糟糕,有些说 C# 很糟糕,而有些则说 Go 很糟糕。至于具体是什么语言根本不重要,总会有人批评。
此外,还有一种更深的鄙视,最近这段日子 PHP 和 Python 之间默默地展开了一场较量,似乎学术界正在策划一场阴谋:干掉 PHP,让 Python 取而代之。
如今,你甚至会发现在一些维基百科的页面中,LAMP 技术栈中的 P …
    

如果你要开始一个大项目,不要使用 Python……

在很大程度上,Python并不像你想象的那么好。
在开发者的职业生涯中,有一个特定阶段,开发者们会从为项目做贡献到掌握自己的技巧。这个阶段对有些人来说会来得早一些,有些则也会晚一些,而另一部分人则无法到达这个阶段。

不过,大多数职业生涯较长的开发人员都经历过这个阶段。我将这称之为自己构建的点。

如果你已经到达了那个阶段,你面对的第一个问题是:它是如何运作的?用户体验如何?架构是怎样的?数据如何流动?以及很多类似这样的问题。

我在这里就不为你回答这些这些问题的答案了。无论你开始哪一个项目,它们都需要根据项目来高度定制,并且每一个都应该至少有一篇独立的文章来解答。

不过,我想回答其中一个问题:哪种语言最适合这个项目?…

WordPress从4.9升级到6.0,使用的PHP版本从7.0升级到8.0全过程及问题解决.

WordPress从4.9升级到6.0,使用的PHP版本从7.0升级到8.0全过程及问题解决.

步骤:

一.在wordpress后台,更新程序,从wordpress4.9在线升级到6.0.

更新过程会升级wordpress程序与数据库. 一切自动完成.

二.更新wordpress插件

在插件管理处,更新可升级的插件.

三.wordpress 升级到6.0完成.

四.遇到问题.在wordpress后台,F12console中会报 QTags is not defined,

原来错误的原因是由于快速标签脚本的优先加载quicktags.min.js. 在 WordPress 6 及更高版本中,脚本的加载时间比以前的版本稍晚。在以前的 WordPress 版本中,脚本在页面上较早加载,因此在调用QTags.addButton添加按钮时,QTags定义并添加按钮(如预期的那样)。仅供参考:脚本位于:

/wp-includes/js/quicktags.min.js

在 WordPress 版本 6.0 中,Prismatic 调用…

        

css 两种颜色闪烁 js设置颜色闪烁的两种方法

css 两种颜色闪烁 js设置颜色闪烁的两种方法

 

第一种:无序闪烁

 

 function changeColor() { 
         var color="orange|#FFFFFF"; 
         color=color.split("|");
         $("#setxfld").css("background",color[parseInt(Math.random() * color.length)]);
         xfld.attr('fill',color[parseInt(Math.random() * color.length)]);
     }

 

setInterval('changeColor()',1000);

 

 

第二种:有序闪烁

 

  var colorFlag = 0;
  function changeColor() { 
         if (!colorFlag)
         {
        	 $("#setxfld").css("background","#FF9B1A");
        	 colorFlag = 1;
         }else{
        	 

JavaScript – PC 端通过纯 js 播放音频文件(播放提示音)

前言

有时候,我们可能有这样一个需求,当到达条件时,网页会播放一个提示音告知用户。

实现

当然,你也可以写一个 标签,通过 js 获取 DOM,来操作。

// 创建<audio>标签(参数:音频文件路径)
const audio = new Audio('x.mp3');

// 业务逻辑
if(1){
  //...
  // 播放声音
  audio.play();
}

 

html的dialog标签元素用法

以前的时候为了在页面上做出dialog效果往往很复杂,还要写遮罩层,用CSS 写 好多代码,不过刚刚知道html中原生也支持dialog。

标准用法

<dialog open>
    <h1>你好</h1>
    </dialog>

在这里插入图片描述

可以通过改变open属性,来显示或者隐藏,如上图所示。也可以使用dialog的show方法或者close方法。

模态框(modal)用法

在这里插入图片描述

与普通用法不同的是,显示需要使用showModal方法,而模态框默认上下左右居中,还有默认的蒙层。当模态框显示的时候,可以按ESC键进行隐藏。

修改样式

在这里插入图片描述

背景的样式可以通过::backdrop伪类进行修改,如上图把背景色修改成了蓝色;当然模态框的样式也可以同过CSS修改。

form形式的模态框

实现

<dialog id="dialog">
    <form method="dialog">
        <p>要关闭?</p>
        <button type="submit" value="no">否</button>
        <button type="submit" value="yes">是</button>
    </form>
</dialog>

<script>
    const dialog = document.getElementById('dialog');
    dialog.showModal();
    dialog.addEventListener('close', function () {
        console.log(dialog.returnValue); //