如何通过WebRTC开发实时互动AI视频应用

前段时间负责一个人脸和手势识别的可视化大屏项目，前端需要负责的主要任务是：通过获取摄像机实时视频流，将获取到的视频流在canvas上播放，然后每隔1000ms抽帧，并在压缩后通过保持WebSocket连接发送给后端服务器。经过服务器上的AI视觉模型算法处理后，前端接收人脸识别、手势识别及其他相关结构化数据，根据业务场景完成人机交互和数据展示。
基于最初的调研结果和实现条件，我们先后尝试了两种解决方案。

使用USB驱动或内置摄像头，通过WebRTC提供的API直接获取本地媒体MediaSteam，直接捕获视频流在canvas上播放。由于获取的是本地媒体流，不需要网络传输和解码，相比于方案1，前端的处理工作大大减少，接下来不间断地保持抽帧发送给服务端即可。

不难看出，方案1与方案2的差别在于视频流的来源。方案1中的视频流是通过JSMpeg 内置的Node中继服务器将其推送至前端，而方案2的视频流是通过WebRTC获取。看上去似乎方案2似乎省事儿一些，的确如此，方案2的实际效果比方案1要更加出色。

关于两种方案中主要用到的JSMpeg和WebRTC，接下来和童鞋们一起讨论学习下。

// HTTP服务器接收来自ffmpeg的MPEG-TS流

var streamServer = http.createServer( function(request, response) {
    request.on('data', function(data){
        socketServer.broadcast(data);
    });
    request.on('end',function(){
        console.log('close');
    });

}).listen(STREAM_PORT);

ffmpeg -f v4l2 -framerate 25 -video_size 640x480 -i /dev/video0 -f mpegts -codec:v mpeg1video -s 640x480 -b:v 1000k -bf 0 http://127.0.0.1:8081

0 1

获取可访问的媒体设备

if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
  console.log("不支持 enumerateDevices() .");
  return;
}
// 列出相机和麦克风.
 navigator.mediaDevices.enumerateDevices()
    .then(function (devices) {
        devices.forEach(function (device) {
            console.log(device.kind + ": " + device.label +
                " id = " + device.deviceId);
        });
    })
    .catch(function (err) {
        console.log(err.name + ": " + err.message);
    });

0 2

获取可使用的媒体流

1. MediaDevices.getUserMedia()

var video = document.createElement('video');
var constraints = {
  audio: false,
  video: true
};

function successCallback(stream) {
  window.stream = stream;  //MediaStream对象
  video.srcObject = stream;
}

function errorCallback(error) {
  console.log('navigator.getUserMedia error: ', error);
}

function getMedia(constraints) {
  if (window.stream) {
    video.src = null;
    window.stream.getVideoTracks()[0].stop();
  }
  navigator.mediaDevices.getUserMedia(
    constraints
  ).then(
    successCallback,
    errorCallback
  );
}

• constraints

比如你想要使用1280x720的摄像头分辨率：

{
  audio: true,
  video: { width: 1280, height: 720 }
}

{
  audio: true,
  video: {
    width: { min: 1280 },
    height: { min: 720 }
  }
}

{
  audio: true,
  video: {
    width: { ideal: 1280 },
    height: { ideal: 720 }
  }
}

当你的设备存在多个摄像头时，可以优先选择前置：

{ audio: true, video: { facingMode: "user" } }

或者强制使用后置摄像头：

{
    audio: true,
    video: {
        facingMode: {
            exact: "environment"
        }
    }
}

任性的你也许只想要某个特定设备，那你需要用 deviceId 来约束，浏览器会优先获取此设备。

{ video: { deviceId: myPreferredCameraDeviceId } }

好了，以上将返回你需要的媒体设备。

• 常见异常抛出     

var promise = navigator.mediaDevices.getUserMedia({
    video: true,
    audio: false
});

promise.then(function (MediaStream) {
    video.srcObject = MediaStream;
}).catch(err => {
    if (err.name == 'NotFoundError' || err.name == 'DeviceNotFoundError') {
        // 找不到满足请求参数的媒体类型
        console.log(err.name, 'require track is missing');
    } else if (err.name == 'NotReadableError' || err.name == 'TrackStartError') {
        // 设备已经授权，但是某个硬件、浏览器或者网页层面发生的错误导致设备无法被访问
        console.error(err.name, 'webcam or mic are already in use');
    } else if (err.name == 'OverconstrainedError' || err.name == 'ConstraintNotSatisfiedError') {
        // 指定的要求无法被设备满足，此异常是一个类型为OverconstrainedError的对象
        console.error(err.name, 'constraints can not be satisfied by avb.device');
    } else if (err.name == 'NotAllowedError' || err.name == 'PermissionDeniedError') {
        // 用户拒绝了浏览器实例的访问请求
        console.error(err.name, 'permission denied in browser');
    } else if (err.name == 'TypeError' || err.name == 'TypeError') {
        // constraints对象未设置，或者都被设置为false
        console.error(err.name, 'empty constraints object');
    } else {
        // 其他错误
        console.error(err.name, 'other errors');
    }
});

2. MediaDevices.getDisplayMedia()

navigator.getDisplayMedia({ video: true })
  .then(stream => {
    // 成功回调的流，将它赋给video元素；
    videoElement.srcObject = stream;
  }, error => {
    console.log("Unable to acquire screen capture", error);
  });

• constraints

• 异常     

3. getUserMedia与getDisplayMedia比较

function drawImage(drawImageRate) {   context.drawImage(video, 0, 0, width, height);   let base64Image = canvas.toDataURL('image/jpeg', 1); //格式为image/jpeg或image/webp时，从0到1的区间定制图的质量   ... //压缩等处理后   window.rws.send(JSON.stringify({ image: base64Image })); } window.drawInter = setInterval(drawImage, drawImageRate = 1000);

关于canvas画布转换成img图像，除了base64外，也可以选择Blob格式，因为是二进制的，对后端更加友好。

canvas.toBlob(callback, mimeType, qualityArgument)

这里是关于抽帧的小demo（https://chhxin.github.io/webrtc-demo/）

你点的每个赞，我都认真当成了喜欢