首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >TRTC学习之旅(五)-- 自定义视频采集

TRTC学习之旅(五)-- 自定义视频采集

原创
作者头像
黑眼圈云豆
修改2020-07-13 10:17:40
1.4K0
修改2020-07-13 10:17:40
举报

这篇文章主要是讲如何在web端实现自定义采集视频的方法。

使用场景

在有些开发场景下,我可能在视频的时候不需要播放摄像头的内容,我需要播放页面上某一块区域的内容(动画、视频等)。这个时候就需要使用到自定义视频采集的方式去实现了。

实现步骤

步骤2:获取自定义区域视频流数据

这里主要是使用的是WebRTC的HTMLMediaElement.captureStream()方法,抓取canvas动画效果。

tips: captureStream方法在抓取canvas的视频流时,canvas必须要有动画效果,如果没有的话,画面会是黑屏

let canvas = document.querySelector('#pdfCanvas').querySelector('canvas');
let canvasStream = canvas.captureStream();
let track = canvasStream.getTracks()[0];

步骤2:创建本地流并设置视频流

// 从外部App指定的音视频源创建本地音视频流
//我做的这一步的话,是想录本地的麦克风的音,然后录canvas的动画
navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(stream => {
  const audioTrack = stream.getAudioTracks()[0];
  // 对audioTrack和videoTrack处理之后,

  this.client.localStream = TRTC.createStream({ 
      audioSource: audioTrack, 
      videoSource: track,
      mirror: false
  });
});

还可以通过调用addTrackreplaceTrack方法进行切换视频轨道,但是这两个方法要注意的一点是必须在本地流初始化(

initialize)完毕之后进行,否则会报错。

总结

在web端自定义采集视频的方法还是比较局限的,因为要依赖webRTC,兼容性上也不怎么强,如果使用场景比较复杂的话,还是推荐使用electron。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 使用场景
  • 实现步骤
    • 步骤2:获取自定义区域视频流数据
      • 步骤2:创建本地流并设置视频流
      • 总结
      相关产品与服务
      实时音视频
      实时音视频(Tencent RTC)基于腾讯21年来在网络与音视频技术上的深度积累,以多人音视频通话和低延时互动直播两大场景化方案,通过腾讯云服务向开发者开放,致力于帮助开发者快速搭建低成本、低延时、高品质的音视频互动解决方案。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档