<pre>
sudo apt install curl 
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash 

source ~/.bashrc

#done</pre>

[NVM] Installing NVM on Ubuntu

<pre>
Problem come from Laravel 9.x

Description:
Latest working using Laravel version 9.3.1 with jetsream got bug in laravel/jetstream, then it fixed by 50b46db and bump laravel version to 9.4.0, but then it produces another issue, if user login with &quot;remember me&quot;, and leave tab open for a few hours and open again then will get error Method Illuminate\Auth\RequestGuard::getRecallerName does not exist.

How to fix it?

go to laravel/framework
src/Illuminate/Session/Middleware/AuthenticateSession.php

And update line44:
$passwordHash = explode(&#39;|&#39;, $request-&gt;cookies-&gt;get($this-&gt;auth-&gt;getRecallerName()))[2] ?? null;

Then change to 
$passwordHash = explode(&#39;|&#39;, $request-&gt;cookies-&gt;get($this-&gt;guard()-&gt;getRecallerName()))[2] ?? null;

Done</pre>

[Laravel] - Method Illuminate\Auth\RequestGuard::getRecallerName does not exist

<pre class="lang:default decode:true " >//Must enable google API + Youtube v3 API
// https://developers.google.com/youtube/v3/docs/search/list

Using this "q" for searching video account channelID.

After that put channelID into channelID field. then get all video from the specifies youtube account.</pre> 

 
<pre class="lang:default decode:true " >&lt;?php 

$API_Key    = 'KEY'; 
$Channel_ID = "Channel_ID";
$Max_Results = 10; 
 
$apiData = @file_get_contents('https://www.googleapis.com/youtube/v3/search?order=date&amp;part=snippet&amp;channelId='.$Channel_ID.'&amp;maxResults='.$Max_Results.'&amp;key='.$API_Key.''); 
if($apiData){ 
    $videoList = json_decode($apiData); 
}else{ 
    echo 'Invalid API key or channel ID.'; 
}

if(!empty($videoList-&gt;items)){ 
    foreach($videoList-&gt;items as $item){ 
        // Embed video 
        if(isset($item-&gt;id-&gt;videoId)){ 
            echo ' 
            &lt;div class="yvideo-box"&gt; 
                &lt;iframe width="280" height="150" src="https://www.youtube.com/embed/'.$item-&gt;id-&gt;videoId.'" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt; 
                &lt;h4&gt;'. $item-&gt;snippet-&gt;title .'&lt;/h4&gt; 
                &lt;h5&gt;'. $item-&gt;id-&gt;videoId .'&lt;/h5&gt;
            &lt;/div&gt;'; 
        } 
    } 
}else{ 
    echo '&lt;p class="error"&gt;'.$apiError.'&lt;/p&gt;'; 
}</pre> 

Done

[PHP] Youtube API V3 - get account video

<p>&nbsp;</p>

<pre>
#init project
composer create-project laravel/laravel project-name

#install jetstream
composer require laravel/jetstream
php artisan jetstream:install livewire

#create DB

#setup .env
APP_NAME=&quot;Project Name&quot;
APP_URL=http://projectlink

DB_HOST=DB_host
DB_DATABASE=DB
DB_USERNAME=username
DB_PASSWORD=password

//gmail stmp
MAIL_MAILER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=email@gmail.com
MAIL_PASSWORD=password
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=email@gmail.com

chmod -R 777 ./storage/
php artisan migrate

#update guest.blade.php inside &lt;head&gt;
&lt;!-- Styles --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;{{ asset(&#39;css/app.css&#39;) }}&quot;&gt;
&lt;!-- Scripts --&gt;
&lt;script src=&quot;{{ asset(&#39;js/app.js&#39;) }}&quot; defer&gt;&lt;/script&gt;

#update config/fortify.php - uncomment this line
Features::emailVerification(),

#update config/jetstream.php - uncomment this line
Features::api(),

#update app/Models/User.php - add text
class User extends Authenticatable implements MustVerifyEmail

#update app/Provider/FortifyServiceProvider.php - add inside boot()
Fortify::verifyEmailView(function () {
  return view(&#39;auth.verify-email&#39;);
});

npm install tailwindcss@latest postcss@latest autoprefixer@latest

#update webpack.mix.js - add text inside &quot;public/css&quot;,[ HERE ]
require(&quot;postcss-import&quot;),
require(&quot;tailwindcss&quot;),

#update resource/js/app.js - add text below line
var Turbolinks = require(&quot;turbolinks&quot;)
Turbolinks.start()
***Livewire no longer supports Turbolinks out of the box.
If you want to continue using Turbolinks in your Livewire application, you will have to include the Turbolinks adapter alongside Livewire&#39;s JavaScript assets:
@livewireScripts
<script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks@v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false"></script>


#clear cache laravel
php artisan optimize:clear
php artisan cache:clear
php artisan config:cache
php artisan storage:link
npm install
npm install --save turbolinks
npm run dev

#test it

</pre>

[Laravel] Jetstream+livewire

<pre class="lang:default decode:true " >php artisan tinker

&gt;&gt;&gt; ModelName::create('title'=&gt;"This is Title",.....);
'Illuminate\Database\Eloquent\MassAssignmentException with message 'Add [title] to fillable property to allow mass assignment on [App\Models\ModelsName]'

&gt;&gt;&gt; exit

#reload the tinker
composer dump-autoload

#do the task again, should be fine.
php artisan tinker</pre>

[Laravel] Tinker Cached

<pre class="lang:default decode:true " >// find your certbot timer name
ll /usr/lib/systemd/system/
get file [certbot.timer || cerbot-renew.timer||...]

// check your certbot timer
systemctl status [certbot.timer || cerbot-renew.timer||...]

// if the timer is not enabled
systemctl start [certbot.timer || cerbot-renew.timer||...]
systemctl enable [certbot.timer || cerbot-renew.timer||...]

//check history of the renew task
journalctl -u certbot-renew.service</pre>

Certbot auto renew

<pre class="lang:default decode:true " >Please inside your apache config file.

Add/Replace "Options +SymLinksIfOwnerMatch" into your Directory tag

e.g.
&lt;VirtualHost *:80&gt;
ServerName xxx.xxx.com
ServerAdmin xxx@xxx.com
DocumentRoot /var/www/html/test
&lt;Directory "/var/www/html/test"&gt;
Options +SymLinksIfOwnerMatch
AllowOverride all
Allow from all
&lt;/Directory&gt;
&lt;/VirtualHost&gt;

Done</pre>

[PHP] 403 after add htaccess File

<pre class="lang:default decode:true " >First let's install coturn. If you are on freshly installed server, let's update the repository. and reboot the server as well.
&gt; sudo apt-get -y update
&gt; sudo apt-get upgrade
&gt; sudo reboot

Let's install. coturn starts automatically once installed, so let's stop it as well.
&gt; sudo apt-get install coturn
&gt; sudo systemctl stop coturn

We need SSL certificate to configure out TURN server, so let's generate the SSL certificate using Let's Encrypt.
&gt; sudo apt install certbot python3-certbot-nginx

Now, let's obtain the SSL certificate. Remember before this step, you should point your domain to this server. To do so find the IP address of this server and create A record on your DNS server for name stun and turn.
Remember to Enable port 80 and 443 on inbound security rules.

&gt; sudo certbot --nginx -d stun.[your domain].com -d turn.[your domain].com
&gt; sudo certbot renew --dry-run

The first command obtain the certificate for the domains and place them on 
cert=/etc/letsencrypt/live/stun.[your domain].com/cert.pem
pkey=/etc/letsencrypt/live/stun.[your domain].com/privkey.pem

Let's get back to coturn, we have installed and stoped the coturn, Let's enable TURN server in the configuration file of coturn.
&gt; sudo nano /etc/default/coturn
and remove the # before TURNSERVER_ENABLED and press Ctl+O (write).

Let's work on etc/turnserver.config
backup first
&gt; sudo  mv /etc/turnserver.conf /etc/turnserver.conf.bk
edit it
&gt; sudo nano /etc/turnserver.conf
</pre> 

 
<pre class="lang:default decode:true " ># /etc/turnserver.conf
# STUN server port is 3478 for UDP and TCP, and 5349 for TLS.
# Allow connection on the UDP port 3478
listening-port=3478
# and 5349 for TLS (secure)
tls-listening-port=5349

# Require authentication
fingerprint
lt-cred-mech

# We will use the longterm authentication mechanism, but if
# you want to use the auth-secret mechanism, comment lt-cred-mech and 
# uncomment use-auth-secret
# Check: https://github.com/coturn/coturn/issues/180#issuecomment-364363272
#The static auth secret needs to be changed, in this tutorial
# we'll generate a token using OpenSSL
# use-auth-secret
# static-auth-secret=replace-this-secret
# ----
# If you decide to use use-auth-secret, After saving the changes, change the auth-secret using the following command:
# sed -i "s/replace-this-secret/$(openssl rand -hex 32)/" /etc/turnserver.conf
# This will replace the replace-this-secret text on the file with the generated token using openssl. 

# Specify the server name and the realm that will be used
# if is your first time configuring, just use the domain as name
server-name=[your domain].com
realm=[your domain].com

# Important: 
# Create a test user if you want
# You can remove this user after testing
user=testing:password123

total-quota=100
stale-nonce=600

# Path to the SSL certificate and private key. In this example we will use
# the letsencrypt generated certificate files.
cert=/etc/letsencrypt/live/stun.[your domain].com/cert.pem
pkey=/etc/letsencrypt/live/stun.[your domain].com/privkey.pem

# Specify the allowed OpenSSL cipher list for TLS/DTLS connections
cipher-list="ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-SHA384"

# Specify the process user and group
proc-user=turnserver
proc-group=turnserver</pre> 

 
<pre class="lang:default decode:true " >the above conf is taken from https://ourcodeworld.com/.


&gt; sudo systemctl start coturn

Remember to Enable port 3478 and 5349 for TCP and UDP incoming connection.

We can test our STUN and TURN server from the tool on Trickle ICE. 
https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/

If you test a STUN server, it works if you can gather a candidate with type "srflx". If you test a TURN server, it works if you can gather a candidate with type "relay".

</pre> 
<img src="http://www.neverj.com/wp-content/uploads/2022/05/testing-STUN-and-TURN-server.png" alt="" width="1066" height="651" class="alignnone size-full wp-image-1384" />

[WebRTC] Setup STUN and TURN server on Ubuntu

<pre class="lang:default decode:true " >// change author
git commit --amend --author="AuthorName &lt;email@address.com&gt;"

// change date (current time or specify time)
git commit --amend --date="$(date -R)"
git commit --amend --date="Wed, 04 May 2022 17:55:05+0800"

// change message
git commit --amend -m "Your new message"</pre> 

 
<pre class="lang:default decode:true " >// If you want to change all commit's author

git config --global user.name "Your_New_Name"
git config --global user.email "new_email@address.com"

git rebase -i [committed_code] -x "git commit --amend --reset-author -CHEAD"
git rebase -i --root -x "git commit --amend --reset-author -CHEAD"

git push --force</pre>

[GIT] change commit author|date|message

<pre>
vi  ~/.bashrc
# add text to new line
alias ll=&quot;ls -l&quot;
# save

# refresh bashrc
source ~/.bashrc

#done
</pre>

[Docker] bash: ll: command not found

<pre>
After installed ESLint from your VS Code, you should create a new file &quot;.eslintrc&quot; into your project root path.

Then run &quot;yarn add --dev eslint prettier @react-native-community/eslint-config eslint-plugin-flowtype&quot;

Finally copy the below content into &quot;.eslintrc&quot;.
{
  &quot;extends&quot;: &quot;@react-native-community&quot;,
  &quot;rules&quot;: {
    &quot;quotes&quot;: [2, &quot;double&quot;, &quot;avoid-escape&quot;]
  }
}

Done!
</pre>

[VS Code] VS Code + React Native - ESLint

<h1>How to Enable Prettier code formatter</h1>

<p><img alt="" src="https://www.neverj.com/wp-content/uploads/2022/01/prettieformat1.png" style="height:672px; width:1920px" /></p>

<h1>How to run it after save automatically</h1>

<p><img alt="" src="https://www.neverj.com/wp-content/uploads/2022/01/prettieformat2.png" style="height:745px; width:1920px" /></p>

<h3>Done</h3>

[VS Code] - Prettier - Code formatter

<pre class="lang:default decode:true " >// When you update your project, sometimes you submitted a couple of commits but those were related to exactly one feature/function. At that moment you can group all the commits into one for explaining more clearly what you did.
// And you should do
git reset --soft [the remote branch]
// *** [--hard] will make your code change disappear and all coding will just be the same as the git remote branch.

// Output
# On branch XXXXXX
# Your branch is up to date with 'origin/XXXXXX'
# 
# Changes to be committed:
# (use "git reset HEAD &lt;file&gt;..." to unstage)
#    modified: xxxxxxxx
#    modified: xxxxxxxx

// Commit it at once finally
git commit -m "explain what did you do now"
git push

// Done</pre>

[GIT] undo commits and keep the changes [before pushed]

<pre class="lang:default decode:true " >// go back to the last 5 commit situation but all the latest code change still keeping here.
git rebase -i HEAD~5
// or you can rebase on old committed code
git rebase -i [committed_code]
// or you can rebase on root point
git rebase -i --root

// then the editor opened automatically, just update the list, change the second and following commits, replacing 'pick' with 's' then save it.
// the second &amp; following commit will be combined into the first commit then.

// edit rebase config
git rebase --edit-todo

// push to git
git push --force
or
git push origin +[your branch]
or 
git push origin/[your branch] --force</pre>

[GIT] rebase - group the commits after they have been pushed

<h3>The lower version of Chartjs is supported to Wkhtmltopdf</h3>

<h5>Please add "--javascript-delay [1000|2000|3000|...]" into your command for delay the pdf generating.</h5>

<pre class="lang:default decode:true " >//Demo

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.min.js"&gt;&lt;/script&gt;
&lt;style&gt;
    .reportGraph {width:900px;height: 900px;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="reportGraph"&gt;
    &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
\'use strict\';
(function(setLineDash) {
    CanvasRenderingContext2D.prototype.setLineDash = function() {
        if(!arguments[0].length){
            arguments[0] = [0,0];
        }
        return setLineDash.apply(this, arguments);
    };
})(CanvasRenderingContext2D.prototype.setLineDash);
function drawGraphs() {
    new Chart(
        document.getElementById("canvas"), {
            "responsive": false,
            "type":"pie",
            "data":{
                "labels":["January","February","March","April","May","June","July"],
                "datasets":[
                    {
                        "label":"My First Dataset",
                        "data":[65,59,80,81,56,55,40],
                        backgroundColor: [
                            window.chartColors.red,
                            window.chartColors.orange,
                            window.chartColors.yellow,
                            window.chartColors.green,
                            window.chartColors.blue,
                            window.chartColors.grey,
                            window.chartColors.purple,
					    ],
                        "borderColor":"rgb(75, 192, 192)"
                    }
                ]
            },
            options: {
                animation: {
                    duration: 0, // general animation time
                },
                hover: {
                    animationDuration: 0, // duration of animations when hovering an item
                },
                responsiveAnimationDuration: 0, // animation duration after a resize
            }
        }
    );
}
window.chartColors = {
	red: \'rgb(255, 99, 132)\',
	orange: \'rgb(255, 159, 64)\',
	yellow: \'rgb(255, 205, 86)\',
	green: \'rgb(75, 192, 192)\',
	blue: \'rgb(54, 162, 235)\',
	purple: \'rgb(153, 102, 255)\',
	grey: \'rgb(201, 203, 207)\'
};
window.onload = function() {
    drawGraphs();
};
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

[Wkhtmltopdf] using chart working fine

<p>&nbsp;<br />
&lt;pre class=&quot;lang:default decode:true &quot; &gt;crontab -e</p>

<p>0 23 * * * /usr/local/sbin/rsync_to_other_server.sh<br />
&lt;/pre&gt;&nbsp;</p>

<p>&nbsp;<br />
&lt;pre class=&quot;lang:default decode:true &quot; &gt;vi /usr/local/sbin/rsync_to_other_server.sh</p>

<p>#!/bin/sh<br />
rsync -avzp -e &quot;ssh -p 22&quot; /this_server_folder_path/folder user@172.0.0.1:/the_server_folder_path/&lt;/pre&gt;&nbsp;<br />
&nbsp;</p>

[Linux] Cronjob rsync

Phase 1:
In Google Tag Manager, go to Variables > New > Custom JavaScript and paste the following code:
 
<pre class="lang:default decode:true " >function () {
var video = document.getElementsByTagName('video').length;
	if (video &gt; 0) {
      return true;
    }
	else {
      return false;
    }
}</pre> 

And Name this variable as "cjs – is HTML5 Video on a page".

Phase 2:
Then go to Triggers > New:
In Trigger Configuration
Trigger Type => "Page View - Window Loaded"
This trigger fires on "Some Window Loaded Event"
Fire this trigger when an Event occurs and all of these conditions are true:
"cjs – is HTML5 Video on a page" equals "true"
And Name this trigger as "Pageview - HTML5 Video Player is Present".

Phase 3:
Tags > New
Select "Custom HTML"
then paste the following code:
 
<pre class="lang:default decode:true " >&lt;script&gt;
// Let's wrap everything inside a function so variables are not defined as globals 
(function() {
    // This is gonna our percent buckets ( 25%-75% ) 
    var divisor = 25;
    // We're going to save our players status on this object. 
    var videos_status = {};
    // This is the funcion that is gonna handle the event sent by the player listeners 
    function eventHandler(e) {
        switch (e.type) {
            // This event type is sent everytime the player updated it's current time, 
            // We're using for the % of the video played. 
        case 'timeupdate':
            // Let's set the save the current player's video time in our status object 
            videos_status[e.target.id].current = Math.round(e.target.currentTime);
            // We just want to send the percent events once 
            var pct = Math.floor(100 * videos_status[e.target.id].current / e.target.duration);
            for (var j in videos_status[e.target.id]._progress_markers) {
                if (pct &gt;= j &amp;&amp; j &gt; videos_status[e.target.id].greatest_marker) {
                    videos_status[e.target.id].greatest_marker = j;
                }
            }
            // current bucket hasn't been already sent to GA?, let's push it to GTM
            if (videos_status[e.target.id].greatest_marker &amp;&amp; !videos_status[e.target.id]._progress_markers[videos_status[e.target.id].greatest_marker]) {
                videos_status[e.target.id]._progress_markers[videos_status[e.target.id].greatest_marker] = true;
                dataLayer.push({
                    'event': 'video',
                    'video_status': 'progress',
                    'video_provider' : 'generic html5 video player',
                    'video_percent': videos_status[e.target.id].greatest_marker,
                    // We are sanitizing the current video src string, and getting just the video name part
                    'video_title': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1])
                });
            }
            break;
            // This event is fired when user's click on the play button
        case 'play':
            dataLayer.push({
                'event': 'video',
                'video_status' : 'play',
                'video_provider' : 'generic html5 video player',
                'video_percent': videos_status[e.target.id].greatest_marker,
                'video_title': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1])
            });
            break;
            // This event is fied when user's click on the pause button
        case 'pause':
            if (videos_status[e.target.id].greatest_marker &lt; '75') {
            dataLayer.push({
                'event': 'video',
                'video_status' : 'pause',
                'video_provider' : 'generic html5 video player',
                'video_percent': videos_status[e.target.id].greatest_marker,
                'video_title': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1])
            });
            }
            break;
            // If the user ends playing the video, an Finish video will be pushed ( This equals to % played = 100 )  
        case 'ended':
            dataLayer.push({
                'event': 'video',
                'video_status' : 'complete',
                'video_provider' : 'generic html5 video player',
                'video_percent': '100',
                'video_title': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1])
            });
            break;
        default:
            break;
        }
    }
    // We need to configure the listeners
    // Let's grab all the the "video" objects on the current page     
    var videos = document.getElementsByTagName('video');
    for (var i = 0; i &lt; videos.length; i++) {
        // In order to have some id to reference in our status object, we are adding an id to the video objects
        // that don't have an id attribute. 
        var videoTagId;
        if (!videos[i].getAttribute('id')) {
            // Generate a random alphanumeric string to use is as the id
            videoTagId = 'html5_video_' + Math.random().toString(36).slice(2);
            videos[i].setAttribute('id', videoTagId);
        }// Current video has alredy a id attribute, then let's use it &lt;img draggable="false" class="emoji" alt="?" src="https://s.w.org/images/core/emoji/2/svg/1f642.svg"&gt;
        else {
            videoTagId = videos[i].getAttribute('id');
        }
        // Video Status Object declaration  
        videos_status[videoTagId] = {};
        // We'll save the highest percent mark played by the user in the current video.
        videos_status[videoTagId].greatest_marker = 0;
        // Let's set the progress markers, so we can know afterwards which ones have been already sent.
        videos_status[videoTagId]._progress_markers = {};
        for (j = 0; j &lt; 100; j++) {
            videos_status[videoTagId].progress_point = divisor * Math.floor(j / divisor);
            videos_status[videoTagId]._progress_markers[videos_status[videoTagId].progress_point] = false;
        }
        // On page DOM, all players currentTime is 0 
        videos_status[videoTagId].current = 0;
        // Now we're setting the event listeners. 
        videos[i].addEventListener("play", eventHandler, false);
        videos[i].addEventListener("pause", eventHandler, false);
        videos[i].addEventListener("ended", eventHandler, false);
        videos[i].addEventListener("timeupdate", eventHandler, false);
        videos[i].addEventListener("ended", eventHandler, false);
    }
})();
&lt;/script&gt;</pre> 
And Name this tag as "cHTML - HTML5 Video Listener".

Add Google Tag Manager code into <head> & <body>.

This setting will help the browser to set variables about the current website that contains any video tag after the window load successfully. if true, the video listener script will apply to each video tag.

If the concept is fine, we are now to add 4 variables to pushing to GA Event.

We go to Variables > New:
Using Data Layer Variable, and name it video_status, folder name can use the same name, then press save.
Using Data Layer Variable, and name it video_provider, folder name can use the same name, then press save.
Using Data Layer Variable, and name it video_percent, folder name can use the same name, then press save.
Using Data Layer Variable, and name it video_title, folder name can use the same name, then press save.

After that, let go Triggers > New.
Name it as "Custom - Video Interaction"
We are choosing the trigger type "Custom Event"
Set Event name to "video"
this trigger fire on "All Custom Events" is fine.

If you added the trigger item. let do the last setting.

go to Tags > New
and choosing GA4 event
Name it as "GA4 event - video"
Configuration Tag is "None - Manually Set ID"
(Go to Google Analytics > Admin > Data Streams > Web > copy the measurement id) if there is empty please add a new stream for it.
Event Name is "video_{{video_status}}"
Add 3 more item to Event Parameters
Parameter Name    Value
video_provider    {{video_provider}}
video_percent     {{video_percent}}
video_title       {{video_title}}
Apply Triggering for this tag "Custom - Video Interaction"
Done.

Reference Link Here <a href="https://www.analyticsmania.com/post/track-html5-video-player-with-google-analytics-4-and-google-tag-manager/">Analytics mania</a>

Google Analytics 4 Track HTML5 Video

<pre class="lang:default decode:true " >&lt;?php

	//prevent GET/POST getting script impact
	if(!function_exists('cleanData')){
	    function cleanData($data){
	        $data = htmlspecialchars($data,ENT_QUOTES,'UTF-8');
	        return $data;
	    }
	}
	if(isset($_GET)){
	    foreach ($_GET as $key=&gt;$val){
	    	$_GET[$key] = cleanData($val);
	    }
	}
	if(isset($_POST)){
	    foreach ($_POST as $key=&gt;$val){
	    	$_POST[$key] = cleanData($val);
	    }
	}

?&gt;

&lt;?php

	header("X-Content-Type-Options: nosniff");
	header("X-XSS-Protection: 1; mode=block");
	header("Permissions-Policy: camera=(), fullscreen=self, geolocation=*, microphone=(self)");

	//Allow below domain embed this link into iframe
	$arrUrl = [
		"www.allowedIframeThisLinkDomain1.com",
		"www.allowedIframeThisLinkDomain2.com",
		"www.allowedIframeThisLinkDomain3.com",
	];
	//Support IE
	if(count($arrUrl)&gt;0){
		foreach ($arrUrl as $url) {
			header("X-Frame-Options: allow-from https://".$url);
			header("X-Frame-Options: allow-from http://".$url);
		}
	}else{
		if( canEmbedInSelfDomainname ){
			header("X-Frame-Options: SAMEORIGIN");
		}else{
			header("X-Frame-Options: DENY");
		}
	}
	//Support Chrome, Safari, Firefox
        //detail please go to https://www.neverj.com/content-security-policy-csp/
	if(count($arrUrl)&gt;0){
		header("Content-Security-Policy: default-src 'self' *.firebase.com *.google-api.com; frame-ancestors ".implode(" ", $arrUrl).";");
	}else{
		header("Content-Security-Policy: default-src 'self' *.firebase.com *.google-api.com");
	}

?&gt;
</pre> 

About Content-Security-Policy please go to <a href="./content-security-policy-csp/" rel="noopener" target="_blank">Content Security Policy (CSP)</a>

 
<pre class="lang:default decode:true " >Set secure header faster template For response json

&lt;?php
    header('Content-Type: application/json');
    header('X-Frame-Options: SAMEORIGIN');
    header('X-XSS-Protection: 1; mode=block');
    header('X-Content-Type-Options: nosniff');
    header('Expect-CT: max-age=86400');
    header('Access-Control-Allow-Origin: '.(isset($_SERVER['HTTPS']) &amp;&amp; $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://" . $_SERVER['HTTP_HOST'] );
    header('Strict-Transport-Security: maxage=3600');
    header('Access-Control-Allow-Methods: GET');
    header('Cache-Control: no-store');
    header('Pragma: no-cache');
    header('Referrer-Policy: no-referrer');
    header('Permissions-Policy: geolocation=self');
    header("Content-Security-Policy: default-src 'self'");
    //redirect to https
    if ($_SERVER['HTTP_X_FORWARDED_PROTO'] == 'http' &amp;&amp; $_SERVER['HTTP_X_FORWARDED_PORT'] == '80'){
        header('Location: https://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF']);
        exit;
    }
?&gt;
</pre>

[PHP] Header for website security policy

<pre class="lang:default decode:true " >//Please install wp-cli
https://www.neverj.com/linux-how-to-install-wp-cli/

//Please install Loco Translate plugin to your wordpress

//create pot file
wp i18n make-pot . [textdomain].pot

why don't using Loco Translate to create pot, coz it can't scanning all js file which is containing wp.i18n function. So the pot file will be get the php translate line only. This is the reason.

//create po file
after install Loco Translate then click inside and select your translate target
after that select the language you have to make it. done.

//update po file
use Loco Translate to add the new language content then save. the translation json file will be created automatically.

//All file Done.

//then program
wp_register_script([js_name],[js_file_path],['wp-i18n','...'],[file_version]);
wp_enqueue_script([js_name]);
wp_set_script_translations(
        '[js_name]',    //script_name
        '[text_domain]',                  //text domain
        '[path_of_the_translate_file]'  //json path, no need point file. Just folder is fine. And make sure the path is correct.
    );

//All Done.

//Suggestion
//after all action, you can move the translate file(pot/po/mo/json) into lang folder for easier manage.





</pre>

[Wordpress] i18n works with gutenberg & js

<pre class="lang:default decode:true " >// Download wp-cli phar, can download from https://wp-cli.org/
curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

// put it to bin
chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp

// done. check the version
wp --info

***
Please install PHP for your server then run wp-cli
***
PHP Fatal error:  Uncaught Error: Call to undefined function json_encode()
Please install php-json to solve it.
***
Please install php-mbstring for support i18n making pot.
</pre>

[Linux] How to install WP CLI

<pre class="lang:default decode:true " >//All of the First Step
sudo apt-get install vsftpd ||
sudo dnf install vsftpd ||
sudo yum install vsftpd

//Second for edit configuration
sudo vi /etc/vsftpd.conf
The biggest change you need to make is to switch the Anonymous_enable from YES to NO:
anonymous_enable=NO
local_enable=YES
write_enable=YES
//For bring all user who login success to the root directory.
chroot_local_user=YES

//Third to add user
Ref: https://www.neverj.com/linux-add-user-set-to-sudo/
And set the right permission for them

//Final to kick the source restart XD
sudo service vsftpd restart

Done.


</pre>

[Linux] How to install FTP

<pre class="lang:default decode:true " >sudo dnf module list nodejs

Output
Name                     Stream                   Profiles                                                Summary
nodejs                   10 [d]                   common [d], development, minimal, s2i                   Javascript runtime
nodejs                   12                       common, development, minimal, s2i                       Javascript runtime

//Two streams are available, 10 and 12. The [d] indicates that version 10 is the default stream. If you’d prefer to install Node.js 12, switch module streams now:
sudo dnf module enable nodejs:12

sudo dnf install nodejs

node --version

Output
v12.13.1

Installing the nodejs package should also install the npm Node Package Manager utility as a dependency. Verify that it was installed properly as well:

npm --version

Output
6.12.1</pre> 

For some issue, the webpack is not working well, please do the following and try.
 
<pre class="lang:default decode:true " >npm uninstall webpack-dev-server --save
npm uninstall webpack-cli --save
npm uninstall webpack --save

//then
npm install --save-dev webpack@4.2.0 webpack-cli@2.0.12 webpack-dev-server@3.1.1
npm run dev

//run</pre>

[Linux] How to install Nodejs in CentOS 8

<pre class="lang:default decode:true " ># This command for using the production configuration as default
# Then can make the error log appear to "docker logs -f php"

RUN mv "$PHP_INI_DIR/php.ini-production" "$PHP_INI_DIR/php.ini"</pre>

[Docker] php no error.log?

<pre class="lang:default decode:true " >//For Nginx
certbot --nginx -d tools.letgoaltech.com</pre> 

*** Please be aware to cut-off the CDN first Or you will get the "Challenge failed for domain" Error.

[Certbot] Create cert for new domain for NGINX

<pre class="lang:default decode:true " >RewriteEngine On
RewriteBase /

## direct all http to https
RewriteCond %{HTTP:X-Forwarded-Proto} =http
RewriteRule .* https://%{HTTP:Host}%{REQUEST_URI} [L,R=permanent]
</pre> 

<pre class="lang:default decode:true " >RewriteEngine On
## rewrite query string to path
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^/?test/(.*?)/?$ /test.php?name=$1 [L]

</pre> 

<pre class="lang:default decode:true " >
RewriteEngine On

## Block the file access
RedirectMatch 403 ^/image/file$
RedirectMatch 403 ^/file.jpg$
RedirectMatch 403 ^/image/file.jpg$
</pre> 

<pre class="lang:default decode:true " >RewriteEngine On

## Redirect weird URL to index
## e.g. www.abcdefg.com/folder/test.php/12345
RewriteRule ^(.*).php/(.*) /index.php [R=301,L]
</pre> 

<pre class="lang:default decode:true " >RewriteEngine On

## Normal Security Policy
<IfModule mod_headers.c>
	Header always append X-Frame-Options SAMEORIGIN // DENY | SAMEORIGIN | https://www.yourdomain.com
	Header set X-XSS-Protection "1; mode=block"
	Header set X-Content-Type-Options "nosniff"
	Header unset X-Forwarded-Host
	Header always set Content-Security-Policy "upgrade-insecure-requests;"
	Header set Access-Control-Allow-Origin "*" // * | https://www.yourdomain.com
	Header set Access-Control-Allow-Methods: "POST, GET" // PUT, POST, GET, OPTIONS, DELETE
	Header set Access-Control-Allow-Headers: "Oring, X-Requested-With, Content-Type, Authorization" // Oring, X-Requested-With, Content-Type, Accept, Authorization
</IfModule>

</pre>

[PHP] .htaccess

docker-compose.yml should getting
<pre class="lang:default decode:true " >...
services:
  nginx:
    image: nginx:stable-alpine
    container_name: nginx
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ...
      - $PWD/certbot/conf:/etc/nginx/ssl
      - $PWD/certbot/data:/usr/share/nginx/html/letsencrypt
    ...

  certbot:
    image: certbot/certbot:latest
    command: certonly --webroot --webroot-path=/usr/share/nginx/html/letsencrypt --email email@gmail.com --agree-tos --no-eff-email --staging -d [your domain]
    volumes:
      - $PWD/certbot/conf:/etc/letsencrypt
      - $PWD/certbot/logs:/var/log/letsencrypt
      - $PWD/certbot/data:/usr/share/nginx/html/letsencrypt
    ...</pre> 

And please edit your nginx conf 
*** comment all the location code unless "location ~ /.well-known/acme-challenge {"
 
<pre class="lang:default decode:true " >server {
    server_name [your domain];
    listen 80;
    root  [project path];

    index index.php index.html index.htm;

    location ~ /.well-known/acme-challenge {
         allow all; 
         root /usr/share/nginx/html/letsencrypt;
    }
}</pre> 

then run docker-compose up -d

if certbot success, you can find the fold "cd certbot/conf/live/[your domain]"

And update the nginx conf again

 
<pre class="lang:default decode:true " >server {
    listen [::]:80;
    listen 80;

    server_name [your domain];

    location ~ /.well-known/acme-challenge {
         allow all; 
         root /usr/share/nginx/html/letsencrypt;
    }

    # redirect http to https
    return 301 https://[your domain]$request_uri;
}

server {
    listen [::]:443 ssl http2;
    listen 443 ssl http2;

    server_name [your domain];

    # SSL code
    ssl_certificate /etc/nginx/ssl/live/[your domain]/fullchain.pem;
    ssl_certificate_key /etc/nginx/ssl/live/[your domain]/privkey.pem;

    client_max_body_size 20M;
    root  [project path];

    index index.php index.html index.htm;
    
    if (!-e $request_filename) {
        rewrite ^(.+)$ /index.php?q=$1 last;
    }

    location ~ .php$ {
            #try_files $uri =404;
            fastcgi_pass php:9000;
            fastcgi_index index.php;
            include  fastcgi_params;
            fastcgi_split_path_info       ^(.+\.php)(/.+)$;
            fastcgi_param PATH_INFO       $fastcgi_path_info;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            #fastcgi_read_timeout 300;
    }
} </pre>

*** If you do it for wordpress, please install "Really Simple SSL" & "CloudFlare Flexible SSL Plugin" plugin first, then follow the instruction to fix all issue.

[Docker] nginx + certbot get 404 / not work

Install plugin request providing FTP...
<pre class="lang:default decode:true " >//edit wp-config.php
define('FS_METHOD', 'direct');
//chmod -R 777 wp-content/
//chmod -R 777 wp-content/plugins/
//chmod -R 777 wp-content/upgrade/
//chmod 777 ../wordpress/

</pre> 

Use Cloudflare SSL get too many redirect
please go to install plugin "Really Simple SSL" & "CloudFlare Flexible SSL Plugin" then activate it.

[Wordpress] tips

<pre class="lang:default decode:true " >//when you get your vm with centos8
//download the source
dnf config-manager --add-repo=https://download.docker.com/linux/centos/docker-ce.repo

//install it
dnf install docker-ce docker-ce-cli containerd.io

//Start the Docker service and add it to autorun.
systemctl enable --now docker

//install firewall for detail: https://www.digitalocean.com/community/tutorials/how-to-set-up-a-firewall-using-firewalld-on-centos-8
sudo dnf install firewalld
sudo systemctl enable firewalld
sudo systemctl start firewalld
sudo firewall-cmd --state
#running

//CentOS 8 uses a firewall other than Docker. Hence, if you have firewalld enabled, you need to add a masquerade rule to it.
firewall-cmd --zone=public --add-masquerade --permanent
firewall-cmd --reload

//install docker compose
curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

//Make it executable.
chmod +x /usr/local/bin/docker-compose

//put it to bin
cp /usr/local/bin/docker-compose /bin/docker-compose

//To be able to use Docker as a non-root user, you must add that user to the docker group.
usermod -aG docker [username]

//restart docker one more time for firewall update
service docker restart

//run your docker
//done
//start up docker task
docker-compose up -d
//start up but can see all script & error
docker-compose up
//list docker item
docker ps
//list all docker item even closed
docker ps
//exec in some docker item
docker-compose exec [docker-item-name] nginx -t
docker-compose exec [docker-item-name] php artisan key:generate
//restart one container only with docker-compose
docker-compose restart [docker-item-name]
//restart one container only with docker-compose (set the time to wait for stop before killing the container (in seconds)
docker-compose restart -t 30 [docker-item-name]
//go inside to docker item
docker exec -it [docker-item-name] bash
//go inside to docker item as root
//for php
docker exec -u 0 -it [docker-item-name] bash
//for restart php-fpm
kill -USR2 1
//for nginx
docker exec -it [docker-item-name] /bin/sh
//stop all docker task
docker-compose down
//stop all docker task also remove the image
docker-compose down --rmi all
//check processing port in server
sudo netstat -tulpn | grep LISTEN
sudo ss -tulpn | grep LISTEN
//list installed images
docker images
//remove image
docker image rm [id]
//remove all image
docker image prune -a
//list installed containers
docker ps
//remove container
docker rm [id]

</pre>

[Docker] begin start for centos8

<pre class="lang:default decode:true " >//add user
sudo useradd [username]
or
//Use the -m to create the user home directory as /home/[username]
sudo useradd -m [username]

//if need to set password
sudo passwd [username]
#Changing password for user.
#New password:
#Retype new password:
#passwd: all authentication tokens updated successfully.

//add to sudo
//for centos
usermod -aG wheel username
//for ubuntu
usermod -aG sudo username

//add ssh key to signin
make file to /home/[username]/.ssh/authorized_keys
then add public key into that file. Done.

//sometime, you create an user and you can login successfully, but you can't use common command (e.g. tab auto/vi...)
When you add a user with useradd there is no special shell added.
You can see this with the command:cat /etc/passwd
The new user is no special shell added.
To fix this you can:
chsh -s /bin/bash [the new username]
and the "/bin/bash" just reference the root one.

</pre>

[Linux] add User & set to sudo & ssh

<pre class="lang:default decode:true " >//create new branch
git checkout -b NewBranchName

//See all branch information
git branch -av

//Delete local branch only
git branch -d BranchName

//Delete remote branch on git
git branch -av
  master                              ef20177 add abc
* newBranch                           0c1d821 add 123
  remotes/origin/master               ef20177 add abc
  remotes/origin/newBranch            0c1d821 add 123

//Don't stay at the branch that you want to delete it, please checkout to another branch
git checkout master
//Then delete it
git push origin --delete newBranch</pre>

[GIT] branch

<pre class="lang:default decode:true " >//Cherry pick use for getting any commit which is you want to own it in your working branch.
//For instance Staging branch has committed item (A,B,C,D), when you are in another branch and just cherry-pick the commit B from Staging branch, your current branch will just merge with that commit only, so the commit A,C,D will just ignore from the process.

//Let Start
//I am working on `master` branch right now.
//Ray updated the program file at `develop` branch there is 10 committed item on git
//and now I have to get the second last commit change to add into `master` branch only.
//So I will do it like,

git fetch
git checkout master
git cherry-pick COMMIT-HASH-OF-THE-SECOND-LAST-COMMIT
git push origin master/git push

//DONE, then the other 9 commit will just be ignored. we only pick the second last content change.
//Cheers</pre>

[GIT] cherry-pick

Convert:
<pre class="lang:default decode:true ">// mov to mp4

ffmpeg -i inputfile.mov -c:v libx264 -c:a aac -vf format=yuv420p -movflags +faststart outputfile.mp4;

//mp4 to gif

ffmpeg -i inputfile.mp4 -pix_fmt rgb24 outputfile.gif;</pre>
Do Loop:
<pre class="lang:default decode:true ">//cd to directory

for file in *.mp4; do ffmpeg -i "$file" -pix_fmt rgb24 "${file%.mp4}".gif; done</pre>
Do remove space from name file:
<pre class="lang:default decode:true ">//cd to directory

for file in *.gif; do mv "$file" "${file// /_}"; done</pre>

[ffmpeg] Using and Convent Function

How to solve:

 
<pre class="lang:default decode:true " >#Just you config your netbeans.conf file, you can find it on:
/Applications/NetBeans/NetBeans[version]/Contents/Resources/NetBeans/etc/netbeans.conf

#Then need to uncomment
netbeans_jdkhome="/path/to/jdk"

#And update your path to JDK, you will find yours at:
/Library/Java/JavaVirtualMachines/jdk[version]/Contents/Home

#Just save it, restart NetBeans and you are done!</pre>

[Mac] Netbeans "turning on modules" crash

首先，下載資源：
<pre class="lang:default decode:true " >dnf install dnf-utils http://rpms.remirepo.net/enterprise/remi-release-8.rpm</pre> 

然後，安裝PHP：
 
<pre class="lang:default decode:true " >#取得所有可安裝的 PHP 版本列表，預設的版本為 PHP 7.2：
dnf module list php

#Extra Packages for Enterprise Linux Modular 8 - x86_64                                                           39 kB/s | 116 kB     00:02
#Extra Packages for Enterprise Linux 8 - x86_64                                                                  1.2 MB/s | 6.2 MB     00:05
#Remi's Modular repository for Enterprise Linux 8 - x86_64                                                        20 kB/s | 540 kB     00:27
#Safe Remi's RPM repository for Enterprise Linux 8 - x86_64                                                       31 kB/s | 1.4 MB     00:45
#CentOS-8 - AppStream
#Name                      Stream                       Profiles                                       Summary
#php                       7.2 [d]                      common [d], devel, minimal                     PHP scripting language
#php                       7.3                          common, devel, minimal                         PHP scripting language
#
#Remi's Modular repository for Enterprise Linux 8 - x86_64
#Name                      Stream                       Profiles                                       Summary
#php                       remi-7.2                     common [d], devel, minimal                     PHP scripting language
#php                       remi-7.3                     common [d], devel, minimal                     PHP scripting language
#php                       remi-7.4                     common [d], devel, minimal                     PHP scripting language
#
#提示：預設[d]、已啟用[e]、已停用[x]、已安裝[i]

#依據上述 PHP 列表來啟用要安裝的 PHP 版本，這裡啟用 PHP 7.4：
dnf module reset php
dnf module enable php:remi-7.4

#安裝：
dnf install php
</pre> 

移除PHP：
 
<pre class="lang:default decode:true " >#dnf
sudo dnf list php
sudo dnf remove php*

或

#yum
sudo yum list installed | grep php
sudo yum -y remove php*</pre>

[Linux] CentOS install PHP7.4

We need PHP and sudo permission to do that.

This is faster flow for installing composer.
 
<pre class="lang:default decode:true " ># to install php cli and zip:
sudo dnf install php-cli php-json php-zip curl unzip

# using curl to get install and install it by using php
curl -sS https://getcomposer.org/installer |php

# move composer into your target
sudo mv composer.phar /usr/local/bin/composer
</pre> 

And the general flow here.

 
<pre class="lang:default decode:true " ># To install php cli and other source
sudo dnf install php-cli php-json php-zip wget unzip

# Download composer-setup file
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

# The following wget command will download the latest Composer signature from Composer’s Github page, and then store it as a variable named HASH.
HASH="$(wget -q -O - https://composer.github.io/installer.sig)"

# To verify whether the installation script is damaged, run the following command
php -r "if (hash_file('SHA384', 'composer-setup.php') === '$HASH') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

# Verified result
Installer verified

# Move the installed composer to your target
sudo php composer-setup.php --install-dir=/usr/local/bin --filename=composer

# Check composer version
composer -V
Composer version 1.10.1 2020-03-13 20:34:27
</pre>

[Linux] How to install Composer in CentOS 8

在使用docker時，有時候我們需要編輯配置文件，需要使用vim或者vi命令，但是會發現：
<pre class="lang:default decode:true ">bash: vi: command not found</pre>
主要因為vim沒有安裝，使用如下命令安裝：
<pre class="lang:default decode:true ">apt-get install vim</pre>
一般而言，又會出現如下問題：
<pre class="lang:default decode:true ">Reading package lists... Done
Building dependency tree       
Reading state information... Done
E: Unable to locate package vim</pre>
此時需要：
<pre class="lang:default decode:true ">apt-get update</pre>
然後再：
<pre class="lang:default decode:true ">apt-get install vim</pre>
搞掂

[Docker] bash: vi: command not found

<h2>Videojs 播放RTMP協議和HLS協議的視頻流</h2>
&nbsp;
<h3>RTMP</h3>
RTMP協議（Real Time Messaging Protocol）是一種流媒體傳輸協議，是直播APP中最常用的流媒體傳輸協議，它最主要的優勢就是低延時。

RTMP 協議進行數據傳輸時，它是一整條數據流被封裝成FLV通過HTTP提供出去，因此在服務器不會有落地文件，基於TCP 長連接，不需要多次建連，所以延時通常為1 -3s，遠超HLS。
<h3>HLS</h3>
HTTP Live Streaming協議被縮寫為HLS，是蘋果公司發布的基於HTTP的流媒體傳輸協議（因此蘋果的所有系統都支持HLS）。

其工作原理是切片式傳輸，把直播流切成無數片，用戶在觀看視頻時，每次客戶端可以只下載一部分，然後在這部分播放時從許多不同的備用源中下載其他資源，因此HLS協議可以任由用戶的意願選擇不同的碼率。
<h3>播放RTMP協議</h3>
<blockquote>video.js 5.x以下版本，Flash技術是Video.js核心存儲庫的一部分,無需引入。
video.js 6.x以上版本，Flash被剝離，需要單獨引入videojs-flash.js，否則無法播放。</blockquote>
<pre class="lang:default decode:true">&lt;head&gt;
    &lt;title&gt;播放器&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link href="public/video-js.css" rel="stylesheet"&gt;
    &lt;script src="public/video.js"&gt;&lt;/script&gt;
    //rtmp協議基於flash，需要引入videojs-flash.js
    &lt;script src="public/videojs-flash.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;video id='myvideo' width=960 height=540 class="video-js vjs-default-skin"&gt;
    &lt;source src="rtmp://xxxxxxxx/streamname"&gt;
&lt;/video&gt;
&lt;/body&gt;
&lt;script&gt;

    window.onload = function () {
        let player = videojs('myvideo', {}, function () {
            console.log('videojs播放器初始化成功')
        });
        player.play();

    };
&lt;/script&gt;</pre>
&nbsp;
<h3>播放HLS協議</h3>
<blockquote>video.js6.0版本需要引入videojs-http-streaming.js
video.js7.0以上版本無需引入</blockquote>
<pre class="lang:default decode:true">&lt;head&gt;
    &lt;title&gt;播放器&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link href="public/video-js.css" rel="stylesheet"&gt;
    &lt;script src="public/video.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;video id='myvideo' width=960 height=540 class="video-js vjs-default-skin"&gt;
    &lt;source src="https://xxxxxxx.xxx/xxxxx.m3u8"&gt;
&lt;/video&gt;
&lt;/body&gt;
&lt;script&gt;

    window.onload = function () {
        let player = videojs('myvideo', {}, function () {
            console.log('videojs播放器初始化成功')
        });
        player.play();

    };
&lt;/script&gt;</pre>

Videojs 播放RTMP協議和HLS協議的視頻流

<h5>m3u8 是一種基於 HTTP Live Streaming 文件視頻格式，它主要是存放整個視頻的基本信息和分片(Segment)組成。目前 由 Apple.inc 率先提出的 HLS 協議在 Mac 的 Safari 上原生支持。</h5>
<h5>
而現時，只得Safari是原生支持HLS協議。 如果你的m3u8影片需要兼容所有的瀏覽器的話, 是有點難道。你需要知道 Chrome 和 Firefox 支持的 Media Source Extensions (MSE) 處於不理想的情況。</h5>
<h5>
但Youtube, Netfilx, Facebook又如何在chrome/Firefox上成功播放影片呢？</h5>
<h5>
它們都是採用HLS的解決方案，大致實現流程如下:
<img class="alignnone size-full wp-image-1117" src="http://www.neverj.com/wp-content/uploads/2020/11/hls_process.jpg" alt="" width="720" height="523" /></h5>
<h5>其核心就是在於對於 m3u8 的文件解析和通過 XHR 去完成對分片內容二進製文件的獲取，然後使用 MSE 的 appendBuffer 去進行 buffer 的封裝，然後自己完成合流的工作。</h5>
<h5>
而目前中國，bilibili是最早實現了基於MSE 解決方案的播放器，大概為什麼他們必須用MSE而不是優酷和騰訊的多video 方案，可能是資金，視頻轉MP4需要大量服務器，當然MSE這是技術的趨勢。</h5>
<h5>
如需要在Chrome和Firefox上播放m3u8的話，最好的建議是使用Video JS。它支持多個播放核心，而且插件非常多，你只需要使用videojs/videojs-contrib-hls 就可以了。在最新的版本上，它還準備好hls的功能，所以不用加上videojs/videojs-contrib-hls也已經可以播放m3u8影片。</h5>
<h5>
而使用詳細將會在另一篇文章講解。</h5>

HTML5 如何播放m3u8

macOS:
<a href="https://brew.sh/">Homebrew</a> users can use brew install hey.

hey runs provided number of requests in the provided concurrency level and prints stats.

But if you try to do the test with many connection just like 10k. We should be getting the error like:
<pre class="lang:default decode:true">Error distribution:
[xxxx] Get http://xx.xx: dial tcp xxxxxxxxx: socket: too many open files</pre>
Don't worry. Because you need to change your max file descriptors.
<pre class="lang:default decode:true ">//see your max file descriptors 
·&gt; ulimit -n
5000

//change it to be 10k
·&gt; ulimit -n 10000

//Done

/* Notes:
ulimit != ulimit -n

ulimit -a
-t: cpu time (seconds)              unlimited
-f: file size (blocks)              unlimited
-d: data seg size (kbytes)          unlimited
-s: stack size (kbytes)             8192
-c: core file size (blocks)         0
-v: address space (kbytes)          unlimited
-l: locked-in-memory size (kbytes)  unlimited
-u: processes                       1418
-n: file descriptors                4864
*/
</pre>
&nbsp;

It also supports HTTP2 endpoints.
<pre class="lang:default decode:true">Usage: hey [options...] &lt;url&gt;

Options:
  -n  Number of requests to run. Default is 200.
  -c  Number of workers to run concurrently. Total number of requests cannot
      be smaller than the concurrency level. Default is 50.
  -q  Rate limit, in queries per second (QPS) per worker. Default is no rate limit.
  -z  Duration of application to send requests. When duration is reached,
      application stops and exits. If duration is specified, n is ignored.
      Examples: -z 10s -z 3m.
  -o  Output type. If none provided, a summary is printed.
      "csv" is the only supported alternative. Dumps the response
      metrics in comma-separated values format.

  -m  HTTP method, one of GET, POST, PUT, DELETE, HEAD, OPTIONS.
  -H  Custom HTTP header. You can specify as many as needed by repeating the flag.
      For example, -H "Accept: text/html" -H "Content-Type: application/xml" .
  -t  Timeout for each request in seconds. Default is 20, use 0 for infinite.
  -A  HTTP Accept header.
  -d  HTTP request body.
  -D  HTTP request body from file. For example, /home/user/file.txt or ./file.txt.
  -T  Content-type, defaults to "text/html".
  -a  Basic authentication, username:password.
  -x  HTTP Proxy address as host:port.
  -h2 Enable HTTP/2.

  -host	HTTP Host header.

  -disable-compression  Disable compression.
  -disable-keepalive    Disable keep-alive, prevents re-use of TCP
                        connections between different HTTP requests.
  -disable-redirects    Disable following of HTTP redirects
  -cpus                 Number of used cpu cores.
                        (default for current machine is 8 cores)</pre>
Refer link <a href="https://github.com/rakyll/hey">https://github.com/rakyll/hey</a>.

[Linux] Test multi concurrency request with URL

Hi everyone, let me share some feelings here.

We always push the git commit by the client project and after that, the client always requests us to remove everything we did before...

<img src="http://www.neverj.com/wp-content/uploads/2020/10/dont_crazy.jpeg" alt="" width="512" height="288" class="alignnone size-full wp-image-1068" />

So we just need to rollback the git, it is frustrating, right?

But we also have to rollback that to the old status... Then here is the code.
 
<pre class="lang:default decode:true " >//Find the commit code in git
git reset --hard [The commit code that you want to go there]

//when you push, please remember to add --force
git push --force

//Done</pre> 

Hope every client please confirm your goal then assign it to the render.

[GIT] revert pushed commit

今天終於要使用AWS Lambda Function, 目的為了減輕Server負荷。

事不宜遲，去片。

先到AWS Lambda 開新Function（選擇你想使用的Language Node/Java/Python），本次用了Python進行CURL RETURN RESULT。
<a class="foobox" href="http://www.neverj.com/wp-content/uploads/2020/10/aws_lambda_0.png" rel="gallery">
<img class="alignnone size-full wp-image-1049" src="http://www.neverj.com/wp-content/uploads/2020/10/aws_lambda_0.png" alt="" width="2758" height="1222" />
</a>

&nbsp;

然後，進入Function 幫它插上SDK，這樣才能import request。
<a class="foobox" href="http://www.neverj.com/wp-content/uploads/2020/10/aws_lambda_1.png" rel="gallery">
<img class="alignnone size-full wp-image-1051" src="http://www.neverj.com/wp-content/uploads/2020/10/aws_lambda_1.png" alt="" width="2608" height="1084" />
</a>
<a class="foobox" href="http://www.neverj.com/wp-content/uploads/2020/10/aws_lambda_2.png" rel="gallery">
<img class="alignnone size-full wp-image-1053" src="http://www.neverj.com/wp-content/uploads/2020/10/aws_lambda_2.png" alt="" width="2562" height="1186" />
</a>
&nbsp;

再提供API Gateway，使Function擁有URL被Call。
<a class="foobox" href="http://www.neverj.com/wp-content/uploads/2020/10/aws_lambda_3.png" rel="gallery">
<img class="alignnone size-full wp-image-1047" src="http://www.neverj.com/wp-content/uploads/2020/10/aws_lambda_3.png" alt="" width="2596" height="1240" />
</a>
&nbsp;

最後 Develop program，Test program，Deploy program。
<a class="foobox" href="http://www.neverj.com/wp-content/uploads/2020/10/aws_lambda_4.png" rel="gallery">
<img class="alignnone size-full wp-image-1055" src="http://www.neverj.com/wp-content/uploads/2020/10/aws_lambda_4.png" alt="" width="2652" height="1108" />
</a>
<pre class="lang:default decode:true ">//Example

import json
from botocore.vendored import requests // Source from SDK
def lambda_handler(event, context):
    // get requester IP
    ip = event['requestContext']['http']['sourceIp'];

    res1 = requests.get('https://xxxxx.com/api/findMyCountry/'+ip)
    //  Start assumed result
        res1 =  {
                countryCode:"[YOUR COUNTRY]",
                xxxxxxx: "xxxx",
                xxxxxx: "xxxx",
                xxxxx: "xxxx",
            }
    //  End assumed result
    code = res1.json()['countryCode'];
    
    res2 = requests.get("https://xxx.com/api/findTotalUser")
    //  Start assumed result
        res2 =  9999;
    //  End assumed result
    total = res2;
    message = ""

    if total &gt; 9000:
        message = "Many User"
    elif total &lt; 1000:
        message = "Few User"

    if code == "XX":
        message = "You are not HK"
        status = 400;
    else:
        status = 200;

    return {
        "status":status,
        "message":message,
        "remark":"This is example"
    }</pre>
&nbsp;
完成！

***
現時(2020-10-29) AWS Lambda Function 可以提供 1000個concurrency limit.
如果你做緊個大Project既話，1000實在太少。
不過，你可以要求提升上限既。
只要去<a href="https://console.aws.amazon.com/support/home?#/" rel="noopener" target="_blank">Support ticket with AWS</a> 申請new support case.
選擇 "Service Limit Increase"..."Lambda as Limit type"... 填返D資料...最後等AWS回覆就搞掂。

AWS Lambda

One day, I tried to start a new node js program, nevertheless, it show me the error message:
 
<pre class="lang:default decode:true " >Error: listen EADDRINUSE :::12345
    at Object.exports._errnoException (xxxxxxxxxxxxx)
    at exports._exceptionWithHostPort (xxxxxxxxxxxxx)
    at Server._listen2 (xxxxxxxxxxxxx)
    at listen (xxxxxxxxxxxxx)
    at Server.listen (xxxxxxxxxxxxx)
    at Object.&lt;anonymous&gt; (xxxxxxxxxxxxx)
    at Module._compile (xxxxxxxxxxxxx)
    at Object.Module._extensions..js (xxxxxxxxxxxxx)
    at Module.load (xxxxxxxxxxxxx)
    at tryModuleLoad (xxxxxxxxxxxxx)</pre> 

So I just go to find out which program is using the same port:
 
<pre class="lang:default decode:true " >netstat -plunt |grep :12345</pre> 

And go to check that is there any node js program is executing already:
 
<pre class="lang:default decode:true " >ps -ef | grep node</pre> 

Bingo, there is some node js is performing, also one program that occupies the 12345 port.

Then I just kill the program and start my new program:
 
<pre class="lang:default decode:true " >kill [id]
node index.js</pre> 

However, I tried much time to kill the program, but It just rebuilds again and again. That I using the  
<pre class="lang:default decode:true " >ps -ef | grep node</pre> 
and find out that the user who is using "PM2" to start the program and added the watch function that why 'when the program down, it will start it again automatically'. So I have to find the user to stop it. because the program is abandon already.

Okay, then I try to start the program again and It works.

[Nodejs PM2] can't kill program, it will start after you kill automatically

CSP的出現可以一定程度的減少XSS的攻擊，但不一定意味著XSS的消失。

CSP是可以在一定程度上提高XSS的攻擊難度的，甚至杜絕XSS，則是CSP策略用的好。還要考慮CSP是否能夠充分利用，因為CSP在提供安全性的同時也提高了前端邏輯的複雜性度，很多資源需要調整，類似QQ，新浪微博，搜狐這樣的站群，想通過適當的CSP同時提高安全性和易用性是很難的。
<pre class="lang:default decode:true ">Example:
//只允許本站資源文件
Content-Security-Policy: default-src 'self'
//允许本站的资源以及任意位置的图片以及https://neverj.com下的資源文件
Content-Security-Policy: default-src 'self'; img-src *; script-src http://neverj.com;
</pre>
CSP主要從協議層把一些存在安全隱患的用法替換給幹掉

設定重點：
<ol>
<li>
CSP策略在默认的情况下是不允许使用data URIs资源的,如果要使用，那么需要显示的指定,比如:img-src 'self' data;
</li>
<li>
script-src：在處理腳本資源的時候設置“ unsafe-inline”可以阻止內聯Jss的執行。使用unsafe-eval開關可以禁止eval，setTimeout，setInterval函數的執行。某些Browser如要播放串流影片也要加放 blob:。
</li>
<li>
object-src：控制嵌入，代碼，存檔applet等對象。
</li>
<li>
style-src：會控製樣式表@import和rel時所保留的URI資源，設置不安全的內聯規則可以是瀏覽器拒絕解析內部樣式和內聯樣式定義。並且不會阻止鏈入外部樣式表。
</li>
<li>
img-src：可以控製圖片資源的連接，包括img標籤的src屬性，以及CSS3中的url（）和image（）方法，以及鏈接標籤中的href屬性（當rel設置成與圖像相關的值， HTML支持的圖標）
</li>
<li>
media-src：控制媒體類型的外部鏈入資源，例如視頻，音頻，源和和軌道標籤的src屬性。
</li>
<li>
frame-src：控制內嵌框架包含的外部頁面連接：iframe或框架。
</li>
<li>
font-src：控制CSS中的@font-face
</li>
<li>
connect-src：控制XMLHttpRequest中的open()，WebSocket，EventSource
</li>
<li>
child-src：框架
</li>
<li>
frame-ancestors：插入的外部資源（例如&lt;frame&gt;，&lt;iframe&gt;，&lt;embed&gt;和&lt;applet&gt;）
</li>
<li>
worker-src：worker脚本
</li>
<li>
manifest-src：manifest 文件
</li>
<li>
default-src：設置了上面各個選項的預設值
</li>
</ol>

而啟用CSP有兩種方法，Server side set header 跟 HTML meta tag。

Server side set header
<pre class="lang:default decode:true">Content-Security-Policy: 
script-src 'self'; 
object-src 'none'; 
style-src https://www.neverj.com http://www.hkitlife.com www.letgoaltech.com; 
child-src https:;
...</pre>
HTML meta tag
<pre class="lang:default decode:true">&lt;meta http-equiv ="Content-Security-Policy" content ="script-src 'self'; object-src'none'; style-src https://www.neverj.com http://www.hkitlife.com www.letgoaltech.com; child-src https:;" &gt;</pre>
上面的代碼中，CSP做瞭如下配置。
腳本：只信任當前域名&lt;object&gt;

標籤：不信任任何URL，即不加載任何資源

CSS：只信任https://www.neverj.com http://www.hkitlife.com www.letgoaltech.com

框架（frame）： 必須使用HTTPS協議加載

其他資源：沒有限制

启用后，不符合 CSP 的外部资源就会被阻止加载。

&nbsp;

default-src:
<pre class="lang:default decode:true">Content-Security-Policy: default-src 'self'</pre>
如果同時設置某個單項限制（例如font-src）和default-src，前者會覆蓋外殼，即字體文件會採用font-src的值 ，其他資源依然採用default-src的值。

&nbsp;

script-src的特殊值

除了常規值，script-src還可以設置一些特殊值。注意，下面這些值都必須放在單引號裡面。

unsafe-inline：允許執行頁面內嵌的script標籤和事件監聽函數

unsafe-eval：允許將字符串視為代碼執行，某種使用eval，setTimeout，setInterval和Function等函數

nonce值：每次HTTP響應都會授予一個令牌，頁面內嵌腳本必須有這個令牌，才會執行

hash值：列出允許執行的腳本代碼的哈希值，頁面內嵌腳本的哈希值只有吻合的情況下，才能執行
<pre class="lang:default decode:true ">//nonce值的示例如下，服務器發送網頁的時候，告訴瀏覽器一個隨機生成的令牌。
Content-Security-Policy: script-src 'nonce-EBcje05nceNJfn39fn3e9h3jlif'
//頁面內嵌腳本，必須有這個令牌才能執行。
&lt;script nonce=EBcje05nceNJfn39fn3e9h3jlif&gt; // some code &lt;/script&gt;
</pre>
<pre class="lang:default decode:true">//hash值的示例如下，服務器定義一個允許執行代碼的hash值。
Content-Security-Policy: script-src 'sha256-qznLcsROx4GACP2dm0UCKCzCG-HiZ1guq6ZZDob_Tng='
//下面的代碼就會允許執行，因為hash值相符。
&lt;script&gt;alert('Hello, world.');&lt;/script&gt;
//注意，計算hash值的時候，&lt;script&gt;標籤不算在內。</pre>
除了script-src選項，nonce值和hash值還可以用在style-src選項，控制頁面內嵌的樣式表。

&nbsp;

日常注意
<ol>
 	<li>script-src和object-src是必設的，除非設置了default-src。因為攻擊者只要能注入腳本，其他限制都可以規避。而object-src必設是因為Flash裡面可以執行外部腳本。</li>
 	<li>script-src無法使用unsafe-inline關鍵字（除非伴隨一個nonce值），也不能允許設置data：URL。
下面是两个恶意攻击的例子。
<pre class="lang:default decode:true">&lt;img src="x" onerror="evil()"&gt; &lt;script src="data:text/javascript,evil()"&gt;&lt;/script&gt;</pre>
</li>
 	<li>必须特别注意 JSONP 的回调函数。
<pre class="lang:default decode:true">&lt;script src="/path/jsonp?callback=alert(document.domain)//"&gt; &lt;/script&gt;</pre>
上面的代碼中，雖然加載的腳本來自當前域名，但是通過改寫重寫函數，攻擊者依然可以執行惡意代碼。</li>
</ol>

Content Security Policy (CSP)

<p>【原因】：沒有utf-8這個語系（沒添加語言_國名前綴），LC_ALL又沒設定值。&nbsp;服務端解決方法：&nbsp;在遠程系統上，&nbsp;/etc/environment加入以下兩行，重新登陸即可。<br />
&lt;pre&gt;&lt;code&gt;LANG=en_US.utf-8<br />
LC_ALL=en_US.utf-8&lt;/code&gt;&lt;/pre&gt;<br />
Mac終端解決方法：&nbsp;編輯~/.bashrc或者~/.zshrc文件，添加<br />
&lt;pre class=&quot;&quot;&gt;&lt;code&gt;export LC_ALL=en_US.UTF-8 &nbsp;<br />
export LANG=en_US.UTF-8&lt;/code&gt;&lt;/pre&gt;</p>

iTerm2 warning: setlocale: LC_CTYPE: cannot change locale (UTF-8): No such file or directory

<pre class="lang:default decode:true ">npm install -g expo-cli

expo init &lt;project-name&gt;

//會先詢問要建立哪種專案，依照自己的需求選擇要的專案
? Choose a template: (Use arrow keys)
  ----- Managed workflow -----
❯ blank                 a minimal app as clean as an empty canvas 
  blank (TypeScript)    same as blank but with TypeScript configuration 
  tabs                  several example screens and tabs using react-navigation 
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started 
  minimal (TypeScript)  same as minimal but with TypeScript configuration

//接著會詢問專案的名稱，輸入名稱Enter後會開始建立專案
? Please enter a few initial configuration values.
  Read more: https://docs.expo.io/versions/latest/workflow/configuration/ ‣ 50% completed
 {
   "expo": {
     "name": "&lt;The name of your app visible on the home screen&gt;",
     "slug": "MyProject"
   }
 }

//專案建立完到專案的根目錄輸入以下指令就會開始執行develop server，並且自動開啟網頁
npm start

//這時在手機上下載並安裝 Expo Cient 的 App


</pre>
&nbsp;

React Native - Beginner via Expo

<pre class="lang:default decode:true ">//The request message was malformed :: Method not allowed
//Error message
//output:Attempting to renew cert from/etc/letsencrypt/renewal/xxxxxxxxxxxxxx produced an unexpected error: urn:ietf:params:acme:error:malformed :: The request message was malformed :: Method not allowed. Skipping.

yum install certbot python2-certbot-nginx
yum install python2-acme</pre>
&nbsp;

Words can be impactful in the world!