基于Nodejs+Canvas+WebSocket实现视频流直播H5应用

Node服务器端与客户端均使用socket.io提供的全双工通信协议模块

# Node服务端安装Socket.io
npm i socket.io
# 客户端使用Socket.io-client
npm i socket.io-client

LIVE角色分为主播端、观众端，通过共享session识别登录状态分配直播或观看权限。

  # 支持session安装下方模块
  npm i express-session
  # 与socket.io分享session还需同时安装下方模块
  npm i express-socket.io-session

Chrome浏览器处于安全考虑，除本机IP外禁止非HTTPs协议传输的页面调用获取用户媒介权限，Firefox则无限制。

// 处理各浏览器兼容问题
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// 请求获取用户媒介
navigator.getUserMedia({
  audio: false,
  video: {
    width: videoWidth, 
    height: vidoeHeight
  }},
  onsuccess,
  onerror
)

将视频帧编码为base64图像通过websocket协议传输至服务器。

// 第一个参数可以是 'image/png' 'image/jpeg' 'image/webm'，后两者可设置图像质量
const quality = .5
canvas.toDataURL('image/webp', quality)

关于base64加密解密

// 编码base64数据
btoa('shuaihua')  // c2h1YWlodWE=
// 解码base64数据。
atob('c2h1YWlodWE=') // shuaihua

ffmpeg每隔一段时间提取视频帧并输出为图像文件

# 每0.2秒输出一帧300*250大小的图像，以序号命名图像，图像格式为jpg
ffmpeg -i ./movie/videoplayback.mp4 -f image2 -vf fps=fps=1/.2 -s 300x250 %d.jpg