update

src/components/cameraDemo.vue

@@ -0,0 +1,64 @@
+<template>
+    <div id="vueapp">
+        <div>
+            <button @click="btnRecordClicked" v-if="!recording">录制</button>
+            <button @click="btnPauseClicked" v-if="!paused && recording">暂停</button>
+            <button @click="btnResumeClicked" v-if="paused && recording">继续</button>
+            <button @click="btnStopClicked" :disabled="!recording">停止</button>
+            <button :disabled="!currentWebmData" @click="btnPlayClicked">播放</button>
+        </div>
+        <video controls ref="player"></video>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            currentWebmData: 0,
+            recording: false,
+            paused: false
+        }
+    },
+    mounted() {
+        this._initApp();
+    },
+
+    methods: {
+        async _initApp() {
+            // this._stream=await navigator.mediaDevices.getUserMedia({audio:true,video:false});
+            this._stream = await navigator.mediaDevices.getDisplayMedia();
+            this._recorder = new MediaRecorder(this._stream, { mimeType: "video/webm;codecs=h264" });
+            this._recorder.ondataavailable = this.recorder_dataAvailableHandler.bind(this);
+        },
+        recorder_dataAvailableHandler(e) {
+            console.log(e);
+            this.currentWebmData = e.data;
+        },
+        btnRecordClicked() {
+            this.recording = true;
+            this.paused = false;
+            this._recorder.start();
+        },
+        btnPauseClicked() {
+            this.paused = true;
+            this._recorder.pause();
+        },
+        btnResumeClicked() {
+            this.paused = false;
+            this._recorder.resume();
+        },
+        btnStopClicked() {
+            this.recording = false;
+            this._recorder.stop();
+        },
+        btnPlayClicked() {
+            this.$refs.player.src = URL.createObjectURL(this.currentWebmData);
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>