Canvas实时回显和录制

简介: Canvas实时回显和录制

在线教育类的产品中经常会遇到的一个场景就是实时显示学生的答题过程并且支持回溯,通常我们想到的做法就是通过记录坐标和重新绘制来达到产品的要求,再查看了相关资料后知道了Canvas元素的captureStream()API可以实时返回捕捉的画布,那我们就来了解一下这个API的使用吧。


关键API: HTMLCanvasElement.captureStream()


语法:

MediaStream = canvas.captureStream(frameRate);


参数:

  • frameRate 帧捕获速率(FPS)
  • 可选参数
  • 未设置:画布更改时捕获新的一帧。
  • 设置为0:捕获单个帧。
  • 设置为25:每帧捕获速率25的双精度浮点值。


返回值:

  • MediaStream 对象


兼容性:

1.png注意:


  • Firefox 41和Firefox 42中需要手动开启,将canvas.capturestream.enabled 设置 true
  • 详细的API还是要参考MDN,我还将一些常见的前端用到的网站进行了汇总也可以通过IT200.CN访问,静态页面不存储任何个人信息。


Demo演示


代码为React版本,参考书籍《WebRTC音视频开发》。


准备我们的布局

  1. 准备一个canvas元素来做我们的答题板。
  2. 准备一个video元素来实时显示我们在答题板上的操作。
  3. 准备一个按钮来启动同步显示答题板并进行录制
  4. 准备一个按钮来停止录制
<div className="container">
  <div>
    <p>画板区</p>
    <canvas ref={this.canvasRef}></canvas>
  </div>
  <div>
    <p>视频区</p>
    <video ref={this.videoRef} playsInline autoPlay></video>
  </div>
  <button onClick={this.startCaptureCanvas}>开始</button>
  <button onClick={this.stopRecord}>停止</button>
</div>


看一下流程图

2.png


开始实施

  1. 初始化画板答题器

准备画布:初始化宽高数据,将画布填充一个颜色并指定画笔的粗细和颜色

initCanvas = () => {
    canvas = this.canvasRef.current;
    canvas.width = 500;
    canvas.height = 350;
    context = canvas.getContext("2d");
    context.fillStyle = "#ccc";
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.lineWidth = 1;
    context.storkeStyle = "#000";
    canvas.addEventListener("mousedown", this.startAction);
    canvas.addEventListener("mouseup", this.endAction);
};


跟随手指划线:

  1. 初始化画笔原点
  2. 移动画笔绘制轨迹
  3. 结束时移除事件
startAction = (event) => {
    context.beginPath();
    context.moveTo(event.offsetX, event.offsetY);
    context.stroke();
    canvas.addEventListener("mousemove", this.moveAction);
};
moveAction = (event) => {
  context.lineTo(event.offsetX, event.offsetY);
  context.stroke();
};
endAction = () => {
  canvas.removeEventListener("mousemove", this.moveAction);
};


  1. streamcanvas流向video
startCaptureCanvas = async (e) => {
    stream = canvas.captureStream(25);
    const video = this.videoRef.current;
    video.srcObject = stream;
};


  1. 启动答题板录制


  • start设置数值的作用是录制的媒体按指定大小切块,避免内容过大。
  • ondataavailable:保存每次回调的数据块
startRecord = (stream) => {
    recordeBlobs = [];
    mediaRecorder = new MediaRecorder(stream, {
      mimeType: "video/webm",
    });
    mediaRecorder.onstop = (event) => {
      console.log("录制完成");
    };
    mediaRecorder.ondataavailable = (event) => {
      if (event.data && event.data.size > 0) {
        recordeBlobs.push(event.data);
      }
    };
    mediaRecorder.start(100);
};


  1. 停止录制后,清空相关对象获取视频文件
stopRecord = () => {
    mediaRecorder.stop();
    stream.getTracks().forEach((track) => track.stop());
    stream = null;
    const blob = new Blob(recordeBlobs, { type: "video/webm" });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.style.display = "none";
    a.href = url;
    a.download = "canvas.webm";
    document.body.appendChild(a);
    a.click();
    setTimeout(() => {
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    }, 100);
};


  1. 完整代码(私聊获取)


效果预览

3.png


思路扩展

  • API的使用是很简单的,要是对接远程服务器在其他端进行显示还是需要Socket进行加持。


闲言碎语

  • 你们有做过这样的功能吗?你是怎么实现的呀?



相关文章
|
小程序
UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
1697 0
|
Web App开发 JavaScript 中间件
高版本Chrome VUE页面播放RTSP实时视频流,并抓图、录像、回放、倍速等
因为项目上需要把海康威视摄像头集成到WEB网页中播放,于是开始了对WEB播放摄像头方案的各种折腾。 2015年之前还可以用VLC原生播放器在Chrome、Firefox等浏览器中直接播放,延迟比较低,效果也还不错。可惜好景不长,从 2015年Chrome、Firefox等浏览器取消了对 NPAPI插件的支持,海康威视官方提供的 web3.0开发包也只能在低版本浏览器播放。
942 1
|
编解码 Android开发 索引
【Android FFMPEG 开发】FFMPEG 视频播放进度控制 ( 显示播放进度 | 拖动进度条播放 )
【Android FFMPEG 开发】FFMPEG 视频播放进度控制 ( 显示播放进度 | 拖动进度条播放 )
666 0
|
Web App开发 前端开发 JavaScript
水平滑动,记录当前状态、利用浏览器原生播放器播放视频和vue-video-player视频播放插件、基于museUI的音频播放和vue-player插件实现音频播放
一、水平滑动,记录当前状态 当水平内容在一屏展示不全的时候,需要使用属性,white-space:no-wrap,来强制内容在同一行,同时使用overflow-x:scroll来让元素在水平方向可以滑动。
2655 0
video标签自动播放视频和移动端封面空白问题解决
video标签自动播放视频和移动端封面空白问题解决
1164 0
video标签自动播放视频和移动端封面空白问题解决
|
Web App开发 JavaScript
webrtc 调用摄像头并实时在浏览器中显示图像
        WebRTC,名称源自网页实时通信(Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的技术,是谷歌2010年以6820万美元收购Global IP Solutions公司而获得的一项技术。
2760 1
|
9月前
|
JavaScript 前端开发
js实现点击音频实现播放功能
js实现点击音频实现播放功能
|
Ubuntu Linux 人机交互
快速实现摄像头视频画面的远程预览
通过阿里云生活物联网平台的智能视频服务Link Visual来快速的搭建并实现摄像头视频画面的远程预览功能。
|
编解码 开发者 Python
Kivy之Video控件播放远程RTSP流
Kivy之Video控件播放远程RTSP流
493 0
Kivy之Video控件播放远程RTSP流

热门文章

最新文章