Ionic实战二十七：移动端录音方案及Nginx部署配置

已于 2024-03-13 10:18:11 修改
阅读量185 收藏
点赞数
分类专栏： Ionic 文章标签： nginx 录音
于 2023-12-22 10:12:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16497617/article/details/135146346
版权
本文介绍了如何在Ionic应用中实现移动端录音功能，并通过Nginx进行配置部署。主要内容包括移动端外壳集成iframe，H5页面录音实现，以及通过Nginx配置处理录制音频的请求头限制问题，确保与青柿视频平台的API交互正常。
摘要由CSDN通过智能技术生成

文章目录

1.最终效果预览

image

image

2.实现思路说明

摄像头对接的海康的或者大华，将设备集成到青柿视频平台中，这样视频的播放用video标签即可播放.m3u8,视频这个好说对内网外网要求不大，主要介绍下语音喊话功能，在页面按住按钮说话完成后，调用青柿平台的api实现对摄像头的喊话功能，海康的摄像头据说只能集成在内网中，大华的摄像头可以用于外网，而在移动端喊话，涉及到录音功能，h5端的录音只能用localhost地址或者https域名的形式测试，打包的apk中最终还是需要https域名的形式，介绍下实现方案：
①.做一个APP壳，页面中通过iframe加载H5页面
②.H5页面实现录音及喊话功能
③.将H5页面部署到服务器上并通过nginx配置成https://xxx.xxx.xx访问
④.通过蒲公英组网软件将部署H5的服务器、手机端、青柿平台组成一个局域网

