フリップカメラの前にWebRTC MediaRecorderで以前のすべてのビデオストリーミングを停止する方法はありますか？

Question

私は私のPHP website.On mysiteに問題があります。私はnavigator.MediaDevices.getUserMedia（）を使っています。ビデオ録画のためのgithubからサンプルを取得していますが、現時点ではデバイスのカメラを切り替える機能をユーザーに提供しません私が使用しているコードは以下の通りですが、うまく動作しません。

私のhtmlコードは、あなたがgetUserMediaから得たストリームで

 <button value="false" id="flipV" ><img src="<?= Yii::$app->request->baseUrl ?>/images/flip.png" height="22" width="22"></button> 
     <video id="gum" autoplay muted></video> 
     <video id="recorded" autoplay loop></video> 

     <div> 
      <button id="record" disabled>Start Recording</button> 
      <button id="play" disabled>Play</button> 
      <button id="download" disabled>Download</button> 
     </div> 

    </div> 

私のjsのコードは、

'use strict'; 
var flipV = false; 
$(document).ready(function() { 
    $("body").on("click", "#flipV", function() { 
     if (flipV == false) { 
      flipV = true; 
     } else { 
      flipV = false; 
     } 
     startVideo(); 

    }); 
}); 
/* globals MediaRecorder */ 

var mediaSource = new MediaSource(); 
mediaSource.addEventListener('sourceopen', handleSourceOpen, false); 
var mediaRecorder; 
var recordedBlobs; 
var sourceBuffer; 

var gumVideo = document.querySelector('video#gum'); 
var recordedVideo = document.querySelector('video#recorded'); 

var recordButton = document.querySelector('button#record'); 
var playButton = document.querySelector('button#play'); 
var downloadButton = document.querySelector('button#download'); 
recordButton.onclick = toggleRecording; 
playButton.onclick = play; 
downloadButton.onclick = download; 

// window.isSecureContext could be used for Chrome 
var isSecureOrigin = location.protocol === 'https:' || 
     location.hostname === 'localhost'; 
if (!isSecureOrigin) { 
    alert('getUserMedia() must be run from a secure origin: HTTPS or localhost.' + 
      '\n\nChanging protocol to HTTPS'); 
    location.protocol = 'HTTPS'; 
} 

var constraints = {audio: true, video: {facingMode: (flipV) ? "user" : "environment"}}; 

function handleSuccess(stream) { 
    recordButton.disabled = false; 
    console.log('getUserMedia() got stream: ', stream); 
    window.stream = stream; 
    if (window.URL) { 
     gumVideo.src = window.URL.createObjectURL(stream); 
    } else { 
     gumVideo.src = stream; 
    } 
} 

function handleError(error) { 
    console.log('navigator.getUserMedia error: ', error); 
} 
function startVideo() { 
    navigator.mediaDevices.getUserMedia(constraints). 
      then(handleSuccess).catch(handleError); 
} 
// 
function handleSourceOpen(event) { 
    console.log('MediaSource opened'); 
    sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"'); 
    console.log('Source buffer: ', sourceBuffer); 
} 

function toggleRecording() { 
    if (recordButton.textContent === 'Start Recording') { 
     startRecording(); 
    } else { 
     stopRecording(); 
     recordButton.textContent = 'Start Recording'; 
     playButton.disabled = false; 
     downloadButton.disabled = false; 
    } 
} 

function startRecording() { 
    recordedBlobs = []; 
    var options = {mimeType: 'video/webm;codecs=vp9'}; 
    if (!MediaRecorder.isTypeSupported(options.mimeType)) { 
     console.log(options.mimeType + ' is not Supported'); 
     options = {mimeType: 'video/webm;codecs=vp8'}; 
     if (!MediaRecorder.isTypeSupported(options.mimeType)) { 
      console.log(options.mimeType + ' is not Supported'); 
      options = {mimeType: 'video/webm'}; 
      if (!MediaRecorder.isTypeSupported(options.mimeType)) { 
       console.log(options.mimeType + ' is not Supported'); 
       options = {mimeType: ''}; 
      } 
     } 
    } 
    try { 
     mediaRecorder = new MediaRecorder(window.stream, options); 
    } catch (e) { 
     console.error('Exception while creating MediaRecorder: ' + e); 
     alert('Exception while creating MediaRecorder: ' 
       + e + '. mimeType: ' + options.mimeType); 
     return; 
    } 
    console.log('Created MediaRecorder', mediaRecorder, 'with options', options); 
    recordButton.textContent = 'Stop Recording'; 
    playButton.disabled = true; 
    downloadButton.disabled = true; 
    mediaRecorder.onstop = handleStop; 
    mediaRecorder.ondataavailable = handleDataAvailable; 
    mediaRecorder.start(10); // collect 10ms of data 
    console.log('MediaRecorder started', mediaRecorder); 
} 

function stopRecording() { 
    mediaRecorder.stop(); 
    console.log('Recorded Blobs: ', recordedBlobs); 
    recordedVideo.controls = true; 
} 

function play() { 
    var superBuffer = new Blob(recordedBlobs, {type: 'video/webm'}); 
    recordedVideo.src = window.URL.createObjectURL(superBuffer); 
} 

function download() { 
    var blob = new Blob(recordedBlobs, {type: 'video/webm'}); 
    var url = window.URL.createObjectURL(blob); 
    var a = document.createElement('a'); 
    a.style.display = 'none'; 
    a.href = url; 
    a.download = 'test.webm'; 
    document.body.appendChild(a); 
    a.click(); 
    setTimeout(function() { 
     document.body.removeChild(a); 
     window.URL.revokeObjectURL(url); 
    }, 100); 
} 

Answer 1

が stream.getTracks().forEach(function(track) { track.stop(); }) これは、すべてのデバイスを停止します（あなたがチェックすることができますデスクトップ上でカメラのライトが消えます）、もう一度getUserMediaを呼び出す前に（モバイルデバイス上で）行う必要があります。