mypeerconnection/index.html at master · AzkarProject/mypeerconnection · GitHub

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
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>WebRTC with Socket.IO</title>

    <meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,width=device-width">

    <link rel="stylesheet" href="./css/style.css" />

    <script src="/socket.io/socket.io.js"></script>
    <script src="./js/utils.js"></script>
    <script src="./js/adapter.js"></script>
    <script src="./js/MyPeerConnection.js"></script>

  </head>
  <body>

    <header>
      <h3>Démo WebRTC - I3S/Wimmics myPeerConnection 1.0.7 </h3>
    </header>


    <ul class="flex-container wrap">


        <section id="chat">

          <li class="flex-item">
            <input type="text" name="chatInput" id="chatInput" onkeyup="if (event.keyCode == 13) {sendChat(); return false;}">

            <button id="sendChat" onclick="sendChat()" disabled>Send</button>
            <HR/>
            <div id='log' name='log' ondragover="dragOverHandler(event)" ondrop="dropHandler(event)"></div>
            <br/>
             <input type="file" name="fileInput" id="fileInput" onchange="sendFile(this.files)" disabled>
         </li>

        </section>

        <section id="myvideos">

          <li class="flex-item myvideo">
              <h3> My Video </h3>
              <video id="myVideo" autoplay="autoplay" controls muted="true"></video>
              <button id="buttonShareWebcam" value='pending' onclick="shareWebcam()" disabled>Share my webcam</button>
          </li>
         </section>


         <section class="yourvideos">

          <li class="flex-item yourvideo">
              <h3> Your Video </h3>
              <video id="yourVideo" autoplay="autoplay" controls muted="true"></video>
          </li>

         </section>


        <section class="myscreens">

          <li class="flex-item myscreen">
              <h3> My screen </h3>
              <!--<video id="yourVideo" autoplay="autoplay" controls muted="true"></video>-->
          	  <video id="myScreen" autoplay="autoplay" controls muted="true"></video>
          	  <button id="buttonShareScreen" onclick="shareScreen()" disabled>Share my screen</button>
          </li>

         </section>


        <section class="yourscreens">

          <li class="flex-item yourscreen">
              <h3> Your Screen </h3>
              <!--<video id="yourVideo" autoplay="autoplay" controls muted="true"></video>-->
              <video id="yourScreen" autoplay="autoplay" controls muted="true"></video>
          </li>

         </section>


        <section id="helpScreenSharing">

           <li class="flex-item">

            <img id="imgHelp" src="./img/icon_help.gif">
            <div id="textHelp">
              Currently, only Chrome (desktop version) supports screen sharing.<br />
              To enable screen sharing, follow these steps and/or see <a href="https://www.youtube.com/watch?v=ZCatVxcyEpI">Explanatory video</a><br />
              <ol>
                <li>Open a new tab</li>
                <li>Go to chrome://flags/#enable-usermedia-screen-capture</li>
                <li>Click on enable</li>
                <li>Restart Chrome</li>
              </ol>
            </div>

          </li>

        </section>


    </ul>

    <script src="./js/script.js"></script>

  </body>
</html>