Nenhuma Descrição

cameraCut.js 2.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. const localVideo = document.querySelector('video');
  2. var videoSelect = document.querySelector('select#video');
  3. var audioSelect = document.querySelector('select#audio');
  4. let localStream;
  5. let constraint;
  6. function getDevices() {
  7. return navigator.mediaDevices.enumerateDevices()
  8. }
  9. function gotDevices(devices) {
  10. console.log(JSON.stringify(devices))
  11. console.log(devices.length)
  12. var selectText = document.getElementById("selectText")
  13. selectText.innerHTML = devices.length
  14. let audioNum = 0,
  15. videoNum = 0;
  16. devices.forEach(function(device) {
  17. if (device['kind'] == 'audioinput') {
  18. let opt = document.createElement('option');
  19. opt.value = device['deviceId'];
  20. if (device['label']) {
  21. opt.innerText = device['label'];
  22. } else {
  23. audioNum++
  24. opt.innerText = 'audio' + audioNum
  25. }
  26. audioSelect.appendChild(opt);
  27. console.log("audioinput:" + JSON.stringify(device['label']))
  28. } else if (device['kind'] == 'videoinput') {
  29. let opt = document.createElement('option');
  30. opt.value = device['deviceId'];
  31. if (device['label']) {
  32. opt.innerText = device['label'];
  33. } else {
  34. videoNum++
  35. if (device['label']) {
  36. opt.innerText = device['label'];
  37. } else {
  38. videoNum++
  39. opt.innerText = 'video' + videoNum
  40. }
  41. }
  42. videoSelect.appendChild(opt);
  43. console.log("videoinput:" + JSON.stringify(device['label']))
  44. }
  45. })
  46. changeConstraint();
  47. }
  48. function changeConstraint() {
  49. constraint = {
  50. video: {
  51. deviceId: videoSelect.value
  52. },
  53. audio: {
  54. deviceId: audioSelect.value
  55. }
  56. };
  57. getMedia(constraint);
  58. }
  59. function gotLocalMediaStream(mediaStream) {
  60. localStream = mediaStream;
  61. localVideo.srcObject = mediaStream;
  62. }
  63. function getMedia(mediaStreamConstraints) {
  64. // 这里是重点,必须要先停止才可以
  65. if (localStream) {
  66. localStream.getVideoTracks()[0].stop();
  67. }
  68. if (navigator.mediaDevices.getUserMedia) {
  69. //最新的标准API
  70. navigator.mediaDevices.getUserMedia(mediaStreamConstraints).then(gotLocalMediaStream).catch(
  71. handleLocalMediaStreamError);
  72. } else if (navigator.webkitGetUserMedia) {
  73. //webkit核心浏览器
  74. navigator.webkitGetUserMedia(mediaStreamConstraints, gotLocalMediaStream, handleLocalMediaStreamError)
  75. } else if (navigator.mozGetUserMedia) {
  76. //firfox浏览器
  77. navigator.mozGetUserMedia(mediaStreamConstraints, gotLocalMediaStream, handleLocalMediaStreamError);
  78. } else if (navigator.getUserMedia) {
  79. //旧版API
  80. navigator.getUserMedia(mediaStreamConstraints, gotLocalMediaStream, handleLocalMediaStreamError);
  81. }
  82. }
  83. function handleLocalMediaStreamError(error) {
  84. console.log('navigator.getUserMedia error: ', error);
  85. }
  86. getDevices().then(gotDevices)
  87. audioSelect.onchange = changeConstraint;
  88. videoSelect.onchange = changeConstraint;