Запись экрана в формате JavaScript с помощью navigator.mediaDevices.getDisplayMedia недоступна для поиска - PullRequest
Новая
       195

Запись экрана в формате JavaScript с помощью navigator.mediaDevices.getDisplayMedia недоступна для поиска

1 голос
/ 07 августа 2020

Мы пытаемся записать экран в Reat JS с помощью navigator.mediaDevices.getDisplayMedia API и загружаем видео локально после преобразования потока в Blob.

Чтобы загрузить видео Я конвертирую поток в Blob, а затем использую URL.createObjectURL () для получения URL-адреса, программно создал тег и щелкнул его программно, чтобы загрузить видео локально.

Я могу загрузить и воспроизвести видео, но не могу искать видео с помощью панели поиска в любом видеопроигрывателе.

Когда я проверял свойства загруженного видео, я не мог видеть длину. Я думаю, что это проблема, но я не уверен, как мне установить длину при создании большого двоичного объекта. 

   function startRecording(stream) {

  let options = {mimeType:'video/webm;codecs=vp8'};

  let recorder = new MediaRecorder(stream,options);

  
  let data = [];
 
  recorder.ondataavailable = event => data.push(event.data);
  recorder.start(1000);
  let stopped = new Promise((resolve, reject) => {
    recorder.onstop = resolve;
    recorder.onerror = event => reject(event.name);
  });
  return Promise.all([
    stopped
  ])
  .then(() => data);

}

export async function startCapture(displayMediaOptions) {
  let captureStream = null;

  try {
    captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
  } catch(err) {
    console.error("Error: " + err);
  }
  console.log("captureStream >>",captureStream)
  if(captureStream ==null){
    console.log("recording cancel")
    return -1;
  }
  startRecording(captureStream).then (recordedChunks => {
    let recordedBlob = new Blob(recordedChunks, { type: "video/webm;codecs=vp8" });
    console.log(captureStream)
    const href =  URL.createObjectURL(recordedBlob);
    console.log(href);
    const link = document.createElement('a');
    link.href = href;
    link.download = "RecordedVideo";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  })
  return captureStream;
}

Вот ссылка на видео, которая была загружена с приведенным выше кодом:

https://drive.google.com/file/d/1rtniknYlhsYVX3oEV6V7SWoV3RsNupqK/view?usp=sharing

PS Пожалуйста, воспроизведите видео после его загрузки, так как оно хорошо воспроизводится в brwser.

Свойства скачанного видео

Если вы думаете, что я могу записать и загрузить видео другим способом, пожалуйста, поделитесь подробностями

Ответы [ 2 ]

0 голосов
/ 28 августа 2020

Я могу скачать и воспроизвести видео, но не могу искать видео с помощью панели поиска

К сожалению, MediaRecorder API не создает запись с возможностью поиска files .

Это потому, что это устройство записи в реальном времени, которое непрерывно генерирует данные и постепенно возвращает их в JS.

Это затрудняет создание файла WebM с возможностью поиска, для чего потребуется изменение начала файла с помощью доступных для поиска сигналов после факта.

Временным решением является повторное объединение файлов после этого, используя библиотеки ffmpeg или js.

0 голосов
/ 07 августа 2020

Используйте FileReader для link.href.

Попробуйте этот подход. Это должно сработать. (Хотя я не тестировал). 

startRecording(captureStream).then (recordedChunks => {
    let recordedBlob = new Blob(recordedChunks, { type: "video/webm;codecs=vp8" });
    const reader = new FileReader();
    reader.readAsDataURL(recordedBlob);
    reader.onload = e => {
        const link = document.createElement('a');
        link.href = e.target.result;
        link.download = "RecordedVideo.webm";
        link.click();   
    }   
}
...