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

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:

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