html5 媒体源,HTML5 getUserMedia()媒体来源

您可以获取网络摄像头列表

Video Camera List

video {

border:1px solid gray;

}

if (!MediaStreamTrack) document.body.innerHTML = '

Incompatible Browser Detected. Try Chrome Canary instead.

';

var videoSources = [];

MediaStreamTrack.getSources(function(media_sources) {

console.log(media_sources);

// alert('media_sources : '+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)

{

// alert('Hii');

document.body.appendChild(document.createElement('hr'));

var strong = document.createElement('strong');

strong.innerHTML = JSON.stringify(e);

alert('strong.innerHTML : '+strong.innerHTML);

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 = $('',{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);

});

}

});

}