查看详情

iOS WebView 对 H5 视频播放的控制

各大厂商在媒体播放这块一般管控都比较严格，所以经常会出现一些非常规的行为，比如 iOS 唤出全屏，比如自动播放，比如画中画(PiP) 无法唤起等问题。 在 iOS 中，我们各个 App 引入的 Webview 容器都是官方推荐的 WKWebView ，我们需要它来加载我们的网页，从而完成部分功能。但是处于安全隐私的考虑，它默认的一些属性是并不开启的。其中我们比较关注的视频播放有这么几项： applicationNameForUserAgent 用于设置 WebView user agent allowsInlineMediaPlayback 是使用h5的视频播放器在线播放, 还是使用原生播放器全屏播放 mediaTypesRequiringUserActionForPlayback 允许哪些媒体格式需要用户手动触发播放 allowsAirPlayForMediaPlayback 是否允许 Apple 的 Airplay allowsPictureInPictureMediaPlayback 是否允许 画中画模式(PiP) 在 Swift 中，我们可以简单的初始化一个 webview struct WebView: UIViewRepresentable { let request: URLRequest var config = WKWebViewConfiguration( 详情 »

查看详情

Vue-core-video-player support HLS format now

As is known to us. HLS is an important video format for all big video service platform for Apple, Netflix and Tencent Video Entertainment. HLS is a media streaming protocol for delivering visual and audio media to viewers over the internet. HLS protocol chops up MP4 video content into short (10-second) chunks with the .ts file 详情 »

查看详情

iOS 13+ Safari 启用陀螺仪授权

iOS 13 在升级的时候 Webkit 更新了部分描述，其中有一点 Added a permission API on iOS for DeviceMotionEvent and DeviceOrientationEvent. 开始对设备运动和旋转进行授权才可以启用数据的读取。 关于设备运动和旋转的数据，iOS 12+ 时候就进行过一次调整，需要用户手动前往 Safari 设置。这个时候你需要提示用户如何进行设置; 当然对于 iOS 13 的话，我们需要在用户和页面交互后，出发 权限申请; $('.btn').on('click', function() { if (typeof DeviceOrientationEvent.requestPermission === 'function') { DeviceOrientationEvent.requestPermission() .then(permissionState => { if (permissionState === 'granted') { // handle data } else { // handle denied } }) .catch( 详情 »

查看详情

头条/支付宝/猿辅导 Web 前端面试经历

由于公司年前的一些战略调整，和自己预感公司路线的担忧，自己也不得不提前准备一些后路，这期间陆续面试了头条，西瓜视频这边，支付宝公益这边和猿辅导这块。这次和三年前的职业变更，leetcode 刷了一些，但是其实也没刷多少，至少面头条的时候，也只是刷了少数 easy / medium 和那些后端相比少了很多。 然后就是特别推荐这个技术图，去准备复习的知识点: 现代前端技术知识体系 这期间，还有就是对自己特别模糊记忆不清楚的一定记笔记，这期间自己 Evernote 也不断誊抄“答案” 也有 32篇左右，主要还是需要不断加强记忆，尤其面试前。 简单说下三家的各自经历吧。 字节跳动-视频架构 这个大概是十一月面的，这个时候离职意愿还没有那么强烈，而是帮助前同事去完成一个内推名额。打心底，我觉得头条加班多，以及江湖一些小恩怨，我不太偏向去。不过面试还是认认真真的准备，听闻面试很难，加上自己本身是偏 Engineering (Production > Science)多点那种， 所以感觉跪的概率还是比较大。 大概一面是交叉面，是在头条的海淀总部那边，是安全的前端小哥，感觉年龄很年轻（我前同事说她去头条最大感觉就是小鲜肉太多了）。一面纯粹是基础面试题，涉及 JS 的非常多，大概题目我后面记录了下： 详情 »

查看详情

Web 前端崩溃监控优化历程

如何监听浏览器崩溃一直都是前端的难点。本文利用 Service Worker 的一些特性，实现对页面的崩溃的监控。 详情 »

查看详情

【译】人眼对 AR 空间的理解

原文链接: https://uxdesign.cc/human-eyes-understanding-of-space-for-augmented-reality-d5ce4d9fa37b @Kore 从工程的角度来看，我们的眼睛是精密的光学传感器，其结构长期以来一直被用作设计相机的蓝图。光通过一系列光学元件进入，其中折射和聚焦都发生在这里。光圈控制通过光圈的光量。随后的光图案落在图像平面上，电信号从该图像平面发送到大脑。然后将这些信号解码为图像。尽管眼睛的功能本身就是一个有趣的话题，但是为了简单起见，我还是自由地忽略了眼睛如何工作的很大一部分。但是，我敢肯定，您会有所了解。 可见光谱 人类的视觉离不开光的存在。光是电磁辐射的一种形式，是刺激人类视觉的关键。这种辐射以波的形式在空间中移动，并能够刺激视网膜产生视觉感。电磁辐射根据其波长进行分类，波长是波的两个波峰之间的距离。尽管整个电磁频谱都包括无线电波，红外线，X射线和其他波类型，但人眼仅对380-740纳米之间的款窄带*敏感。这称为可见光谱。 1纳米= 1米的十亿分之一 人眼的基本特性 视场角（FOV） 它定义为两只眼睛都能看到的图像的总角度大小。平均而言，水平双眼FOV为200度，其中120度为双眼重叠。双眼重叠对于进一步讨论的立体和其他深度提示尤其重要。垂直视场约为130度。 瞳距（IPD） 顾名思义，它是眼睛的瞳孔之间的距离，是双目观察系统的一个非常重要的考虑因素。这个距离因性别和种族而异。不正确的IPD可能会导致不良的眼镜对准，图像失真，眼睛疲劳和头痛。成人的平均IPD约为63mm， 详情 »

查看详情

如何免费阅读 Medium 文章

Step1: 下载 Chrome 浏览器; Step2: （跨过山和大海）后打开浏览器，浏览 Medium ,然后打开你想阅读的文章；你可能会看到下面提示； step3: 没关系，接下来，你可以使用无痕模式，打开 Chrome 的无痕模式，然后将 url 粘贴进去就行了。 温馨提示: 如果有能力可以付费订阅的还是可以尽力付费 每月5刀，也不是很贵，也算是鼓励创作者。 详情 »

查看详情

AR/VR 显示技术原理 (下)

原文地址: https://medium.com/hackernoon/fundamentals-of-display-technologies-for-augmented-and-virtual-reality-c88e4b9b0895 @Kore 之前在AR/VR 显示技术原理-上篇翻译过关于人类视觉基本原理和对于空间的理解，这一部分主要翻译现有显示技术的硬件和底层材料使用。 显像技术 图像显示技术在过去一些年发展的极为迅速。高端的 CRT 已经被四种主要的技术所取代: 液晶显示器(LCD) LCD在高清电视中很常见，并且自1980年代以来一直用于AR/VR显示器中。这种显示类型由包含液晶分子的单元阵列组成，该单元夹在两个偏振片之间。这种装置安置于在于数百万个晶体管的薄玻璃基板之间。对于彩色LCD，将包含红色，绿色和蓝色滤光片的附加基板，放置在该基板的每个单元上方。单个RGB液晶单元称为子像素。三个子像素形成一个像素。 电流流过玻璃材料，改变电流可以使LCD调节光的通过以产生精确的颜色。如果所有子像素都完全打开，则会产生白光。 液晶单元不发光，需要背光。液晶单元只能改变光的通过以产生所需的颜色并随后产生图像。 发光二极管（OLED） 此显示技术基于有机（碳和氢键结合）材料，当施加电流时会发光。这是一种固态显示技术，其中通过有机片的能量以光的形式释放，也称为电致发光。可以通过仔细设置有机发光来控制颜色，但是大多数制造商在OLED堆栈中添加了红色，绿色和蓝色薄膜。OLED面板有两种类型： 被动矩阵有机电激发光二极管（PMOLED）： 与CRT一样，此显示类型由复杂的电子网格组成，以按顺序控制每行中的各个像素。它不包含使更新速度变慢并且保持像素状态高功耗的存储电容器。 详情 »

查看详情

《转》着色器语言 GLSL (opengl-shader-language)入门大全

基本类型 void 空类型,即不返回任何值 bool 布尔类型 true,false int 带符号的整数 signed integer float 带符号的浮点数 floating scalar vec2, vec3, vec4 n维浮点数向量 n-component floating point vector bvec2, bvec3, bvec4 n维布尔向量 Boolean vector ivec2, ivec3, ivec4 n维整数向量 signed integer vector mat2, mat3, mat4 2x2, 3x3, 4x4 浮点数矩阵 float matrix sampler2D 2D纹理 a 2D texture samplerCube 盒纹理 cube mapped texture 详情 »

查看详情

Getting Started with vue-core-video-player to create video player

I have focused on the video player in the last few years. With the growth of video content and bandwidth, so many websites using video to give users more information. So I hope this vue.js plugin helps you solve it. vue-core-video-player is a lightweight video player for Vue.js. It is easy to get started. 详情 »