Month: 四月 2022

在网页上通过语音输入文字 – HTML5 Web Speech API 语音识别介绍

         很久前我曾经提到Web Speech API,现在Chrome刚刚发布的25版本已经为桌面和Android提供了对此API的支持,这对Web开发者来说无疑是一个具有里程碑意义的事件,因为我们可以直接在Web App中原生使用语音识别技术,Web应用的新时代将会由此开启。

         控制不住激动的心情,下面我会通过示例马上给大家介绍此API的详细信息。

         Google专门提供了一个原生示例,来演示Web Speech API


         我们来看看实现代码。首先需要判断浏览器是否支持Web Speech API,我们通过window下是否存在

本地已有项目如何上传到github上

大家好,我是小梅,公众号:「小梅的前端之路」 原创作者。

作为在前端领域不断探索的一员,在此记录开发中遇到的问题,如果你也遇到了相同的问题,希望本文对你有帮助。


一、github上新建一个仓库

具体步骤可以看网上的诸多教程

二、把本地项目初始化为一个git仓库

找到本地项目的根目录,依次执行

1、建立本地的git仓库

git init

2、将本地文件全部添加到本地的git仓库

git add .

此处如果报下面这个错误,则需要先执行:

git config --global core.autocrlf false

然后再执行git add .

  1. The file will have its original line endings in
    

uniapp开发app,手机状态栏问题挡住问题,uni app 刘海屏适配

问题:在使用uniapp开发手机App时,因为HBuildX创建的应用默认是沉浸式样式,如果去除自带的导航栏之后,页面会直通手机顶部状态栏,解决办法如下:

方法1:使用uniapp官方文档提供的解决方案 https://uniapp.dcloud.io/collocation/pages?id=customnav

 

方法二:配置mainfest.json来关闭沉浸式。打开应用的manifest.json文件,打开源码视图,app-plus 下添加 statusbar >immersed节点并设置值为false

"app-plus" : {
    "statusbar": {  
        "immersed": false  
    },
}

方法二,测试成功!

设置 uni app webview的标题显示

webview的update-title设为false
<template>
	<view>
		<web-view :webview-styles="webviewStyles" update-title="false" src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
	</view>
</template>

pages.json的“globalStyle”中添加一行:"navigationStyle":"custom",

还可以在onReady中加

setTimeout(()=>{
uni.setNavigationBarTitle({
title:‘app中要设置的标题’
})
},2000)

 

    

uni-app 打开手机权限 摄像头,麦克风权限弹窗提示

App权限判断和提示 - DCloud 插件市场

下载链接:

https://ext.dcloud.net.cn/plugin?id=594

引入:

import permision from "@/js_sdk/wa-permission/permission.js"

使用:

switch (uni.getSystemInfoSync().platform) {

case 'android':

permision.requestAndroidPermission("android.permission.RECORD_AUDIO")

permision.requestAndroidPermission("android.permission.CAMERA")

break;

case 'ios':

permision.judgeIosPermission("record")

permision.judgeIosPermission("camera")

break;

}

作者:安徒生1997
链接:file:///home/lenix/%E6%96%87%E6%A1%A3/uni-app%20%E6%89%93%E5%BC%80%E6%89%8B%E6%9C%BA%E6%9D%83%E9%99%90%20-%20%E7%AE%80%E4%B9%A6.html
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Ubuntu离线安装软件包

一.应用场景
a.当我们需要在多台电脑安装同一个软件,并且这个软件很大,下载需要很长时间时
b.需要安装软件的ubuntu不能上网
二.离线安装包的制作
2.1.通过如下指令下载
XXXX软件所需要的deb包
sudo apt-get -d install XXXXX
执行完上述指令后,XXXX软件的安装包就下载到了/var/cache/apt/archives目录下
2.2.生成依赖关系

1.根目录下新建一个文件夹

$ sudo mkdir offlinePackage

2.将下载的deb包拷贝到上述新建的文件夹下

$ sudo cp -r /var/cache/apt/archives  /offlinePackage

3.修改文件夹的权限,可读可写可执行

$ sudo chmod 777 -R /offlinPackage/

4.建立deb包的依赖关系

$ sudo dpkg-scanpackages /offlinePackage/ /dev/null |gzip

网络摄像头RTSP视频流WEB端实时播放实现方案

IPC视频流怎么实时在WEB浏览器播放,视频流格式是RTSP。
下面我整理了自己实现的方案以及网上看到的一些方案

一、FFmpeg + nginx 将转 hls 通过 video.js 在支持h5浏览器播放(我实现的)

参见:Nginx+FFmpeg实现rtsp流转hls流,在WEB通过H5 video实现视频播放

不足:hls延迟较rtmp、http-flv大

二、FFmpeg + nginx-rtmp-module + h5 video,rtsp转rtmp播放

https://blog.csdn.net/gui66497/article/details/78590190
https://blog.csdn.net/LLittleF/article/details/81111713

注:通过video.js播放rtmp流。需要将代码放到服务器,本地windows电脑无法播放

不足:需要浏览器开启flash

三、FFmpeg + nginx-http-flv-module + flv.js,rtsp转rtmp,直接播放flv格式

基于nginx-rtmp-module,通过配置将rtmp转为flv,最后通过flv.js播放。
https://github.com/winshining/nginx-http-flv-module/blob/master/README.CN.md
https://segmentfault.com/a/1190000016043297
https://blog.csdn.net/qq_22633333/article/details/96288603#comments

这种方式是最理想的,我目前找到的方案。当然单指不想花钱买收费方案的。

四、WebRTC

https://github.com/lulop-k/kurento-rtsp2webrtc
https://www.jianshu.com/p/1ddfa72de165

五、streamedian

            

使用 getUserMedia 和功能策略在跨域 iframe 中访问相机和麦克风

如果您尝试在最新版本的 Chrome 上getUserMedia()使用跨源 iframe访问相机和麦克风,默认情况下它将失败。

我们已经多次遇到过这种情况,因为Pipe 音频和视频录制平台的用户试图将 Pipe 嵌入到使用 iframe 嵌入外部 HTML 和 JS 代码的Wix网站或Google 站点中。

原因源于 2017 年和 2018 年对 Chrome 进行的一系列安全和隐私更改:

  1. Chrome 60 引入了功能策略,为开发人员提供了一种方法来控制其网站内敏感功能的使用
  2. 默认情况下, Chrome 64 会阻止跨源 iframe

网站升级为https后引用http报错:This request has been blocked; the content must be served over HTTPS

HTTPS 是 HTTP over Secure Socket Layer,以安全为目标的 HTTP 通道,所以在 HTTPS 承载的页面上不允许出现 http 请求,一旦出现就是提示或报错:

Mixed Content: The page at ‘https://www.taobao.com/‘ was loaded over HTTPS, but requested an insecure image ‘http://g.alicdn.com/s.gif’. This content should also be served over HTTPS.

HTTPS改造之后,我们可以在很多页面中看到如下警报:

很多运营对 https