teleren/devto huggingface dataset:
iOS 上使用 getUserMedia() 取用相機但畫面鎖死、黑屏
Tags: ios, javascript
Published: 2022-06-10 03:49:18

###### tags: `FM611A` `FM628A` `iOS` `webcam`

# 
[Media Streaming API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API) 可以在使用者自己同意的前提下在網頁應用程式中取用裝置上的相機或是麥克風, 以下是使用相機的基本網頁程式：

```html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <title>getUserMedia test</title>
</head>

<body>
    <video id="video" autoplay="true"></video>
    <script>
        var video = document.querySelector("#video");

        if ((navigator.mediaDevices && navigator.mediaDevices.getUserMedia)) {
            navigator.mediaDevices.getUserMedia({
                video: true,
                audio: false
            })
            .then(function (stream) {
                video.srcObject = stream;
                video.play();
            })
            .catch(function (err) {
                console.log("你拒絕使用相機：" + err);
            });
        } else {
            console.log("您的瀏覽器不支援影像功能");
        }
    </script>
</body>

</html>
```

要注意的是相機與麥克風涉及隱私, 因此 Media Streaming API 只能在本機檔案或是透過 https 加密協定取得的網頁內運作, 如果在 http 未加密協定取得的網頁內, [`navigator.mediaDevices`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) 會是 `undefined`, 就無法叫用 [`getUserMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) 取用相機了。

以上的示範網頁雖然可以正常運作, 不過在 iOS 上卻會遇到相機畫面鎖死, 完全不會更新：

{%youtube EAxi3MZWE7Y %}

或者是黑屏的狀況, 像是這樣：

![](https://i.imgur.com/URbgPUY.png =200x)


根據網路上查到的[解決方案](https://stackoverflow.com/questions/49697155/ios-11-3-camera-access-via-getusermedia-and-black-screens), 這似乎是 [webkit 的臭蟲](https://bugs.webkit.org/show_bug.cgi?id=176843), 解決方法很莫名其妙, 就是在 `<video>` 標籤加上 `playsinline` 屬性就可以了, 像是這樣：

```html
<!DOCTYPE html>
<html>
...
<body>
    <video id="video" autoplay="true" playsinline></video>
...
</body>

</html>
```

你就可以在網頁中正常使用相機了：

{%youtube FApZlKlq53c %}

這個問題到目前為止仍然存在 iOS 中, 不知道的話就會被雷到。

你可以在這裡測試加或是不加 `playsinline` 屬性的網頁：

- [沒有 `playsinline` 屬性的版本](https://codemee.github.io/webcam/webcam.html)
- [加入 `playsinline` 屬性的版本](https://codemee.github.io/webcam/webcam_playsinline.html)
Finding 3-Digit Even Numbers
Tags: leetcode, dsa, theabbie
Published: 2022-06-10 03:30:48

You are given an integer array `digits`, where each element is a digit. The array may contain duplicates.

You need to find **all** the **unique** integers that follow the given requirements:

*   The integer consists of the **concatenation** of **three** elements from `digits` in **any** arbitrary order.
*   The integer does not have **leading zeros**.
*   The integer is **even**.

For example, if the given `digits` were `[1, 2, 3]`, integers `132` and `312` follow the requirements.

Return _a **sorted** array of the unique integers._

**Example 1:**

**Input:** digits = \[2,1,3,0\]
**Output:** \[102,120,130,132,210,230,302,310,312,320\]
**Explanation:** All the possible integers that follow the requirements are in the output array. 
Notice that there are no **odd** integers or integers with **leading zeros**.

**Example 2:**

**Input:** digits = \[2,2,8,8,2\]
**Output:** \[222,228,282,288,822,828,882\]
**Explanation:** The same digit can be used as many times as it appears in digits. 
In this example, the digit 8 is used twice each time in 288, 828, and 882. 

**Example 3:**

**Input:** digits = \[3,7,5\]
**Output:** \[\]
**Explanation:** No **even** integers can be formed using the given digits.

**Constraints:**

*   `3 <= digits.length <= 100`
*   `0 <= digits[i] <= 9`

**SOLUTION:**

    import bisect
    
    class Solution:
        def findEvenNumbers(self, digits: List[int]) -> List[int]:
            n = len(digits)
            f = [i for i in range(n) if digits[i] != 0]
            s = [i for i in range(n)]
            t = [i for i in range(n) if digits[i] in {0, 2, 4, 6, 8}]
            nums = []
            for i in f:
                for j in s:
                    if i == j:
                        continue
                    for k in t:
                        if i != k and j != k:
                            val = 100 * digits[i] + 10 * digits[j] + digits[k]
                            pos = bisect.bisect_left(nums, val)
                            if pos >= len(nums) or nums[pos] != val:
                                bisect.insort(nums, val)
            return nums
How to Customize the React Breadcrumb Component using Templates
Tags: react, webdev
Published: 2022-06-10 03:23:53

Learn how to easily customize the [React Breadcrumb component](https://www.syncfusion.com/react-ui-components/react-breadcrumb) of Syncfusion using templates in a React app. This video explains how to customize the appearance of Breadcrumb items using templates. You will learn how to add and change the icons. 

**Product Overview**: https://www.syncfusion.com/react-ui-components/react-breadcrumb

**Tutorial videos**: https://www.syncfusion.com/tutorial-videos

**Download a getting started example from GitHub**: https://github.com/SyncfusionExamples/how-to-customize-the-react-breadcrumb-component-using-templates

{% youtube xIoST1mrYWU %}
Find Right Interval
Tags: leetcode, dsa, theabbie
Published: 2022-06-10 02:30:37

You are given an array of `intervals`, where `intervals[i] = [starti, endi]` and each `starti` is **unique**.

The **right interval** for an interval `i` is an interval `j` such that `startj >= endi` and `startj` is **minimized**. Note that `i` may equal `j`.

Return _an array of **right interval** indices for each interval `i`_. If no **right interval** exists for interval `i`, then put `-1` at index `i`.

**Example 1:**

**Input:** intervals = \[\[1,2\]\]
**Output:** \[-1\]
**Explanation:** There is only one interval in the collection, so it outputs -1.

**Example 2:**

**Input:** intervals = \[\[3,4\],\[2,3\],\[1,2\]\]
**Output:** \[-1,0,1\]
**Explanation:** There is no right interval for \[3,4\].
The right interval for \[2,3\] is \[3,4\] since start0 = 3 is the smallest start that is >= end1 = 3.
The right interval for \[1,2\] is \[2,3\] since start1 = 2 is the smallest start that is >= end2 = 2.

**Example 3:**

**Input:** intervals = \[\[1,4\],\[2,3\],\[3,4\]\]
**Output:** \[-1,2,-1\]
**Explanation:** There is no right interval for \[1,4\] and \[3,4\].
The right interval for \[2,3\] is \[3,4\] since start2 = 3 is the smallest start that is >= end1 = 3.

**Constraints:**

*   `1 <= intervals.length <= 2 * 104`
*   `intervals[i].length == 2`
*   `-106 <= starti <= endi <= 106`
*   The start point of each interval is **unique**.

**SOLUTION:**

    import bisect
    
    class Solution:
        def findRightInterval(self, intervals: List[List[int]]) -> List[int]:
            n = len(intervals)
            ans = [-1 for i in range(n)]
            starts = []
            ends = []
            for k in range(n):
                i, j = intervals[k]
                bisect.insort(starts, (i, k))
                bisect.insort(ends, (j, k))
            sinx = [s[0] for s in starts]
            lst = len(starts)
            for end, i in ends:
                pos = bisect.bisect_left(sinx, end)
                if pos < lst:
                    ans[i] = starts[pos][1]
            return ans
Intersection of Multiple Arrays
Tags: leetcode, dsa, theabbie
Published: 2022-06-10 03:00:49

Given a 2D integer array `nums` where `nums[i]` is a non-empty array of **distinct** positive integers, return _the list of integers that are present in **each array** of_ `nums` _sorted in **ascending order**_.

**Example 1:**

**Input:** nums = \[\[**3**,1,2,**4**,5\],\[1,2,**3**,**4**\],\[**3**,**4**,5,6\]\]
**Output:** \[3,4\]
**Explanation:** 
The only integers present in each of nums\[0\] = \[**3**,1,2,**4**,5\], nums\[1\] = \[1,2,**3**,**4**\], and nums\[2\] = \[**3**,**4**,5,6\] are 3 and 4, so we return \[3,4\].

**Example 2:**

**Input:** nums = \[\[1,2,3\],\[4,5,6\]\]
**Output:** \[\]
**Explanation:** 
There does not exist any integer present both in nums\[0\] and nums\[1\], so we return an empty list \[\].

**Constraints:**

*   `1 <= nums.length <= 1000`
*   `1 <= sum(nums[i].length) <= 1000`
*   `1 <= nums[i][j] <= 1000`
*   All the values of `nums[i]` are **unique**.

**SOLUTION:**

    class Solution:
        def intersection(self, nums: List[List[int]]) -> List[int]:
            return sorted(set.intersection(*[set(num) for num in nums]))
Terraform and Ansible
Tags: devops, terraform, ansible, cloud
Published: 2022-06-10 02:48:34

[Terraform and Ansible](https://www.bitslovers.com/terraform-and-ansible/)

The Terraform and Ansible are Infrastructures as Code tools that help us DevOps Engineers automate complex tasks in a scalable fashion.

This tutorial will describe how we can use the Terraform with Ansible, to give us more flexibility to provisioning our infrastructure.

[Terraform and Ansible](https://www.bitslovers.com/terraform-and-ansible/)
Number of Dice Rolls With Target Sum
Tags: leetcode, dsa, theabbie
Published: 2022-06-10 02:00:43

You have `n` dice and each die has `k` faces numbered from `1` to `k`.

Given three integers `n`, `k`, and `target`, return _the number of possible ways (out of the_ `kn` _total ways)_ _to roll the dice so the sum of the face-up numbers equals_ `target`. Since the answer may be too large, return it **modulo** `109 + 7`.

**Example 1:**

**Input:** n = 1, k = 6, target = 3
**Output:** 1
**Explanation:** You throw one die with 6 faces.
There is only one way to get a sum of 3.

**Example 2:**

**Input:** n = 2, k = 6, target = 7
**Output:** 6
**Explanation:** You throw two dice, each with 6 faces.
There are 6 ways to get a sum of 7: 1+6, 2+5, 3+4, 4+3, 5+2, 6+1.

**Example 3:**

**Input:** n = 30, k = 30, target = 500
**Output:** 222616187
**Explanation:** The answer must be returned modulo 109 + 7.

**Constraints:**

*   `1 <= n, k <= 30`
*   `1 <= target <= 1000`

**SOLUTION:**

    from functools import lru_cache
    
    class Solution:
        @lru_cache(maxsize=None)
        def numRollsToTarget(self, n: int, k: int, target: int) -> int:
            if n == 1:
                return 1 if 1 <= target <= k else 0
            ways = 0
            for i in range(1, k + 1):
                ways += self.numRollsToTarget(n - 1, k, target - i)
            return ways % (10 ** 9 + 7)
Share your localhost with Cloudflare tunnels
Tags: cloudflare, localhost, tunnels, programming
Published: 2022-06-10 02:29:21

From time to time you'll want to share your locally running app with some folks before it's ready to ship.

## **Features**

🤑 **Free to use**
💎 **Not heavily rate limited**
🔒 **HTTPS support**
🌎 **Won't expose your IP**

First make sure you have `cloudflared` installed and setup. You can check out the [cloudflared docs](https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/installation/) for setup instructions.

Now we can create our first tunnel by running the following command.

```bash
cloudflared tunnel create mycoolapp
```

Create a custom subdomain entry with ease just by running this command.
```
cloudflared tunnel route dns mycoolapp demo.boult.me
```

Once your app is running you can expose it via the tunnel.

```
cloudflared tunnel --url http://localhost:8080 run mycoolapp
```

Now you or a friend can visit the subdomain setup in one of the prior steps.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1851v474wysh8zaxl0mh.png)
[Solved] Wazuh-indexer Error: Not yet initialized (you may need to run securityadmin)
Published: 2022-06-10 02:18:34


### Problem:

Running into a `"Wazuh dashboard server is not ready yet"` error after navigating to the URL in which Wazuh is running:

![Screenshot of error message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uq01hq9ezx4x4qyw0nwy.png)

After running the command `system status wazuh-indexer` here is what was recorded:

```
"type": "server", "timestamp": "2022-06-09T16:10:21,804-04:00", "level": "ERROR",
"component": "o.o.s.a.BackendRegistry", "cluster.name": "wazuh-cluster",
"node.name": "wazuh-indexer", "message": "Not yet initialized (you may need to run securityadmin)",
"cluster.uuid": "F9ORymo0SEuKeVZNLw6C0w", "node.id": "2m6uOkrRTbOf-G8YKhywmw"
```

### Solution:

The problem is that the `securityadmin` module has not yet been initialized.
To do so, run the following command in the folder containing your `wazuh-install.sh` file([click here](https://documentation.wazuh.com/current/installation-guide/wazuh-indexer/step-by-step.html) to check out the official Wazuh Indexer Installation instructions for more info):

```
bash wazuh-install.sh --start-cluster
```

Afterwards, run `system restart wazuh-indexer` and re-visit the URL in which Wazuh is running.

Hope this helps anyone running into the same issue!

### Conclusion:

Thanks for reading this blog post!

If you have any questions or concerns please feel free to post a comment in this post and I will get back to you when I find the time.

If you found this article helpful please share it and make sure to follow me on [Twitter ](https://twitter.com/SeanAtukorala)and [GitHub](https://github.com/ShehanAT), connect with me on [LinkedIn](https://www.linkedin.com/in/shehan-atukorala-8631491a5/) and subscribe to my [YouTube channel](https://www.youtube.com/channel/UCtxed_NljgtAXrQMMdLvhrQ).
how thehackerspro recovered my $4.4 million in btc
Published: 2022-06-10 02:05:58

I've never been more grateful for my life than the day I met [vladimir kolarov] from thehackerspro.
I was on a trip to Australia with my family when someone stole $4.4 million in cryptocurrency from me. I'd been using [coinbase] for years, but I just thought it was a really good way to keep track of my money—I didn't realize how important it was until it was gone.
When we got back from our trip, I couldn't even make my rent payment because of this theft! I didn't know where else to turn, so I found thehackerspro on Google and reached out to them through their website. To be honest, at first I didn't think they would be able to help me at all—but then [name] called me and got right on it!

They were able to reverse-engineer some of the transactions that had happened during our time in Australia and find out who had stolen my money. And then they went after them! They found out where the thief lived and worked, and then they took him down! They even recovered some of the money from him before he could spend it!
How to Redirect a Domain in Webflow
Tags: webdev, beginners, tutorial, codenewbie
Published: 2022-06-10 01:54:27

## What is No-Code?

The Wikipedia Definition of No-code is:

> No-code development platforms allow programmers and non-programmers to create application software through graphical user interfaces and configuration instead of traditional computer programming.
(https://en.wikipedia.org/wiki/No-code_development_platform)


No-code tools such as Webflow have grown in popularity and as they grow in popularity, developers try to push the limits of what these tools can do.

> If you are building a website in Webflow, you might start with a domain like we did `https://lightaibeta.com` and realize you want to change that domain (like we did) to `https://lightai.dev`.

> You have a few options outside of Webflow and it's unclear what is the easiest way to go about it.

### Redirecting Root Domain Outside of Webflow

1. Create a page rule or redirect rule inside of your DNS to the `New domain`

2. You can also use services similar to Azure Front Door (https://docs.microsoft.com/en-us/azure/frontdoor/front-door-url-redirect?pivots=front-door-standard-premium)

However there is a much easier way to create redirect rule for Webflow websites, right inside of Webflow.

## Redirect your old domain to your new domain 

> First select your `Project`, open the `Dashboard` and click `Hosting`

![Webflow Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sk3v570bogf4fa3p44jb.png)

> Scroll Down to add your `Custom Domain`

![Webflow Hosting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ghw8cs8g6roqaxdf8vd.png)

> Click `Add Domain` and add your `New Domain` without deleting your `Original Domain`
![Both Domains Added to Webflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1skip3t14wjzdvwvv8a.png)

> Once both domains are added, highlight your mouse over your `Primary Domain` that you want the redirect to go to and click `Make Default` 

> It's best practice to select the domain with the `www` extension as your default.

![Select Default Domain in Webflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2828yx0lphp5ti24642c.png)

> Lastly, you need to `Publish` the changes in order for this redirect to take effect. Make sure you select all domains available 

![Publish Webflow Changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2ym1434an201tw80ozj.png)

Congratulations 🎉, You have just setup a redirect rule inside of Webflow!
Lead React Native Engineer (remote)
Tags: reactnative, hiring, leadership
Published: 2022-06-10 01:39:44

[Shop-Ware](http://www.shop-ware.com) is hiring a full-time Lead React Native Engineer to head up our inaugural mobile dev team. We have two senior RN engineers who we have recently hired - you will lead the technical direction of this team. 

Shop-Ware is a SaaS for the automotive aftermarket (an all-in-one CRM/workflow automation software tool for repair shops). We were founded in 2013 by a mechanic turned shop-owner who realized the need for better software to run her shop. We are VC-funded and growing quickly. Salary includes equity.

For more info - nicole.jeans@shop-ware.com
Shortest Path in Binary Matrix
Tags: leetcode, dsa, theabbie
Published: 2022-06-10 01:30:39

Given an `n x n` binary matrix `grid`, return _the length of the shortest **clear path** in the matrix_. If there is no clear path, return `-1`.

A **clear path** in a binary matrix is a path from the **top-left** cell (i.e., `(0, 0)`) to the **bottom-right** cell (i.e., `(n - 1, n - 1)`) such that:

*   All the visited cells of the path are `0`.
*   All the adjacent cells of the path are **8-directionally** connected (i.e., they are different and they share an edge or a corner).

The **length of a clear path** is the number of visited cells of this path.

**Example 1:**

![](https://assets.leetcode.com/uploads/2021/02/18/example1_1.png)

**Input:** grid = \[\[0,1\],\[1,0\]\]
**Output:** 2

**Example 2:**

![](https://assets.leetcode.com/uploads/2021/02/18/example2_1.png)

**Input:** grid = \[\[0,0,0\],\[1,1,0\],\[1,1,0\]\]
**Output:** 4

**Example 3:**

**Input:** grid = \[\[1,0,0\],\[1,1,0\],\[1,1,0\]\]
**Output:** -1

**Constraints:**

*   `n == grid.length`
*   `n == grid[i].length`
*   `1 <= n <= 100`
*   `grid[i][j] is 0 or 1`

**SOLUTION:**

    from collections import deque
    
    class Solution:
        def neighbours(self, a, b, m, n):
            for i in range(a - 1, a + 2):
                for j in range(b - 1, b + 2):
                    if (i, j) != (a, b) and 0 <= i < m and 0 <= j < n:
                        yield (i, j)
        
        def shortestPathBinaryMatrix(self, grid: List[List[int]]) -> int:
            m = len(grid)
            n = len(grid[0])
            if grid[0][0] != 0 or grid[-1][-1] != 0:
                return -1
            path = deque([(0, 0, 1)])
            visited = {(0, 0)}
            while len(path) > 0:
                a, b, d = path.popleft()
                if (a, b) == (m - 1, n - 1):
                    return d
                for i, j in self.neighbours(a, b, m, n):
                    if grid[i][j] == 0 and (i, j) not in visited:
                        visited.add((i, j))
                        path.append((i, j, d + 1))
            return -1
How to create a simple counter for Windows 10 performance monitor
Tags: tutorial, windows, monitoring
Published: 2022-06-10 01:17:34

## What is performance monitor 
Performance monitor is a windows utility used for monitoring real-time computer performance data and then logging that data into a file. A good usage example would be for creating a baseline of how well the computer runs stock before installing software.

**Opening Performance Monitor**
The first method would be to open the Run prompt using `Windows + R` key bind. Once the dialog pup ups, enter the following program name `perfmon`. 
![Run method](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e9xtiw9hyrv9vudxve5k.png)
The Second method would be to use the search bar, type `performance monitor`
![Search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zkuj200me762p6xqhg01.png)

**Creating a counter also known as a data collector set**
A counter also known as a data collector set, is a software component that collects, monitors, counts, or even measure events in software. Counters are used to provide info as to how well an OS, Service, or Application is performing. Once performance monitor is open, navigate over to` data collector set's` click on it, then Select `User Defined`, `right-click the mouse and select new -> Data Collector Set`
![New counter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hhdl7ymxm7jn0jiagchw.png)
Enter a name for the data collector set, then select `Create manual (Advanced)`
![Name given](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cspguqrwhawnxbckjj1t.png)
Select the `Add` option for creating a new Performance counter. Scroll down until you find `Processor Time` then move it over to added counter by selecting the `add` button.
![add option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfp9hz1ptfwr0sv6vn6t.png)
![processor time](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3j7j9axsh7l0oh87ll3.png)
Specify a location for the data to be saved.
![Save location](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1hhdgigvocmpdock8wmc.png)
Then start the new counter, wait a couple mins for data to be collected, then stop it.
![start](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ml15s6of0fpyumgoqypj.png)
Once the data has been collected, you will be able to located it under the `Report tab -> user Defined -> new collector set -> [computer name]`
![data](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zrdmfnu9r36cby4y36s4.png)

Thanks for reading.
Kenji
Day 62: Back to Sleepless nights
Published: 2022-06-10 01:12:40

Hi!
Demos are back and there is one scheduled tomorrow evening and the Graphql project is fall from done. today I was busy working on the project adding GraphQL resolvers queries and mutation. the work is nor done yet but I still have tomorrow morning to catch up and that would be the main focus for tomorrow before the weekend.
I'm tired I can't type more 😀 gotta go... 

signing off...