ToB企服应用市场:ToB评测及商务社交产业平台

标题: 在线录屏-通过Web API接口轻松实现录屏 [打印本页]
作者: 愛在花開的季節    时间: 2023-12-13 05:38
标题: 在线录屏-通过Web API接口轻松实现录屏
在线录屏是指在互联网上进行屏幕录制的过程。它允许用户通过网络连接，将自己的屏幕活动记录下来，并可以在需要时进行播放、共享或存档。在线录屏常用于教育、培训、演示、游戏等场景，可以帮助用户展示操作步骤、解决问题、分享经验等。通常，在线录屏工具提供了丰富的功能，例如选择录制区域、添加音频注释、调整录制质量等，以满足用户的不同需求。
在线体验地址：https://amd794.com/recordscreen

工具演示视频：https://www.bilibili.com/video/BV1wC4y1U7at/


 
相关说明：
MediaDevices 是 Web API 中的一部分，它提供了访问媒体设备（如摄像头、麦克风等）的功能。通过 MediaDevices 接口，您可以使用 JavaScript 代码来获取和操作媒体设备的流（如音频和视频）。这使得您可以在 Web 应用程序中实现音视频通信、媒体录制和流媒体等功能。
当使用 MediaDevices 接口调用 Web API 时，可以按照以下示例代码进行操作：
  1. // 检查浏览器是否支持 MediaDevices 接口
  2. if (navigator.mediaDevices) {
  3.   // 获取媒体设备的用户授权
  4.   navigator.mediaDevices.getUserMedia({ audio: true, video: true })
  5.     .then(function(stream) {
  6.       // 获取到媒体流后的处理逻辑
  7.       // 在这里可以对获取到的音视频流进行操作
  8.       // 例如：显示视频流、播放音频流等
  9.     })
  10.     .catch(function(error) {
  11.       // 处理获取媒体设备失败的情况
  12.       console.log('获取媒体设备失败: ' + error.message);
  13.     });
  14. } else {
  15.   console.log('您的浏览器不支持 MediaDevices 接口');
  16. }
复制代码
上述示例代码首先检查浏览器是否支持 MediaDevices 接口。如果支持，它会调用 `getUserMedia` 方法来请求用户授权访问媒体设备（包括音频和视频）。如果用户授权成功，将返回一个媒体流对象，可以在 `.then` 方法中对该流进行处理。如果用户拒绝授权或发生其他错误，将在 `.catch` 方法中处理错误情况。
通过这样的调用方式，您可以使用 MediaDevices 接口来获取媒体设备的流，并对其进行进一步的操作和处理。
 
浏览器兼容性：
可以说是大部分不支持，毕竟是新的Web API接口，详细可以去MDN中查看MediaDevices - Web API 接口参考 | MDN (mozilla.org)



相关实现代码：
潦草布局一下，毕竟只是个玩具，不需要多华丽。
  1.   
  2.    
  3.       
  4.         
  5.           <el-icon size="50px" color=" var(--el-color-primary)">
  6.             <VideoCameraFilled/>
  7.           </el-icon>
  8.           <el-button type="primary">{{ currentLang.start }}</el-button>
  9.         
  10.         
  11.           <el-icon size="50px" color=" var(--el-color-primary)">
  12.             <VideoPause/>
  13.           </el-icon>
  14.           <el-button type="info">{{ currentLang.stop }}</el-button>
  15.         
  16.         
  17.           <el-icon size="50px" color=" var(--el-color-primary)">
  18.             <VideoPlay/>
  19.           </el-icon>
  20.           <el-button type="info">{{ currentLang.continue }}</el-button>
  21.         
  22.         
  23.           <el-icon size="50px" color=" var(--el-color-primary)">
  24.             <SwitchButton/>
  25.           </el-icon>
  26.           <el-button type="danger">{{ currentLang.end }}</el-button>
  27.         
  28.       
  29.       <el-divider v-if="VideoURL"/>
  30.       
  31.         
  32.         
  33.         <el-input v-model="DownloadName" placeholder="please input">
  34.           <template #append>.mp4</template>
  35.         </el-input>
  36.         <el-button type="primary" :icon="Download" @click="onDownload">{{ currentLang.saveVideo }}</el-button>
  37.       
  38.    
  39.    
  40.       
  41.         
  42.         REC
  43.       
  44.       <el-icon v-if="!VideoURL" size="40vh" color="var(--el-color-primary)">
  45.         <Monitor/>
  46.       </el-icon>
  47.       
  48.         {{ Hour }}:{{ Minute }}:{{ Seconds }}
  49.         {{ setState === 'paused' ? currentLang.pauseScreenRecording : currentLang.recordingScreen }}
  50.       
  51.       <video v-if="VideoURL" :src="VideoURL" controls></video>
  52.    
  53.   
复制代码
简单定义几个变量
  1. const VideoURL = ref('')
  2. const DownloadName = ref('')
  3. const setState = ref('')
  4. let mediaRecorder = null
  5. let mediaThen = null
复制代码
开始录屏
  1. const onStart = () => {
  2.   VideoURL.value = ''
  3.   mediaThen = null
  4.   navigator.mediaDevices.getDisplayMedia({video: true, audio: true})
  5.       .then(mediaStream => {
  6.         mediaThen = mediaStream
  7.         mediaRecorder = new MediaRecorder(mediaStream);
  8.         Timing()
  9.         console.log(mediaRecorder)
  10.         const chunks = [];
  11.         mediaRecorder.ondataavailable = event => {
  12.           if (event.data.size > 0) {
  13.             chunks.push(event.data);
  14.           }
  15.         };
  16.         mediaRecorder.onstop = () => {
  17.           const blob = new Blob(chunks, {type: 'video/mp4'});
  18.           const recordedVideoURL = URL.createObjectURL(blob);
  19.           VideoURL.value = recordedVideoURL
  20.           setState.value = '' //inactive
  21.         };
  22.         mediaRecorder.start();
  23.         setState.value = mediaRecorder.state   //recording
  26.       })
  27.       .catch(error => {
  28.         // if (error == 'DOMException: Permission denied') return false
  29.         // ElMessageBox({
  30.         //   title: '当前浏览器或设备不支持录屏',
  31.         //   confirmButtonText: '确定',
  32.         //   message: h('p', null, [
  33.         //     h('span', null, error),
  34.         //   ]),
  35.         // })
  36.       });
  37. }
复制代码
暂停录屏
  1. const onPause = () => {
  2.   clearTimeout(timer)
  3.   mediaRecorder.pause()
  4.   setState.value = mediaRecorder.state   //paused
  5. }
复制代码
恢复录屏
  1. const onResume = () => {
  2.   Timing()
  3.   mediaRecorder.resume()
  4.   setState.value = mediaRecorder.state   //recording
  5. }
复制代码
结束录屏
  1. const onStop = () => {
  2.   mediaRecorder.stop()
  3.   mediaThen.getTracks().forEach(track => track.stop())
  4.   setState.value = '' //inactive
  5. }
复制代码
最后把样式补上
[code][/code] 




免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4