2020年05月_abloume

原创【微信小程序】wx.uploadFile不支持上传GIF动图

虽然 wx.chooseImage 选择图片时可以选择 .gif 格式的图片，但是当调用 wx.uploadFile 将其进行上传时，发现返回errorCode 200，对应的报错信息是 \u6587\u4ef6\u8def\u5f84\u4e0d\u80fd\u4e3a\u7a7a。将其转换为中文后为 “文件路径不能为空”。暂时没有想到什么办法可以解决…...

2020-05-22 16:29:56 823

原创【微信小程序】底部操作菜单与拍照录像

这篇文章要解决三个问题：底部操作菜单自定义按钮“点按拍照，长按拍摄”调用朋友圈的API实现“点按拍照，长按拍摄”第一部分当点击“上传资料”按钮的时候，要从底部弹出操作菜单栏。<button type="primary" bindtap="openActionsheet">上传资料</button>Page({ data: {}, onLoad: function (options) {}, openActionsheet: function () {

2020-05-20 16:59:45 540

原创【微信小程序】选择图片并上传时出现两个loading ?!

遇到这样一个业务场景，在小程序中 wx.chooseImage 选择图片后，调用 wx.uploadFile 上传图片到公司的一个数据库中，然后拿到对应的返回值后，再去请求一个接口，将所有图片一一进行绑定，等所有图片上传完毕后，最后请求一个接口进行总结汇报。我们希望的是当选择图片完成后，有一个loading加载中的效果，然后等所有图片上传完毕并一一绑定，且最后一个总结汇报的接口也请求完毕后，再隐藏loading弹窗，展示“上传完毕”。听起来很简单的一个事情，但是我却踩坑了。先看下大体的代码结

2020-05-20 15:35:12 1298

原创 WebRTC（三）用屏幕分享录制一段视频

前一章节了解了屏幕分享的API，感觉跟我们常用的“屏幕共享”好像。那么可不可以用此进行一个屏幕录制呢？“纸上得来终觉浅，觉知此事要躬行。”看着挺简单的一个东西，没有落实都算说大话。首先画上三个按钮：<button @click="start" :disabled="disabled.start">开始录制</button><button @click="stop" :disabled="disabled.stop">结束录制</button>&lt

2020-05-18 18:23:23 1506

原创 WebRTC（二）获取用户的媒体流

MediaStream 接口用于表示媒体数据流。（流可以是输入或输出，也可以是本地或远程）单个 MediaStream 可以包含零个或多个轨道。（每个轨道都有一个对应的 MediaStreamTrack 对象）MediaStreamTrack 表示包含一个或多个通道的内容，其中，通道之间具有定义的已知的关系。MediaStream 中的所有轨道在渲染时是同步的。下图显示了由单个视频轨道和两个不同的音频（左声道和右声道）轨道组成的 MediaStream。平时我们在开发时总是习惯性地定义 {v

2020-05-17 21:46:18 1312

原创 WebRTC（一）从了解三个方面的API开始

WebRTC简介WebRTC是一个由Google发起的实时通信解决方案，其中包含音视频采集、编解码、数据传输、音视频展示等功能。虽然其名为WebRTC，但是实际上它不仅支持Web之间的音视频通讯，还支持Android和iOS端。底层技术图像引擎（VideoEngine）VP8编解码jitter buffer：动态抖动缓冲Image enhancements：图像增益声音引擎（VoiceEngine）iSAC/iLBC/Opus等编解码NetEQ语音信号处理回声消除和降噪会话管理

2020-05-17 17:41:10 1244

原创从传统媒体到p2p的流媒体

传统媒体在刚开始的时候，我们要看一段音视频，就要从网上下载完整个文件后才能观看。如果音视频文件大些的，那实在太痛苦了，可能得电脑挂机好多个小时（有时一下午甚至一天）才能下载完成。而在漫长的下载等待期间呢，我们一般去做一些不需要网速的事情，以让这个音视频文件尽可能早的下载完毕。流式媒体随着多媒体技术的发展，视频的分辨率越来越高，人们也越来越喜欢看高清、超高清的视频。传统媒体已然无法满足人们的日常需求，视频高清跟下载时长的矛盾愈来愈明显，人们越来越无法忍受了。于是，流式媒体技术应运而生。我们可以

2020-05-17 16:42:25 234

原创无编译/无服务器，实现浏览器的CommonJS模块化

前些天写一个demo，需要用到require去引一个node包，但是又不想将其混进公司的整个node工程中去，因为想着越简单越好。同时，webpack能不用也不用了吧，不然又得初始化个webpack工程。在我折腾了半天后，发现一个利器 —— one-click.js。我们知道，如果希望CommonJS的模块化代码能在浏览器中正常运行，通常都会需要构建/打包工具，如webpack、rollup等。而one-click.js是一个可以让你在不需要这些构件工具的同时，也可以在浏览器中正常运行基于Com

2020-05-17 11:05:58 171

原创流媒体的基本介绍

文章目录流媒体是什么？音视频组成编码格式音频编码格式视频编码格式存储封装格式视频码率、帧率码率帧率流媒体的传输方式顺序流式传输实时流式传输流媒体的传输协议HLSHLS 点播HLS 直播HTTP-FLVRTMPMPEG-DASHRTSP+RTP流媒体是什么？流媒体就是指采用流式传输技术在网络上连续实时播放的媒体格式，如音频、视频或多媒体文件。音视频就是流媒体的核心。音视频组成一个完整的视频文件，包括音频、视频和基础元信息。我们常见的视频文件如mp4、mov、flv、avi、rmvb等视频文件，就是

2020-05-17 10:42:03 2021

转载网络心跳包机制

为什么需要心跳机制？考虑以下两种典型的即时通讯网络层问题模型：1）情形一：一个客户端连接服务器以后，如果长期没有和服务器有数据来往，则可能会被防火墙程序关闭连接。但有时候我们并不想被关闭连接。例如，对于一个即时通讯软件来说，如果服务器没有消息时，我们确实不会和服务器有任何数据交换，但是，如果连接被关闭了，有新消息传来时，我们再也没法收到了，这就违背了“即时通讯”的设计要求。解决：当服务器与客户端一定时间内没有有效业务数据来往时，我们只需要给对端发送心跳包即可实现保活。2）情形二：通常情况下

2020-05-17 10:14:18 1160

'Ablaze 的专栏