JS调用摄像头、实时视频流上传（一次不成功的试验）

最新推荐文章于 2024-07-27 18:38:21 发布

Luncert

最新推荐文章于 2024-07-27 18:38:21 发布

阅读量5.1k

点赞数

分类专栏： Golang 文章标签： JS摄像头实时推送

本文链接：https://blog.csdn.net/qq_37242224/article/details/102733337

版权

本文记录了一次使用JS调用摄像头，通过WebRTC获取视频流并尝试实时上传的试验过程。作者遇到的问题是每100ms抓取的一帧800*800 png图片大小约2MB，导致上传不切实际。后端使用Go接收websocket消息并解码。由于问题，作者决定转向研究RTMP技术。

摘要由CSDN通过智能技术生成

JS调用摄像头、实时视频流上传（一次不成功的试验）

思路

前端调用摄像头，获取视频流，从视频流中取一帧转图片，用websocket上传图片。

研究了一下发现了WebRTC这种技术，看到有博客说一些直播应用使用WebRTC将视频流发布到服务器上，然后用hls等技术在前端播放，但是我花了些时间还是没搞清楚WebRTC的原理，只能以后再尝试了。

1.前端代码

前端用的React+Typescript，所以这里贴出tsx代码。
逻辑比较简单，调用WebRTC的接口getUserMedia获取视频流，然后把stream绑定到video元素上，接下来设个clock，每100ms抓一次视频帧（fps=10），将其画到canvas上后就可以调canvas.toDataUrl把图片的位图数据编码成png格式，编码是必须的，因为编码后的数据一般比原始数据小一个数量级，节约带宽。也可以编码成其他格式，像jpeg或者webp，我对这些格式了解不多，可能压缩率最高的是webp。

其实到这一步已经出现问题了，800*800大小的png图片大小也近2M左右，这意味着一秒钟要上传10 * 2M = 20M的数据，十分不现实。没有测试过转webp格式，我觉得效果也不会太好，还是直接上传视频流比较好

export default class App extends React.Component<any, State> {
   

  componentDidMount() {
   
    let canvas = (this.refs.canvas as HTMLCanvasElement)
    let canvasContext = canvas.getContext('2d') as CanvasRenderingContext2D

    let video = (this.refs.video as HTMLVideoElement)
     navigator.getUserMedia({
   video: true},
      (stream: MediaStream) => {
   
              video.srcObject = stream
        video.play()
        // upload stream to server
        let ws = this.initWebSocket(
          () => {
   
            console.log('start send frames')