WebRTC getDisplayMedia Angular 8 无法下载视频

Question

我正在使用这个 NPM 包 Angular 8 [ https://www.npmjs.com/package/webrtc-adapter ] to replicate the WebRTC getDisplayMedia functionality here [ https://webrtc.github.io/samples/src/content/getusermedia/getdisplaymedia/ ]

我想出了如何开始和停止录制（实时屏幕截图）但我无法找到也无法找到任何有关如何下载实际重新编码的文档，请参阅下面的代码谢谢。

import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import adapter from "webrtc-adapter";

@Component({
  selector: 'tgh-web-rtc-screen-api',
  template: `
  <div class="row">
   <div class="col-md-12">
    <button (click)="startRecording()"> Record </button> &nbsp;
    <button (click)="stopRecording()"> Stop </button> &nbsp;
    <button (click)="resumeRecording()"> Resume </button> &nbsp;
    <button (click)="downloadRecording()"> Download</button>
   </div>
   <div class="col-md-12">
    <video #video class="video"></video>
   </div>
  </div>
  `
})

// Must implement AfterviewInit to work properly for video recording
export class WebRtcScreenApiComponent implements OnInit , AfterViewInit {

    // The HTML reference to the video element (<video></video> tag)
    @ViewChild("video") video: ElementRef;

    _navigator = <any> navigator;
    _localStreamReference: any;

    constructor() { }

    ngOnInit() {

    }

    ngAfterViewInit() {
        // set the initial state of the video
        let video:HTMLVideoElement = this.video.nativeElement;
        video.muted = false;
        video.controls = true;
        video.autoplay = false;
    }

    // Starts the recording and calls the on success methiod if passed
    startRecording() {

        // For Firefox, it requires you specify whether to present the option to share a screen or window to the user
        if (adapter.browserDetails.browser == 'firefox') {
            adapter.browserShim.shimGetDisplayMedia(window, 'screen');
        }

        // Modern way TODO: Figure out why the stream is needed
        this._navigator.mediaDevices.getDisplayMedia({video: true}).then(stream => {
            this.onSucces(stream);
        })
        .catch(e => {
            this.onError(e);
        });

    }

    //Starts the screen recording
    onSucces(stream: MediaStream): void {

        this._localStreamReference = stream;

        var video = document.querySelector('video');
        video.srcObject = stream;   
        video.onloadedmetadata = function(e) {
            video.play();
        };

    }

    // Stops the screen recording
    stopRecording(): void {

        const tracks = this._localStreamReference.getTracks();
        tracks.forEach((track) => {
            track.stop();
        });

    }

    // Resumes recording
    resumeRecording(): void {

        const tracks = this._localStreamReference.getTracks();
        tracks.forEach((track) => {
            track.play();
        });

    }

    // Downloads rercording in browser
    downloadRecording() {
        // ?
    }

    // on WebRTC error
    onError(error: Error):void {
        console.log('Error message: ' + error.message);
        console.log('Error name: ' + error.name);
    }

}

Answer 1

这是用于下载录音的 webRTC 示例代码 https://github.com/webrtc/samples/blob/gh-pages/src/content/getusermedia/record/js/main.js#L47

测试页 - https://webrtc.github.io/samples/src/content/getusermedia/record/

而且在您的代码中，您只使用了 getDisplayMedia API，如果您想要录制，那么您还必须使用 MediaStream 录制 API - https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API

WebRTC getDisplayMedia Angular 8 无法下载视频

WebRTC getDisplayMedia Angular 8 cannot download video

webrtc

angular

get-display-media