le webRTC

Obedi ndevu michael — Wed, 18 Jan 2023 13:36:37 +0000

1. Comprendre le concept de WebRTC
WebRTC (Real-Time Communications) est un ensemble d’API et de technologies qui permet aux applications web de fournir une communication audio et vidéo interactive en temps réel entre les utilisateurs.

2. Explorer les fonctionnalités offertes par le WebRTC
Le WebRTC offre une variété de fonctionnalités, notamment des codecs audio et vidéo, la transmission vidéo haute qualité, la voix sur IP (VoIP), la messagerie instantanée et d'autres mécanismes de communication en temps réel qui peuvent être utilisés dans des applications et des services web.

3.Apprendre le fonctionnement de WebRTC
Pour mieux comprendre le WebRTC, vous devez en apprendre un peu plus sur son fonctionnement. WebRTC utilise le protocole signaling (la communication entre les différentes connexions) pour établir des sessions audio et vidéo entre les utilisateurs. En plus de signaler, WebRTC utilise des serveurs de routage pour transmettre le streaming audio et vidéo entre les différentes connexions.

4. Comprendre l’architecture de WebRTC
WebRTC est conçu autour d’un environnement client-serveur où le client est généralement un navigateur web et le serveur une application WebRTC dédiée. Les clients utilisent le WebRTC API du navigateur pour interagir avec le serveur qui, à son tour, fournit les informations de session vidéo-audio et / ou de messagerie instantanée à l’utilisateur.

5. Explorer les utilisations courantes de WebRTC
Les utilisations courantes de WebRTC incluent des services tels que la visioconférence, les appels VoIP, la diffusion en direct et les jeux d'interaction en temps réel. Les plateformes de streaming et les services de messagerie instantanée à base de WebRTC sont également disponibles sur le marché.

<>Code(https://github.com/bedjoi/webrtcVd.git)

Pomodoro avec Html, CSS et Javascript.

Obedi ndevu michael — Mon, 19 Dec 2022 09:49:23 +0000

Dans l article,On va créer un compteur à rebours.
Le compteur est double en ce sens qu'il passe de la séance de travail à la séance de repos.
Le période initiale de travail est de 25 minutes et celle de repos est de 5 minutes.Que l on peut personnaliser selon le desire.
La partie gauche, contient le réglage de minuteur et la partie droite c est pour le réglage de la pause!! la pause est dans l intervalle de 5 à 15 minute et le minuteur d une minute à une heure ou 60 minutes!!

Pour la realisation de ce pomodoro,On a utiliser 3 feuilles:

Une feuille Html,
Une feuille de style et
Une feuille JavaScript

1.Feuille Html
Cette feuille contient les balyses Html

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/6f3103b13c.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./style.css">


</head>
<body>
    <section>


                <div class="setMin painel">
                    <button class="btnPlus btn">+</button>
                    <p class="comptnumber">25</p>
                    <button class="btnMines btn">-</button>
                </div>

        <div class="container">

            <div class="painel">
                <p id="work">work</p>
                <p id="break">break</p>
            </div>

            <div class="timer">
                <div class="circle">
                    <div class="time">
                        <p id="minutes"></p>
                        <p>:</p>
                        <p id="seconds"></p>
                    </div>
                </div>
            </div>

            <div class="controls">
                <div>
                    <button id="start" onclick="start()"><i class="fa-solid fa-play"></i></button>

                <a id="reset"><i class="fa-solid fa-arrow-rotate-left"></i></a>
                </div>
                <div>
                    <div class="pause">
                    <button id="pausebtn" onclick="pause()"><i class="fa-solid fa-pause"></i></button>


                    </div>
                </div>
            </div>
            <span class="dots"></span>
        </div>
        <div class="setMin painel breakmn">
            <button class="btnPlusB btn">+</button>
            <p class="comptnumberB">5</p>
            <button class="btnMinesB btn">-</button>
        </div>
    </section>
    <script src="./script.js"></script>
</body>
</html>

Dans cette feuille, on a utiliser les liens CDN pour les fonts, et icons.

<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet"> <script src="https://kit.fontawesome.com/6f3103b13c.js" crossorigin="anonymous"></script>

2.Feuille de style CSS

:root {
    font-size: 62.5%; /* 1rem = 10px */

    --color-primary: hsla(115, 19%, 87%, 0.87);
    --color-secondary: hsl(253, 77%, 47%);
    --color-font: hsl(0, 0%, 0%);

    --color-shadow: hsl(240, 6%, 20%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    background-image: url("https://cdn.pixabay.com/photo/2019/05/19/23/47/clouds-4215608_960_720.jpg");
    background-position: center;
  background-size:cover;
    font-size: 1.6rem;
    font-family: 'Open sans', sans-serif;
}

p,
i,
h1 {
    color: var(--color-font);
}

i {
    font-size: 3.2rem;
}

h1 {
    font-size: 3.2rem;
}

/* ==== CONTENT ==== */

section {
    display: flex;
    align-items: center;
    height: 100%;
    width: 95vw;
}

.container {
    width: min(42.5rem, 100%);
    margin-inline: auto;
    padding-inline: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.painel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
    width: 20rem;
    margin-block: 5rem;
    padding: 1rem;
    border-radius: 10rem;
    box-shadow: 0px 0px 15px 10px var(--color-shadow);
}

.painel p {
    opacity: 1;
    transition: 1s ease-in;
}

.painel p.active {
    opacity: 1;
    color: var(--color-secondary);
}

.timer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 15px 10px var(--color-shadow); 
    box-shadow: 0px 0px 15px 10px var(--color-shadow);
}

.circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26rem;
    height: 26rem;
    border-radius: 50%;
    background-color: var(--color-secondary);
    position: relative;
}