了解本专栏 订阅专栏 解锁全文 超级会员免费看
博主逸尘
关注
专栏目录
订阅专栏
Ionic实战二十二：用video标签实现m3u8格式的视频播放
博主逸尘
08-17 729
文章目录1.效果图2.页面布局3.项目index.html中引入hls4.给urlAddress动态赋值5.初始化 1.效果图 2.页面布局 在新建的html页面中引入video标签如下： <video id="video" [src]="urlAddress" type="video/mp4" controls="controls" style="width:100%;height:100%;"></video> 利用[src]动态绑定播放视频的地址 3.项目index.ht
Ionic实战七：实现人脸识别认证方案
博主逸尘
08-10 1023
项目的需求是实现人脸对比及活体检测功能，花钱越少越好，一开始考虑的是移动端的H5方案，看了下需要对接公安的api接口，这个价格太高了，放弃了，最终是移动端拍照上传，调用百度api实现人脸对比及活体检测功能。 ionic中接入相机插件后实现拍照方法如下： ionic cordova plugin add cordova-plugin-camera npm install --save @ionic-native/camera@4 在config.xml中的ios平台中加入权限 <config-fi
使用Nginx部署Ionic项目
Seven
07-21 1099
前情概要一、项目打包二、使用Xshell远程服务器进行nginx配置三、使用Xftp传输打包好的项目文件四、使用Xshell重启nginx服务五、测试完成 前情概要 希望对Ionic项目进行一个网页链接的发布，使得用户可以单独登录该项目进行访问 一、项目打包 1.确定环境 在src/environments/environment.ts文件夹中确定使用环境 2.确定项目在本地可以启动成功 3....
Ionic 录音插件
分享AI工具/AI副业玩法
01-20 4119
本文介绍 Ionic cordova 平台下两个录音插件 cordova-plugin-media-capture 和 cordova-plugin-media的使用。1. cordova-plugin-media-capture1. 安装①  进入项目的根目录。②  安装 cordova plugin：sudo ionic cordova plugin add cordova-plugin-me...
nginx部署静态mp3文件，在浏览器播放音乐
yiluxiangne的博客
02-02 1043
在/usr/share/nginx/html/ 目录中创建music目录，然后把音乐文件上传到/usr/share/nginx/html/music目录中，假设音乐文件是Iloveyou.mp3,那么就在浏览器中输入如下url。2.在nginx的静态文件目录，使用yum方式安装，默认情况下在/usr/share/nginx/html/目录下，也可以在nginx.conf文件中查看实际的目录。1.在Linux服务器上安装Nginx，具体安装部署，请看我的其他关于nginx安装的文章。
在 ionic 项目中使用（迁移） capacitor
Lyrelion的博客
03-25 5757
在 ionic 项目中使用（迁移） capacitor
ionic项目实战-小白踩坑走起【2017/3/7起·持续更新】
Z_pigeon的博客
03-07 4119
几个月的项目实战，走在适配安卓与ios的路上浪，总结经验，相互交流【2017/3/7起·持续更新】
ionic实战二十二中实现m3u8播放js文件
08-17
此外，为了确保跨平台兼容性，特别是在Android或某些不完全支持HLS的浏览器上，你可能需要考虑使用其他库（如Video.js、Shaka Player等）或者WebRTC作为备选方案。同时，别忘了处理网络错误、播放错误以及用户交互...
基于Ionic 2.0的NiceFish-ionic移动端组件库设计源码
最新发布
09-27
该项目是一款基于Ionic 2.0的NiceFish移动端组件库设计源码，采用TypeScript语言开发，集成了HTML、JavaScript和CSS等前端技术。整个项目包含228个文件，其中png图片151个，scss样式表10个，ts TypeScript文件9个，...
web学习笔记08-Ionic的前后端简单交互与打包
点柈
01-12 2837
前言：这篇文章同样是新手专用，对于一个像我一样的前端渣新来说，看看还可以，大神的话就算啦。里面涉及的点都不算太难，虽然我也有一堆东西没懂，但是跟着先敲起来，慢慢地就会理解了。这个之后还做了一个angular的前后端简单交互，道理都一样，只是pc端会出现跨域问题，需要配置一下nginx的反向代理之类的。本篇就不说这些了，因为做这个的时候没遇到这些问题，遇到的是一些网络权限的问题，在下面也都提了。1.实
Ionic 环境搭建
KingCruel的专栏
12-26 1313
*、安装NodeJs *、安装JDK    1、本地安装路径：       C:\Program Files\Java\jdk1.8.0_71    2、配置“系统变量”       JAVA_HOME：C:\Program Files\Java\jdk1.8.0_71（对应JDK安装路径）            path：%JAVA_HOME%\bin; *
关于Ionic2\Angular2使用http的一些坑
bangrenzhuce的博客
04-09 5259
1、服务器接收key=value&key=value类型的值，但服务器无法获取到Post请求的body的值描述： 使用url?key=value&key=value的形式可以正常请求到参数，但是把参数放入到body后，服务器估计获取到信息但无法正确解析解决： 1、body要为字符串，格式：‘key=value&key=value’ 2、然后发送http请求的时候需要设置下 'Content-Type
ionic 开发当中，有一些常用的方法。
xiaotuni的专栏,每天进步一点点
04-18 2881
ionic 移动开发；在android 5.0以之不用打加速包，5.0以后的话，加上加速包后，运行效果还是可以接受的。
Ionic-Native 中media插件的使用，录音功能的实现
Neokekeke的博客
12-06 5180
目前Ionic官方提供了很多native插件，方便调用手机等设备的原生接口。最近在研究在ionic项目中加入录音功能，完成简单录音功能后，并做下笔记，我用到的是Ionic native中的media插件和file插件。 简单介绍下这两个插件：（官方介绍：media，file） media插件：实例化一个音频对象，需要在手机目录中创建一个音频类型文件来存储数据，可以实现对该音频进行录音，
配置Nginx多端口 ， 播放音频，查看文本
q35809453的博客
01-12 2946
user oriontest; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections...
在 nginx 中部署 angular 应用
xwnxwn的专栏
09-24 1807
引用地址：https://blog.csdn.net/t894690230/article/details/78244861 最近使用Angular做了第一个应用，但是网上的教程大多是教如何开发，部署相对较少，所以这里就简单记录一下如何在nginx中部署Angular应用。 注：Angular应用可以编译成静态页面，然后部署在任何 web 服务器上，这里仅仅是选择nginx而已，同时编译后的文...
nginx代理本地图片、视频及音频文件
热门推荐
lisong_ghost的博客
12-19 1万+
在映射目录放相关文件，并在nginx中添加server即可 server { listen 192.168.x.a:9001; server_name 192.168.x.b; charset utf-8; location ~ .*\.(gif|jpg|jpeg|png)$ { expire...
Vue、Ionic 部署到服务器端随笔
菜鸟学编程
12-15 1687
================== Vue 部署 ===================   1.构建该项目源码 /* 到项目路径下执行 */ cnpm run build 在项目根目录下执行以上命令，会在项目根目录下生成 dist 文件夹。   2.部署编译后文件 将项目目录复制到服务器的Nginx、Tomcat、IIS、Apache等工作目录下   3.访问Web服务器端...
ionic教程（1）--配置环境和创建项目
小牛呼噜噜的博客
01-08 5286
win10 安装开发工具VsCode 安装node.js （由于使用公司的内网，所以要使用代理，这里的坑比较多！！！） 1、通过npm来开发项目 报错： PS F:\demo1&gt; npm install -g ionic@latest npm ERR! code ENOTFOUND npm ERR! errno ENOTFOUND npm ERR! network request...
Ionic框架开发入门：环境配置与部署指南
"这篇文章主要介绍了如何入门 Ionic Framework 开发，包括开发环境的搭建和相关工具的安装，旨在帮助初学者快速建立开发环境并提高学习效率。作者裴德万在2015年编写此文档时指出，使用非原生 Android 开发（如 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

博主逸尘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值