webrtclib

一个webrtc的vue前端实现，支持截图和录像，后端代码暂未发布

npm导入

npm install webrtclib

引入组件

import videoWebrtc from "webrtclib";
import "webrtclib/lib/videoWebrtc.css"

Vue.use(videoWebrtc);

使用

<video-webrtc
        :server="server"
        :stun="stun"
        :sid="sid"
        :orgId="orgId"
        @saveVideo="saveVideo"
        @capture="capture"
      ></video-webrtc>

参数说明

| 参数 | 类型 | 类型 | 解释 | | ---- | ---- | ---- | ---- | | server | 必传 | String | 服务地址 | | stun | 必传 | String | ice协议服务地址 | | sid | 必传 | [Number, String] | 直播时候传入的设备id | | orgId | 必传 | [Number, String] | 直播时候传入的组织ID | | custTime | 非必传 | [Number, String] | 录像时间（秒），默认5分钟，最大1小时 | | saveVideo | 非必传 | 回调方法 | 返回录像地址url | | capture | 非必传 | 回调方法 | 返回截图文件base64 |

tips

录像需要配置proxy

 proxy: {
      "/webrtcApi": {
        target: "http://ip:port", // 目标接口域名
        pathRewrite: {
          "^/webrtcApi": ""
        },
        changeOrigin: true // 是否跨域
      }
    }

demo参考

<template>
  <div class="home">
    <div class="video" v-for="item in arr" :key="item">
      <video-webrtc
        :server="server"
        :stun="stun"
        :sid="sid"
        :orgId="orgId"
        @saveVideo="saveVideo"
        @capture="capture"
      ></video-webrtc>
    </div>
    <div class="dialog-mask" v-if="imgCapture" @click="imgCapture = null"></div>
    <div class="dilog" v-if="imgCapture">
      <img v-if="imgCapture" :src="imgCapture" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      arr: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      stun: "stun://ip:port",
      server: "ws://ip:port/wsrtc",
      sid: "摄像头ID",
      orgId: "组织ID"
      imgCapture: ""
    };
  },
  methods: {
    // 截图
    capture(val) {
      console.log(val);
      this.imgCapture = val;
    },
    // 录像
    saveVideo(val) {
      console.log(val);
    }
  }
};
</script>
<style>
.home {
  display: flex;
  flex-wrap: wrap;
}
.video {
  width: 320px;
  height: 180px;
  position: relative;
  margin: 10px;
}
.dialog-mask {
  position: absolute;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #00000090;
}
.dilog {
  position: absolute;
  z-index: 1001;
  width: 80%;
  left: 10%;
  top: 10%;
  padding: 20px;
  background-color: #fff;
}
</style>