【RecordRTC Web端屏幕录制(VUE)方法】

完整代码如下：

button使用了element-ui;

<template>
<div class="record-page"><div style="margin-bottom: 15px;"><el-button @click="startRecording" :disabled="videoStart" size="small">start recording</el-button><el-button @click="stopRecording" :disabled="!videoStart" size="small" id="btn-stop-recording">stop recording</el-button></div><video controls autoplay playsinline ref="video" width="400" height="300"></video></div></template>


<script>import RecordRTC from 'recordrtc';export default {name: "screenRecord",data() {return {video: null,videoStart: false,recorder: null,}},created() {if (!navigator.getDisplayMedia && !navigator.mediaDevices.getDisplayMedia) {let error = 'Your browser does NOT support the getDisplayMedia API.';throw new Error(error);}},mounted() {this.video = document.querySelector('video');},methods: {invokeGetDisplayMedia(success, error) {let displaymediastreamconstraints = {video: {displaySurface: 'monitor', // monitor, window, application, browserlogicalSurface: true,cursor: 'always' // never, always, motion}};// above constraints are NOT supported YET// that's why overridnig themdisplaymediastreamconstraints = {video: true};if (navigator.mediaDevices.getDisplayMedia) {navigator.mediaDevices.getDisplayMedia(displaymediastreamconstraints).then(success).catch(error);}else {navigator.getDisplayMedia(displaymediastreamconstraints).then(success).catch(error);}},captureScreen(callback) {this.invokeGetDisplayMedia((screen) => {this.addStreamStopListener(screen, () => {//});callback(screen);}, function (error) {console.error(error);alert('Unable to capture your screen. Please check console logs.\n' + error);});},addStreamStopListener(stream, callback) {stream.addEventListener('ended', function () {callback();callback = function () { };}, false);stream.addEventListener('inactive', function () {callback();callback = function () { };}, false);stream.getTracks().forEach(function (track) {track.addEventListener('ended', function () {callback();callback = function () { };}, false);track.addEventListener('inactive', function () {callback();callback = function () { };}, false);});},startRecording() {this.captureScreen(screen=>{this.video.srcObject = screen;this.recorder = RecordRTC(screen, {type: 'video'});this.recorder.startRecording();// release screen on stopRecordingthis.recorder.screen = screen;this.videoStart = true;});},stopRecordingCallback() {this.video.src = this.video.srcObject = null;this.video.src = URL.createObjectURL(this.recorder.getBlob());this.recorder.screen.stop();this.recorder.destroy();this.recorder = null;this.videoStart = false;},stopRecording() {this.recorder.stopRecording(this.stopRecordingCallback);}},}
</script>

<style scoped></style>

【RecordRTC Web端屏幕录制(VUE)方法】相关推荐

iOS端屏幕录制ReplayKit
ReplayKit是苹果在iOS9上面提供的一个框架. 库的特性说明目前这个库只支持真机允许,不支持模拟器. 系统版本必须高于iOS9. 不支持录avplayer播放的视频,这个可能是为了保护视频的 ...
bim 模型web页面展示_一种基于BIM模型的Web端轻量化展示方法与流程
本发明涉及基坑结构模型技术领域,尤其涉及一种基于bim模型的web端轻量化展示方法. 背景技术: 建筑信息模型(buildinginformationmodeling,bim)技术在土木工程领域快速推 ...
app内录屏开发 ios_iOS端屏幕录制Replaykit项目实践
上一篇阐述了调研结果,而我们常用的应用场景就是录制屏幕内容,然后将内容分享给他人(直播或录播).流程如下: 1.被录制端host app需引入 ReplayKit,以便可以使用其api选择一个app的 ...
python web Android屏幕录制
执行测试用例时,自动触发屏幕录制,单用例单录制录制方式采用多线程,主线程开始,另开一个线程,跑录制脚本 web端录制检测的是电脑页面,录制电脑页面展示的数据. from datetime impo ...
iphone屏幕录制_无需第三方APP，苹果iPhone手机屏幕录制的方法
有些小伙伴在使用iPhone手机玩游戏的时候,很想把自己玩的游戏录个高清视频,再添加自己的原声解说,做个教程,分享到网上或发送给朋友,或者看到喜欢的直播需要录制下来,以后欣赏或分享给他人,但不知道怎么 ...
仿iphone顶部状态栏_无需第三方APP，苹果iPhone手机屏幕录制的方法
有些小伙伴在使用iPhone手机玩游戏的时候,很想把自己玩的游戏录个高清视频,再添加自己的原声解说,做个教程,分享到网上或发送给朋友,或者看到喜欢的直播需要录制下来,以后欣赏或分享给他人,但不知道怎么 ...
iOS端屏幕录制开发指南
一. 概述实现直播过程中共享屏幕分为两个步骤:屏幕数据采集和流媒体数据推送.前对于 iOS 来说,屏幕采集需要系统的权限,受制于iOS系统的限制,第三方 app 并没有直接录制屏幕的权限,必须通过系 ...
WEB端自适应尺寸的方法
移动端页面开发通常用的是rem单位来做不同分辨率屏幕的自适应,那我们怎么从UI设计稿的PX像素单位自动转换到rem呢? 我们写了一个方法来解决,只要输入设计稿的元素尺寸,就可以自动转换过来. //宽度 ...
免费好用的PC端屏幕录制软件
链接:https://pan.baidu.com/s/125bcbo_795zoRnOVoTxm2g 提取码:335f

【RecordRTC Web端屏幕录制(VUE)方法】

【RecordRTC Web端屏幕录制(VUE)方法】相关推荐

最新文章

热门文章