Attachment 357668 Details for Bug 192849 – Please look into it..

Please look into it..

ui-multiple-streams.html (text/html), 3.41 KB, created by Ramya D on 2018-12-19 05:48:13 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Ramya D

Created: 2018-12-19 05:48:13 PST

Size: 3.41 KB

patch

obsolete

><!DOCTYPE html>
><html>
>  <head>
>    <meta charset="UTF-8">
>    <title>Multiple streams</title>
>  </head>
>  <body>
>
>    <div>
>      <button id="video1-start-stop">Video 1</button>
>    </div>
>    <div>
>      <video id="video1" autoplay playsinline></video>
>    </div>
>    <div>
>      <button id="video2-start-stop">Video 2</button>
>    </div>
>    <div>
>      <video id="video2" autoplay playsinline></video>
>    </div>
>
>    <script type="text/javascript">
>
>
>      var video1_started = false;
>      var video1 = document.getElementById('video1');
>      var video1_button = document.getElementById('video1-start-stop');
>      var startStopVideo1 = function(e) {
>        if (video1_started) {
>          video1.srcObject && video1.srcObject.getTracks().forEach(function(track) {
>            track.stop();
>          });
>          video1.srcObject = null;
>          video1_started = false;
>          console.log("Video 1 stopped");
>        }
>        else {
>          var constraints1 = {
>            audio: false,
>            video: {
>              height: {
>                max: 480,
>              },
>              width: {
>                max: 640,
>              },
>              deviceId: device_id,
>            },
>          };
>          navigator.mediaDevices.getUserMedia(constraints1).then(function(stream) {
>            video1.srcObject = stream;
>            video1_started = true;
>            console.log("Video 1 started");
>          }).catch(function(err) {
>            console.error("Device access checks failed: ", err, constraints1);
>          });
>        }
>      }
>
>      var video2_started = false;
>      var video2 = document.getElementById('video2');
>      var video2_button = document.getElementById('video2-start-stop');
>      var startStopVideo2 = function(e) {
>        if (video2_started) {
>          video2.srcObject && video2.srcObject.getTracks().forEach(function(track) {
>            track.stop();
>          });
>          video2.srcObject = null;
>          video2_started = false;
>          console.log("Video 2 stopped");
>        }
>        else {
>          var constraints2 = {
>            audio: false,
>            video: {
>              height: {
>                //max: 240,
>                max: 480,
>              },
>              width: {
>                //max: 320,
>                max: 640,
>              },
>              deviceId: device_id,
>            },
>          };
>          navigator.mediaDevices.getUserMedia(constraints2).then(function(stream) {
>            video2.srcObject = stream;
>            video2_started = true;
>            console.log("Video 2 started");
>          }).catch(function(err) {
>            console.error("Device access checks failed: ", err, constraints2);
>          });
>        }
>      }
>
>      var device_id = null;
>      function handleError(error) {
>        console.log('device enumeration error: ', error);
>      }
>      var setupVideo = function(devices) {
>        for (var i = 0; i !== devices.length; ++i) {
>          var device = devices[i];
>          if (device.kind === 'videoinput') {
>            device_id = device.deviceId;
>            console.log("Using video device: " + device.label + "(" + device_id + ")");
>            video1_button.addEventListener("click", startStopVideo1);
>            video2_button.addEventListener("click", startStopVideo2);
>            break;
>          }
>        }
>      }
>      navigator.mediaDevices.enumerateDevices().then(setupVideo).catch(handleError);
>
>    </script>
>  </body>
></html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Multiple streams</title>
  </head>
  <body>

    <div>
      <button id="video1-start-stop">Video 1</button>
    </div>
    <div>
      <video id="video1" autoplay playsinline></video>
    </div>
    <div>
      <button id="video2-start-stop">Video 2</button>
    </div>
    <div>
      <video id="video2" autoplay playsinline></video>
    </div>

    <script type="text/javascript">


      var video1_started = false;
      var video1 = document.getElementById('video1');
      var video1_button = document.getElementById('video1-start-stop');
      var startStopVideo1 = function(e) {
        if (video1_started) {
          video1.srcObject && video1.srcObject.getTracks().forEach(function(track) {
            track.stop();
          });
          video1.srcObject = null;
          video1_started = false;
          console.log("Video 1 stopped");
        }
        else {
          var constraints1 = {
            audio: false,
            video: {
              height: {
                max: 480,
              },
              width: {
                max: 640,
              },
              deviceId: device_id,
            },
          };
          navigator.mediaDevices.getUserMedia(constraints1).then(function(stream) {
            video1.srcObject = stream;
            video1_started = true;
            console.log("Video 1 started");
          }).catch(function(err) {
            console.error("Device access checks failed: ", err, constraints1);
          });
        }
      }

      var video2_started = false;
      var video2 = document.getElementById('video2');
      var video2_button = document.getElementById('video2-start-stop');
      var startStopVideo2 = function(e) {
        if (video2_started) {
          video2.srcObject && video2.srcObject.getTracks().forEach(function(track) {
            track.stop();
          });
          video2.srcObject = null;
          video2_started = false;
          console.log("Video 2 stopped");
        }
        else {
          var constraints2 = {
            audio: false,
            video: {
              height: {
                //max: 240,
                max: 480,
              },
              width: {
                //max: 320,
                max: 640,
              },
              deviceId: device_id,
            },
          };
          navigator.mediaDevices.getUserMedia(constraints2).then(function(stream) {
            video2.srcObject = stream;
            video2_started = true;
            console.log("Video 2 started");
          }).catch(function(err) {
            console.error("Device access checks failed: ", err, constraints2);
          });
        }
      }

      var device_id = null;
      function handleError(error) {
        console.log('device enumeration error: ', error);
      }
      var setupVideo = function(devices) {
        for (var i = 0; i !== devices.length; ++i) {
          var device = devices[i];
          if (device.kind === 'videoinput') {
            device_id = device.deviceId;
            console.log("Using video device: " + device.label + "(" + device_id + ")");
            video1_button.addEventListener("click", startStopVideo1);
            video2_button.addEventListener("click", startStopVideo2);
            break;
          }
        }
      }
      navigator.mediaDevices.enumerateDevices().then(setupVideo).catch(handleError);

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

Actions: View

Attachments on bug 192849: 357668