Créer une page web avec seulement sa webcam en direct

**tabkelm** · 09/05/2023, 01h26

bonjour,

Quelqu'un a crée cette vidéo:
https://www.youtube.com/watch?v=bAZ9...ature=youtu.be

où dans la partie gauche,il a réussi à créer une page web diffusant son streaming grâce à sa webcam.

Comment coder en html pour faire de même?

remarque:
les scripts en HTML et javascript dans ce tuto vidéo ne semblent pas être suffisant

Ah! j'ai trouvé cet autre tuto:
https://www.kirupa.com/html5/accessi...m_in_html5.htm

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<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

**tabkelm** · 12/05/2023, 16h18

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!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>

Créer une page web avec seulement sa webcam en direct

JavaScript

Discussions similaires

Partager

Partager