前端vue实现共享屏幕

<template>
  <div>
    <button @click="but" ref="ping">共享屏幕</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const ping = ref(null)

const but = async () => {
  console.log(1);
  const stream = await navigator.mediaDevices.getDisplayMedia({
    video: true,
  });



  const mime = MediaRecorder.isTypeSupported("video/webm;codecs=h264")
    ? "video/webm;codecs=h264"
    : "video/webm";

  const mediaRecorder = new MediaRecorder(stream, { mimeType: mime });

  const chunks = [];
  mediaRecorder.addEventListener("dataavailable", function (e) {
    chunks.push(e.data);
  });

  mediaRecorder.addEventListener("stop", () => {
    const blob = new Blob(chunks, { type: chunks[0].type });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "video.webm";
    a.click();
  });
  mediaRecorder.start();
};
</script>

<style lang="scss" scoped></style>

效果

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
态势感知平台的前端使用了Vue.js框架。Vue.js是一个轻量级的JavaScript框架,用于构建用户界面。它简单易用,具有响应式的数据绑定和组件化开发的特性。 使用Vue.js框架可以使得态势感知平台的前端开发更加高效和灵活。Vue.js采用了虚拟DOM和异步更新策略,可以提高界面渲染的性能。同时,Vue.js还提供了丰富的生态系统和工具,如Vue Router、Vuex等,方便开发人员进行路由管理和状态管理。 在态势感知平台的前端中,Vue.js框架可以实现以下功能: 1. 数据绑定:Vue.js的双向数据绑定机制可以保持视图与数据的同步更新,使用户界面能够实时展示最新的数据。 2. 组件化开发:Vue.js允许将用户界面拆分为独立的组件,每个组件具有自己的数据和行为,可以实现模块化的开发和重用。 3. 状态管理:利用Vuex,开发人员可以方便地管理和共享多个组件之间的状态,使得数据的管理更加便捷和一致。 4. 路由管理:Vue Router提供了路由管理的功能,可以实现前端的多页面跳转和URL的管理,方便用户之间的导航和操作。 5. 响应式设计:Vue.js可以根据屏幕的尺寸和设备的不同,自动适应调整用户界面的布局和样式,提供良好的用户体验。 总之,使用Vue.js作为态势感知平台前端的开发框架,可以提供高效、灵活和用户友好的用户界面,满足用户的需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值