After the deployment of web resources, the navigator cannot obtain the solution of mediadevices instance (navigator.mediadevices is undefined)

problem

Recently in development , There is a function that needs to realize the function of recording screen , I used recordrtc library , There is no problem with local development in the process , When deploying to online environment navigator.mediaDevices by undefined, I searched many articles and official articles to solve

Causes and solutions

This problem is caused by the security policy of the browser , Currently tried , In the following cases navigator.mediaDevices It can be used normally.

 1.  The address is localhost://  During the interview 
 2.  The address is https://  when 
 3.  For file access file:///

//  notes ： If there are other plans, please correct 

Attached recordrtc Use the source code for reference ( The reference source code uses element UI)

index.vue

<template>
  <div>
    <button @click="handleScreenRecord"> Start recording </button>
    <el-dialog
      style="max-width: 60%"
      v-model="screenRecorder.dialogVisible"
      :before-close="handleClose"
      top="0"
    >
      <Screenrecording
        :isSubmitting="screenRecorder.isSubmitting"
        @submit="recordedVideoSubmit"
      />
    </el-dialog>
  </div>
</template>
<script>
import { defineComponent, reactive } from "vue";
import Screenrecording from "./ScreenRecorder.vue";
export default defineComponent({
  components: {
    Screenrecording,
  },
  setup() {
    const screenRecorder = reactive({
      fileurl: "",
      dialogVisible: false,
      title: "",
      isSubmitting: false,
    });
    const handleScreenRecord = async () => {
      screenRecorder.dialogVisible = true;
    };
    const recordedVideoSubmit = async (file) => {
      screenRecorder.isSubmitting = true;
      try {
        //  Get the recorded file  file, Here's the deal  file  Business logic of 
        console.log("file", file);
      } catch (error) {
        // notify.error(error.message)
      }
      screenRecorder.isSubmitting = false;
    };
    const handleClose = () => {
      screenRecorder.dialogVisible = false;
    };
    return {
      screenRecorder,
      handleScreenRecord,
      recordedVideoSubmit,
      handleClose,
    };
  },
});
</script>

ScreenRecorder.vue

<template>
  <div class="h-recorder-wrapper">
    <el-card class="row">
      <div class="col-12">
        <video
          ref="video"
          style="width: 100%"
          loop
          controls
          autoplay
          playsinline
        />
      </div>
      <div>
        <el-button
          ref="startRecord"
          @click="startRecord"
          :disabled="isSubmitting"
          v-show="!recording && !startedBefore"
          type="primary"
        >
          record
        </el-button>
        <el-button
          ref="recordAgain"
          @click="startRecord"
          v-show="!recording && startedBefore"
          :disabled="isSubmitting"
          type="primary"
        >
          recordAgain
        </el-button>
        <el-button
          ref="stopRecord"
          v-show="recording"
          @click="stopRecord"
          type="primary"
        >
          finish
        </el-button>
        <el-button
          v-show="!recording && startedBefore"
          @click="handleRecordedVideo(video.blob)"
          type="green"
          :loading="isSubmitting"
        >
          submit
        </el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import RecordRTC from "recordrtc";
export default {
  name: "screen-recorder",
  langPrefix: "components.recorder",
  data() {
    return {
      recorder: null,
      stream: null,
      video: null,
      recording: false,
      startedBefore: false,
    };
  },
  props: {
    isSubmitting: {
      type: Boolean,
      required: true,
    },
  },
  methods: {
    handleRecordedVideo() {
      this.$emit("submit", {
        file: this.video.blob,
      });
    },
    startRecord() {
      this.captureScreen((screen) => {
        this.video.srcObject = screen;
        this.recorder = RecordRTC(screen, {
          type: "video",
        });
        this.recorder.startRecording();
        this.recorder.screen = screen;
        this.startedBefore = this.recording = true;
      });
    },
    stopRecord() {
      this.recorder.stopRecording(this.stopRecordingCallback);
      this.recording = false;
    },
    async stopRecordingCallback() {
      this.video.src = this.video.srcObject = null;
      const blob = this.recorder.getBlob();
      this.video.src = URL.createObjectURL(blob);
      this.video.blob = blob;
      this.recorder.screen.stop();
      this.recorder.destroy();
    },
    getStream() {
      if (navigator.mediaDevices.getDisplayMedia) {
        return navigator.mediaDevices.getDisplayMedia({
          video: {
            displaySurface: "monitor",
            logicalSurface: true,
            cursor: "always",
          },
        });
      }
    },
    invokeGetDisplayMedia(success, error) {
      let displaymediastreamconstraints = {
        video: {
          displaySurface: "monitor",
          logicalSurface: true,
          cursor: "always",
        },
      };
      displaymediastreamconstraints = {
        video: true,
      };

      if (navigator.mediaDevices.getDisplayMedia) {
        navigator.mediaDevices
          .getDisplayMedia(displaymediastreamconstraints)
          .then(success)
          .catch(error);
      } else {
        navigator
          .getDisplayMedia(displaymediastreamconstraints)
          .then(success)
          .catch(error);
      }
    },
    addStreamStopListener(stream, callback) {
      stream.addEventListener(
        "ended",
        () => {
          callback();
          callback = () => {};
        },
        false
      );
      stream.addEventListener(
        "inactive",
        () => {
          callback();
          callback = () => {};
        },
        false
      );
      stream.getTracks().forEach((track) => {
        track.addEventListener(
          "ended",
          () => {
            callback();
            callback = () => {};
          },
          false
        );
        track.addEventListener(
          "inactive",
          () => {
            callback();
            callback = () => {};
          },
          false
        );
      });
    },
    captureScreen(callback) {
      this.invokeGetDisplayMedia(
        (screen) => {
          this.addStreamStopListener(screen, () => {
            this.$refs.stopRecord.click();
          });
          callback(screen);
        },
        (error) => {
          console.error(error);
        }
      );
    },
  },
  mounted() {
    this.video = this.$refs.video;
  },
};
</script>

recordrtc Kurt's documents ：https://github.com/muaz-khan/RecordRTC