[HTML5]jouer/stopper/rejouer... sa webcam

Morebany · 10 Mai 2023

bonjour,

Ce petit code HTML5 qui contient du javascript crée une page web simple intégrant sa webcam.

HTML:

<html data-kantu="1"><script src="chrome-extension://ljdobmomdgdljniojadhoplhkpialdid/page/prompt.js"></script><script src="chrome-extension://ljdobmomdgdljniojadhoplhkpialdid/page/runScript.js"></script><head>
<meta charset="utf-8">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream</title>
<style>
    body {
      margin: 30px;
    }

    h1 {
      font-family: sans-serif;
      color: #666;
    }

    #container {
      width: 500px;
      height: 375px;
      border: 10px #333 solid;
    }

    #videoElement {
      width: 500px;
      height: 375px;
      background-color: #666;
    }
   
    button {
      margin-top: 20px;
      font-size: 12px;
      font-weight: bold;
      padding: 5px;
      background-color: white;
      border: 5px solid black;
    }

    button:hover {
      background-color: yellow;
    }

    button:active {
      background-color: yellowgreen;
    }
  </style>
</head>
<body>
<h1>Stop Webcam Stream</h1>
<div id="container">
<video autoplay="true" id="videoElement">
</video>
</div>
<button id="stop">Stop Video</button>
<button id="play">Play Video</button>
<button id="play">Play Video</button>

<script>
    var video = document.querySelector("#videoElement");
    var stopVideo = document.querySelector("#stop");
    var activeVideo = document.querySelector("#play");
   
 

    if (navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ video: true })
        .then(function (stream) {
          video.srcObject = stream;
        })
        .catch(function (err0r) {
          console.log("Something went wrong!");
        });
    }

    stopVideo.addEventListener("click", stop, false);
    activeVideo.addEventListener("click", play, false);

    function stop(e) {
      var stream = video.srcObject;
      var tracks = stream.getTracks();

      for (var i = 0; i < tracks.length; i++) {
        var track = tracks[i];
        track.stop();
      }

      video.srcObject = null;
    }

 </script>

</body></html>

Au même titre que la fonction function stop(e),je ne sais implémenter une nouvelle fonction function reactive(e) de manière que si la vebcam est stoppée,je puis la réactiver en appuyant sur le bouton play ...pour de nouveau la stopper en appuyant sur le bouton stop puis la réactiver ainsi de suite.
Savez-vous modifier ce coder afin de réaliser ceci?

merci de votre aide

Morebany · 12 Mai 2023

ça y est !:code corrigé par chatGPT:

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="Display Webcam Stream" name="title">
    <title>Display Webcam Stream</title>
    <style>
        body {
            margin: 30px;
        }

        h1 {
            font-family: sans-serif;
            color: #666;
        }

        #container {
            width: 500px;
            height: 375px;
            border: 10px #333 solid;
        }

        #videoElement {
            width: 500px;
            height: 375px;
            background-color: #666;
        }

        button {
            margin-top: 20px;
            font-size: 12px;
            font-weight: bold;
            padding: 5px;
            background-color: white;
            border: 5px solid black;
        }

        button:hover {
            background-color: yellow;
        }

        button:active {
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <h1>Stop Webcam Stream</h1>
    <div id="container">
        <video autoplay="true" id="videoElement"></video>
    </div>
    <button id="play">Play Video</button>
    <button id="stop">Stop Video</button>
  

    <script>
        var video = document.querySelector("#videoElement");
        var playVideo = document.querySelector("#play");
        var stopVideo = document.querySelector("#stop");
      

        playVideo.addEventListener("click", play, true);
        stopVideo.addEventListener("click", stop, false);
        

        if (navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ video: true })
                .then(function (stream) {
                    video.srcObject = stream;
                })
                .catch(function (error) {
                    console.log("Something went wrong!", error);
                });
        }

        function play() {
            var stream = video.srcObject;
            if (stream == null) {
                navigator.mediaDevices.getUserMedia({ video: true })
                    .then(function (stream) {
                        video.srcObject = stream;
                        stopVideo.disabled = false;
                      
                    })
                    .catch(function (error) {
                        console.log("Something went wrong!", error);
                    });
            }
        }

        function stop() {
            var stream = video.srcObject;
            var tracks = stream.getTracks();

            for (var i = 0; i < tracks.length; i++) {
                var track = tracks[i];
                track.stop();
            }

            video.srcObject = null;
            stopVideo.disabled = true;
          
        }

      
    </script>
</body>
</html>

[HTML5]jouer/stopper/rejouer... sa webcam

Morebany

Membre actif

Morebany

Membre actif

Sujets similaires