.circle::before {
    content: '';
    position: absolute;
    width: 95%;
    height: 95%;
    border-radius: 50%;
    background-color: var(--color-primary);
}

.time {
    position: relative;
    display: flex;
    flex-direction: row;
}

.time p {
    font-size: 5.6rem;
}

.time p:nth-of-type(2) {
    position: relative;
    top: -.5rem;
    margin-inline: 1rem;
}

.controls {
    margin-top: 3rem;
    display: flex;
    gap: 30rem;
}

.controls button {
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.controls #reset {
    display: none;
}
.setMin{
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    position: relative;
    left: 3rem;
    bottom: 13rem;
    gap: 5px;
}
.breakmn{
    position: relative;
    left: -6rem;


}
.btn{


    width: 2rem;
}

3.Feuille JavaScript
Dans cette feuille nous va contenir les Scripts;


> let minutes=document.getElementById('minutes');
let secondes=document.getElementById('seconds');
let btnPlus= document.querySelector('.btnPlus');
let btnMines= document.querySelector('.btnMines');
let btnPlusB= document.querySelector('.btnPlusB');
let btnMinesB= document.querySelector('.btnMinesB');
let comptnumber= document.querySelector('.comptnumber');
let comptnumberB= document.querySelector('.comptnumberB');
let pausebtn= document.querySelector('#pausebtn');
let reset=document.getElementById('reset')
let interval;
console.log(btnPlus);
console.log(btnMines);
console.log(comptnumber);


let workTittle = document.getElementById('work');
let breakTittle = document.getElementById('break');
let setMunit=parseInt(comptnumber.innerHTML);
let setbreak=parseInt(comptnumberB.innerHTML);

console.log(setbreak)

let workTime = 25;
let breakTime = 2;

let seconds = "00"


// display
window.onload = () => {
    minutes.innerHTML = workTime;
    secondes.innerHTML = seconds;

    workTittle.classList.add('active');
}

// start timer
let start = ()=>{

    // change button
    document.getElementById('start').style.display = "none";
    document.getElementById('reset').style.display = "block";

    // change the time
    seconds = 59;

    let workMinutes = workTime - 1;
    let breakMinutes = breakTime - 1;

    breakCount = 0;

    // countdown
    let timerFunction = () => {
        //change the display
        minutes.innerHTML = workMinutes;
        secondes.innerHTML = seconds;

        // start
        seconds = seconds - 1;

        if(seconds === 0) {
            workMinutes = workMinutes - 1;
            if(workMinutes === -1 ){
                if(breakCount % 2 === 0) {
                    // start break
                    workMinutes = breakMinutes;
                    breakCount++

                    // change the painel
                    workTittle.classList.remove('active');
                    breakTittle.classList.add('active');
                }else {
                    // continue work
                    workMinutes = workTime -1;
                    breakCount++

                    // change the painel
                    breakTittle.classList.remove('active');
                    workTittle.classList.add('active');
                }
            }
            seconds = 59;
        }
    }

    // start countdown
    interval= setInterval(timerFunction, 1000); // 1000 = 1s

}
const pause=()=>{

    document.getElementById('start').style.display = "block";
    document.getElementById('reset').style.display = "none";
    clearInterval(interval);

}
const resetbtn=()=>{

    document.getElementById('start').style.display = "block";
    document.getElementById('reset').style.display = "none";
    minutes.innerHTML = workTime;
    secondes.innerHTML = '00';

    workTittle.classList.add('active');
    clearInterval(interval);

}
reset.addEventListener('click',()=>{
    resetbtn();
})
pausebtn.addEventListener('click', ()=>{
    pause();
});

btnPlus.addEventListener('click', () =>{
    comptnumber.innerHTML =parseInt(comptnumber.innerHTML)+1;
    setMunit=comptnumber.innerHTML;
    minutes.innerHTML=comptnumber.innerHTML
    workTime=setMunit
    if(comptnumber.innerHTML==61){

        comptnumber.innerHTML=60
    }

});
btnMines.addEventListener('click', () =>{
    comptnumber.innerHTML =parseInt(comptnumber.innerHTML)-1;
    setMunit=comptnumber.innerHTML;
    minutes.innerHTML=comptnumber.innerHTML
    workTime=setMunit;
    if(comptnumber.innerHTML==-1){

        comptnumber.innerHTML=0;
        minutes.innerHTML=0;
    }
})
btnPlusB.addEventListener('click', () =>{
    comptnumberB.innerHTML =parseInt(comptnumberB.innerHTML)+1;
    setbreak=comptnumberB.innerHTML;
    breakTime=setbreak
    console.log(setbreak)
    if(comptnumberB.innerHTML==11){

        comptnumberB.innerHTML=10
    }

});
btnMinesB.addEventListener('click', () =>{
    comptnumberB.innerHTML =parseInt(comptnumberB.innerHTML)-1;
    setbreak=comptnumberB.innerHTML;
    breakTime=setbreak
    console.log(setbreak)
    if(comptnumberB.innerHTML==4){

        comptnumberB.innerHTML=5
    }



})

Merci de votre Attention!! et merci de vous abonner pour recevoir plus des notifications.

DEV Community: Obedi ndevu michael

le webRTC

Pomodoro avec Html, CSS et Javascript.