ARTS 03 - 如何使用 JavaScript 访问设备摄像头

Posted by Calvin on 2020-06-07

前言:什么是ARTS?

ARTS 源于耗子叔在极客时间的专栏《左耳听风》打卡活动。

Algorithm:每周至少做一个 Leetcode 的算法题。主要是为了编程训练和学习。

Review:阅读并点评至少一篇英文技术文章。主要是为了学习英文,如果你的英文不行,你基本上无缘技术高手。

Tip:学习至少一个技术技巧。主要是为了总结和归纳你在日常工作中所遇到的知识点。

Share:分享一篇有观点和思考的技术文章。主要是为了建立你的影响力,能够输出价值观。

Algorithm

18. 四数之和

给定一个包含 n 个整数的数组 nums 和一个目标值 target,判断 nums 中是否存在四个元素 a,b,c 和 d ,使得 a + b + c + d 的值与 target 相等?找出所有满足条件且不重复的四元组。

示例:

给定数组 nums = [1, 0, -1, 0, -2, 2],和 target = 0。
满足要求的四元组集合为:
[
[-1, 0, 0, 1],
[-2, -1, 1, 2],
[-2, 0, 0, 2]
]

Python 3 实现:

class Solution:
def fourSum(self, nums: List[int], target: int) -> List[List[int]]:
nums.sort()
n = len(nums)
res = []
p = 0 # p, k, i, j
while p < n - 3: # 文中提到的条件1和条件2,可以直接跳过
if nums[p] + 3 * nums[p + 1] > target: break
if nums[p] + 3 * nums[-1] < target:
while p < n - 4 and nums[p] == nums[p + 1]: p += 1
p += 1
continue
k = p + 1
while k < n - 2: # k 和 p 的判断是一样的
if nums[p] + nums[k] + 2 * nums[k + 1] > target: break
if nums[p] + nums[k] + 2 * nums[-1] < target:
while k < n - 3 and nums[k] == nums[k + 1]:
k += 1
k += 1
continue
i = k + 1
j = n - 1
new_target = target - nums[p] - nums[k]
while i < j:
if nums[i] + nums[j] > new_target: j -= 1
elif nums[i] + nums[j] < new_target: i += 1
else:
res.append([nums[p],nums[k],nums[i],nums[j]])
i += 1
j -= 1
while i < j and nums[i] == nums[i - 1]: i += 1 # 避免结果重复
while i < j and nums[j] == nums[j + 1]: j -= 1 # 避免结果重复
while k < n - 3 and nums[k] == nums[k + 1]: k += 1
k += 1
while p < n - 4 and nums[p] == nums[p + 1]: p += 1
p += 1
return res

Review

An In-Depth Look at Blur Effect Materials on iOS

本文以实例的形式深入详细的介绍了如何在 iOS 中实现 Blur Effect (毛玻璃模糊)效果,包括 Blur Effect Styles 各种样式在深色模式下的不同呈现,以及 Vibrancy Effect Styles 文本内容在模糊效果下的不同样式。

比如加入模糊效果:

// Add the `UIVisualEffectView` to the view hierarchy.
let visualEffectView = UIVisualEffectView(effect: nil)
visualEffectView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(visualEffectView)
// Add appropriate constraints for the `visualEffectView`.
// Add your content to the visual effect view.
let contentView = makeMyFancyPrimaryContentView()
visualEffectView.contentView.addSubview(contentView)
// Add constraints for your `contentView`.
// Finally, set the appropriate blur effect for the visual effect view.
visualEffectView.effect = UIBlurEffect(style: .systemMaterial)

Tip

显示当前的⽬录名称

pwd 显示当前的⽬录名称

⽂件查看

ls 查看当前⽬录下的⽂件

ls [选项,选项… ] 参数 …

常⽤参数:

  • -l ⻓格式显示⽂件
  • -a 显示隐藏⽂件
  • -r 逆序显示
  • -t 按照时间顺序显示
  • -R 递归显示

更改当前的操作⽬录

cd 更改当前的操作⽬录

  • cd /path/to/…. 绝对路径
  • cd ./path/to/… 相对路径
  • cd ../path/to/… 相对路径

建⽴⽬录

mkdir 建⽴⽬录

常⽤参数

  • -p 建⽴多级⽬录

删除空⽬录

rmdir 删除空⽬录
rm -r 删除⾮空⽬录

复制⽂件

cp 复制⽂件和⽬录

  • cp [选项] ⽂件路径
  • cp [选项] ⽂件… 路径

常⽤参数

  • -r 复制⽬录
  • -p 保留⽤户、权限、时间等⽂件属性
  • -a 等同于 -dpR

移动⽂件

mv 移动⽂件

  • mv [选项] 源⽂件 ⽬标⽂件
  • mv [选项] 源⽂件 ⽬录

删除⽂件

rm 删除⽂件

常⽤参数

  • -r 删除⽬录(包括⽬录下的所有⽂件)
  • -f 删除⽂件不进⾏提示
  • 注意: rm 命令可以删除多个⽬录,需谨慎使⽤

Share

How to Access Device Cameras with JavaScript (Front and Rear)

要访问用户的相机或者麦克风,我们可以使用 JavaScript 的 MediaStream API。该 API 允许通过流访问这些设备捕获的视频和音频。

先检查浏览器是否支持此 API:

if (
"mediaDevices" in navigator &&
"getUserMedia" in navigator.mediaDevices
) {
// ok, browser supports it
}

当然,本文中还介绍了如何访问设备的前后摄像头,截屏等。如果感兴趣或者有需要的可以阅读一下。