Demo:https://ismetceber.com.tr/video.html
Kodu:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video</title>
<style>
[v-cloak] {
opacity: 0 !important;
}
#app{
max-width:800px;
margin:0 auto;
text-align: center;
}
video{
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app" v-cloak>
<p v-if="!inProgress">
<button @click="start" type="button">Başlat</button>
</p>
<p v-else>
<button @click="stop" type="button">Durdur</button>
</p>
<video ref="video" controls autoplay webkit-playsinline="true" playsinline="true" width="50%"></video>
<video ref="playbackVideo" controls autoplay webkit-playsinline="true" playsinline="true" width="50%"></video>
</div>
<script>
new Vue({
el: '#app',
data: {
inProgress: false,
mediaDevices: null,
mediaRecorder: null,
mediaStreamTrack: null,
blob: null,
},
mounted() {
},
methods: {
isObjEmpty(obj) {
return (
obj === undefined ||
obj === "undefined" ||
obj == null ||
obj === "" ||
obj.length === 0 ||
(typeof obj === "object" && Object.keys(obj).length === 0)
);
},
start() {
const mediaOpts = {
audio: true,
video: {
width: 1280,
height: 720,
frameRate: { ideal: 100, max: 150 }
}
}
if (!this.isObjEmpty(typeof navigator.mediaDevices)) {
navigator.mediaDevices.getDisplayMedia(mediaOpts).then(stream => {
this.inProgress = true;
this.mediaStreamTrack = stream;
const video = this.$refs.video;
if ("srcObject" in video) {
video.srcObject = stream
} else {
video.src = window.URL && window.URL.createObjectURL(stream) || stream
};
video.play();
this.mediaRecorder = new MediaRecorder(stream, {
audioBitsPerSecond: 1280000,
videoBitsPerSecond: 8500000,
mimeType: 'video/webm;codecs=h264'
});
this.mediaRecorder.start();
this.mediaRecorder.ondataavailable = e => {
this.blob = new Blob([e.data], {
'type': 'video/mp4'
});
}
this.mediaRecorder.onerror = e => {
console.error(e)
}
this.mediaRecorder.onstart = e => {
console.log('Başlat', e)
}
this.mediaRecorder.onstop = e => {
console.log('Durdur', e);
const url = window.URL && window.URL.createObjectURL(this.blob);
this.$refs.playbackVideo.src = url;
}
console.log('this.mediaRecorder', this.mediaRecorder);
}).catch(err => {
console.log(err);
alert('Bu tarayıcı ekran kaydını desteklemiyor');
})
} else {
alert('Bu tarayıcı ekran kaydını desteklemiyor');
}
},
stop() {
this.inProgress = false;
this.mediaStreamTrack.getVideoTracks().forEach(track => {
track.stop();
})
this.mediaRecorder.stop();
},
}
});
</script>
</body>
</html> 
