victorbstan/cameras.html

## cameras.html
<!DOCTYPE html>
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="author" content="Victor Stan">
      <meta name="description" content="Get multiple video streams on one page. Adapted from code by Muaz Khan">

      <title>Video Camera</title>

      <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>

      <style type="text/css" media="screen">
        video {
          border:1px solid gray;
        }
      </style>
  </head>
  <body>
    <script>
      if (!MediaStreamTrack) document.body.innerHTML = '<h1>Incompatible Browser Detected. Try <strong style="color:red;">Chrome Canary</strong> instead.</h1>';

      var videoSources = [];

      MediaStreamTrack.getSources(function(media_sources) {
        console.log(media_sources);

        media_sources.forEach(function(media_source){
          if (media_source.kind === 'video') {
            videoSources.push(media_source);
          }
        });

        getMediaSource(videoSources);
      });

      var get_and_show_media = function(id) {
        var constraints = {};
        constraints.video = {
          optional: [{ sourceId: id}]
        };

        navigator.webkitGetUserMedia(constraints, function(stream) {
          console.log('webkitGetUserMedia');
          console.log(constraints);
          console.log(stream);

          var mediaElement = document.createElement('video');
          mediaElement.src = window.URL.createObjectURL(stream);
          document.body.appendChild(mediaElement);
          mediaElement.controls = true;
          mediaElement.play();

        }, function (e) {
          document.body.appendChild(document.createElement('hr'));
          var strong = document.createElement('strong');
          strong.innerHTML = JSON.stringify(e);
          document.body.appendChild(strong);
        });
      };

      var getMediaSource = function(media) {
        console.log(media);
        media.forEach(function(media_source) {
          if (!media_source) return;

          if (media_source.kind === 'video') {
            // add buttons for each media item
            var button = $('<input/>', {id: media_source.id, value:media_source.id, type:'submit'});
            $("body").append(button);
            // show video on click
            $(document).on("click", "#"+media_source.id, function(e){
              console.log(e);
              console.log(media_source.id);
              get_and_show_media(media_source.id);
            });
          }
        });
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="author" content="Victor Stan">
	<meta name="description" content="Get multiple video streams on one page. Adapted from code by Muaz Khan">

	<title>Video Camera</title>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>

	<style type="text/css" media="screen">
	video {
	border:1px solid gray;
	}
	</style>
	</head>
	<body>
	<script>
	if (!MediaStreamTrack) document.body.innerHTML = '<h1>Incompatible Browser Detected. Try <strong style="color:red;">Chrome Canary</strong> instead.</h1>';

	var videoSources = [];

	MediaStreamTrack.getSources(function(media_sources) {
	console.log(media_sources);

	media_sources.forEach(function(media_source){
	if (media_source.kind === 'video') {
	videoSources.push(media_source);
	}
	});

	getMediaSource(videoSources);
	});

	var get_and_show_media = function(id) {
	var constraints = {};
	constraints.video = {
	optional: [{ sourceId: id}]
	};

	navigator.webkitGetUserMedia(constraints, function(stream) {
	console.log('webkitGetUserMedia');
	console.log(constraints);
	console.log(stream);

	var mediaElement = document.createElement('video');
	mediaElement.src = window.URL.createObjectURL(stream);
	document.body.appendChild(mediaElement);
	mediaElement.controls = true;
	mediaElement.play();

	}, function (e) {
	document.body.appendChild(document.createElement('hr'));
	var strong = document.createElement('strong');
	strong.innerHTML = JSON.stringify(e);
	document.body.appendChild(strong);
	});
	};

	var getMediaSource = function(media) {
	console.log(media);
	media.forEach(function(media_source) {
	if (!media_source) return;

	if (media_source.kind === 'video') {
	// add buttons for each media item
	var button = $('<input/>', {id: media_source.id, value:media_source.id, type:'submit'});
	$("body").append(button);
	// show video on click
	$(document).on("click", "#"+media_source.id, function(e){
	console.log(e);
	console.log(media_source.id);
	get_and_show_media(media_source.id);
	});
	}
	});
	}
	</script>
	</body>
	</html>