工作记录，使用Uniapp开发安卓应用

起步

项目需求：录制视频和语音，在app页面的上半部分实时显示。下半部分显示文字提示，提醒用户回答确认。最后将录制的视频提交到服务器保存。

1.Android studio （不是必要的）

安装 ：https://developer.android.google.cn/，作为开发过程中App的调试工具。（Android Studio基于IntelliJ Platform）。

插件市场搜索不到中文插件，手动下载：https://plugins.jetbrains.com/plugin/13710-chinese-simplified-language-pack，下载对应版本号的插件。

2.Virtual Device

随便打开一个项目，点右上角运行，按提示安装android Virtual Device.

启动虚拟机时报错：haxm device is not found

下载安装：haxm-windows_v7_5_1.zip。重新启动，进入android studio-->AVD Manager-->启动虚拟设备-->OK。

3.uniapp 配置安卓模拟器

检测不到模拟器的解决办法：https://ask.dcloud.net.cn/article/97

公司电脑上各种方法试变了，回家用自己电脑，那真是一气呵成。设置好adb工具路径，端口都不用管，然后打开模拟器，Hbuilder自己就检测到了。这................??

总结关闭360这些软件，然后重启试试。

Uniapp之App开发

关于week：http://doc.weex.io/zh/

uni-app App端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。

在App端，如果使用vue页面，则使用webview渲染；如果使用nvue页面(native vue的缩写)，则使用原生渲染。一个App中可以同时使用两种页面，比如首页使用nvue，二级页使用vue页面，hello uni-app示例就是如此。

虽然nvue也可以多端编译，输出H5和小程序，但nvue的css写法受限，所以如果你不开发App，那么不需要使用nvue。

以往的 weex ，有个很大的问题是它只是一个高性能的渲染器，没有足够的API能力（比如各种push sdk集成、蓝牙等能力调用），使得开发时非常依赖原生工程师协作，开发者本来想节约成本，结果需要前端、iOS、Android 3拨人开发，适得其反。 nvue 解决了这个问题，让前端工程师可以直接开发完整 App，并提供丰富的插件生态和云打包。这些组合方案，帮助开发者切实的提高效率、降低成本。

App端的webview组件是非常强大的，可以更灵活的控制和拥有更丰富的API：https://www.html5plus.org/、https://ask.dcloud.net.cn/article/34922

1. App端请求系统权限相关说明：https://blog.csdn.net/weixin_45416117/article/details/121354191

2.H5调用摄像头相关说明：https://www.cnblogs.com/kuangke/p/14278565.html

3.uniapp 安卓Api权限申请：https://www.html5plus.org/doc/zh_cn/android.html、https://blog.csdn.net/superlover_/article/details/113646369

4.uniapp APP端运行时对象：https://www.html5plus.org/doc/zh_cn/runtime.html

5.权限检测插件：https://ext.dcloud.net.cn/plugin?id=594

H5 摄像头操作

已废弃的媒体调用API：navigator.getUserMedia

最新的API：navigator.mediaDevices.getUserMedia()；

mediaDevices 是 Navigator 只读属性，返回一个 MediaDevices 对象，该对象可提供对相机和麦克风等媒体输入设备的连接访问，也包括屏幕共享。MediaDevices 是一个单例对象。通常，您只需直接使用此对象的成员。

1.WebRTC API 

WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。

2.MediaDevices.getUserMedia() 

调用时提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。

它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，promise会reject回调一个  PermissionDeniedError 或者 NotFoundError 。

提示：返回的promise对象可能既不会resolve也不会reject，因为用户不是必须选择允许或拒绝。

navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
  /* 使用这个stream stream */
})
.catch(function(err) {
  /* 处理error */
});

详细文档：

https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

3.媒体流(MediaStream) 

将录制的视频流通过Video元素播放。

video.src = CompatibleURL.createObjectURL(stream);
/* 或者 */
video.srcObject = stream;

相关文档：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaStream

P2P Media Loader是一个开源 JavaScript 库，它使用现代 Web 浏览器（即 HTML5 视频和 WebRTC）的功能通过 P2P 传递媒体，并通过与许多流行的 HTML5 视频播放器的集成进行播放。它不需要任何网络浏览器插件或附加组件即可运行（参见演示）。

相关的优秀项目：

https://github.com/Novage/p2p-media-loader、https://github.com/muaz-khan/RecordRTC、https://github.com/streamproc/MediaStreamRecorder

H5媒体流

1.MediaStream.getTracks()，返回流中所有的MediaStreamTrack列表。 2.MediaStream.getAudioTracks()，返回流中kind属性为"audio"的MediaStreamTrack列表。顺序是不确定的，不同浏览器间会有不同，每次调用也有可能不同。 3.MediaStream.getVideoTracks()，顺序是不确定的，不同浏览器间会有不同，每次调用也有可能不同。

媒体流录制（MediaRecorder）：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder/MediaRecorder

用于录制媒体流，该接口在手机、PC端均受支持。

uniapp之打包app

1. manifest.json

文件说明：https://uniapp.dcloud.io/collocation/manifest

2. App启动图

相关说明：https://ask.dcloud.net.cn/article/35527、https://www.jianshu.com/p/3fd048644e3f?tdsourcetag=s_pctim_aiomsg

3.android签名证书

生成指南：https://ask.dcloud.net.cn/article/35777

4.自定义调试基座

相关文档：https://ask.dcloud.net.cn/article/35115

5.uni-app运行环境版本和编译器版本不一致的问题

HBuilderX1.7.0及以上版本uni-app添加了运行环境版本和编译环境版本的校验机制，当两个版本不一致时会弹出以下提示：

应用弹窗提醒

相关文档

https://ask.dcloud.net.cn/article/35627

Webview

1.相关功能拓展方法：https://ask.dcloud.net.cn/article/35036

问题总结

1. 有时候听筒播放声音、有时候扬声器播放（使用h5plus直接指定扬声器）：https://www.html5plus.org/doc/zh_cn/audio.html

2.支持的约束对象属性：https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints

3.定义媒体设备的相关约束：https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

4.回声消除：https://baike.baidu.com/item/%E5%9B%9E%E5%A3%B0%E6%B6%88%E9%99%A4%E6%8A%80%E6%9C%AF/16479565?fr=aladdin

H5下的录音会默认打开回声消除，最终导致的就是录制音频的时候会自动过滤设备发出的声音，导致无法正常录制全部声音。用过定义约束对象关闭回声消除。

web-view使用uni api

1.在web-view加载的本地及远程HTML中调用uni的API及网页和vue页面通讯：https://ask.dcloud.net.cn/article/35083

2.Native.js：https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/88

3.安卓首屏关闭的机制：https://ask.dcloud.net.cn/article/35565，如果页面白屏（未加载完或者未渲染任何东西）会splash一直存在，10秒后无论如何都会关闭。

IOS相关问题

1.使用 Safari打开摄像头黑屏，但是可以成像，需要添加playsinline,webkit-playsinline属性为true，设置非全屏播放可正常使用

<video v-show="!imgSrc" id="videoCamera" playsinline webkit-playsinline="true" :width="videoWidth" :height="videoHeight" autoplay>
 您的浏览器不支持 video 标签。
</video>

2.H5 录像在ios中，需要视频开始播放了才会显示图像。可以设置自动播放或者controls控制条来操作。

3. H5 ios录制不支持webm格式（支持mp4，安卓只支持webm不支持mp4）：https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/isTypeSupported

4. https://www.jianshu.com/p/274b5ebb917b