webRtc-streamer简单使用-备份

最新推荐文章于 2024-09-13 21:31:36 发布
最新推荐文章于 2024-09-13 21:31:36 发布
阅读量6k 收藏 26
点赞数 7
文章标签： webrtc vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66509866/article/details/126119002
版权

公司业务需求，在前端实现海康摄像头的实时播放，参考文档资料后决定使用webrtc-streamer来实现rtsp流的播放，在此备份一下，也希望能够帮助到有需要的友友。

准备工具

1.这里使用的是webrtc-streamer来对rtsp流视频进行转码，从而实现前端界面的播放。因为开始接手项目的时候公司没有流媒体服务器，所以是在本地测试，对本地cpu有一定的压力。你也可以将webrtc打包到docker镜像里运行。

https://wws.lanzouy.com/inBMK08uv02h （webrtc-streamer链接）

2.我这里使用的是videojs包，当然你也可以直接用原生的video标签进行播放。下面附上相关依赖。

{
  "name": "videojsdemo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "chokidar": "^3.5.3",
    "core-js": "^3.23.4",
    "video.js": "^7.18.1",
    "videojs-contrib-hls": "^5.15.0",
    "vue": "^2.6.14",
    "vue-baidu-map": "^0.21.22",
    "vue-router": "^3.5.1",
    "vue-webrtc": "^2.0.0",
    "vueui": "^0.1.4",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.6.14"
  }
}

一、使用步骤

1.这是我封装的视频播放的组件，可以按照需求自行修改。

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <!-- <map-video :showV="videoShow" :rtspIp="rtspIp"></map-video> -->
        <div style="height: 40vh">
          <!-- 
            this.hackReset = false;//销毁组件
            this.$nextTick(() => {
            this.hackReset = true;//重建组件
            });
          -->
          <video
            :id="videoID"
            class="video-js"
            style="object-fit: fill"
            controls
            autoplay
            autobuffer
            muted
            preload="auto"
          ></video>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import "video.js/dist/video-js.css";
import videojs from "video.js";
export default {
  name: "TanchengkjWebDialogCom",

  props: {
    videoID: {
      type: String,
      default() {
        return "videoID";
      },
    },
    rtspIp: {
      type: String,
      default() {
        return "";
      },
    },
    videoShow: {
      type: Boolean,
      default() {
        return false;
      },
    },
    videoPlayName: {
      type: String,
      default() {
        return "";
      },
    },
  },

  data() {
    return {
      dialogFromVisible: this.videoShow,
      inDate: "",
      t2: null,
      getUrl: localStorage.getItem("getUrl"),
      player: null,
      webRtcServer: null,
      webRtcList: [],
      playerList: [],
      videoSeting: {
        language: "zh-CN",
        autoplay: true, // true/false 播放器准备好之后，是否自动播放 【默认false】
        controls: true, // /false 是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
        /* height: 100, // 视频容器的高度，字符串或数字 单位像素 比如： height:300 or height:‘300px‘
         width: 100, // 视频容器的宽度, 字符串或数字 单位像素*/
        loop: false, // /false 视频播放结束后，是否循环播放
        muted: true, // /false 是否静音
        poster: "", // 播放前显示的视频画面，播放开始之后自动移除。通常传入一个URL
        preload: "auto", // 预加载   ‘auto‘ 自动   ’metadata‘ 元数据信息 ，比如视频长度，尺寸等 ‘none‘ 不预加载任何数据，直到用户开始播放才开始下载
        bigPlayButton: true,
      },
    };
  },
  watch: {
    videoShow: {
      immediate: true,
      handler: function (value) {
        this.dialogFromVisible = value;
        if (value == false) {
          console.log("视频关闭了！");
          // this.playerList[0].pause();
          // this.webRtcList[0].webRtcServer.disconnect();
        } else {
          this.$forceUpdate();
          console.log("输出一下rtsp：", this.rtspIp);
          setTimeout(() => {
            this.getWebRtc();
          }, 1000);
        }
      },
    },
  },

  mounted() {
    let that = this;
    this.initNDate();
    let procedure1 = new Promise(function (resolve, reject) {
      setTimeout(function () {
        console.log("1执行crtWebRtc成功！");
        that.crtWebRtc();
        resolve();
      });
    });

    let procedure2 = new Promise(function (resolve, reject) {
      setTimeout(function () {
        console.log("2执行getvideo成功！");
        that.getVideo();
        resolve();
      });
    });

    let procedure3 = new Promise(function (resolve, reject) {
      setTimeout(function () {
        console.log("3执行getWebRtc成功！");
        that.getWebRtc();
        resolve();
      });
    });

    procedure1
      .then((data) => {
        return procedure2;
      })
      .then((data) => {
        return procedure3;
      });

    // console.log("mounted输出rtspip：", this.rtspIp);
    // console.log("mounted输出videoID：", this.videoID);
    // console.log("mounted输出getUrl：", this.getUrl);
  },
  created() {},

  methods: {
    /*设置当前系统时间*/
    initNDate: function () {
      this.t2 = setInterval(() => {
        this.inDate = new Date().toLocaleString();
      }, 1000);
    },

    getVideo() {
      let that = this;
      this.playerList[0] = videojs(
        this.videoID,
        this.videoSeting,
        function onPlayerReady() {
          videojs.log("Your player is ready!");
          this.on("loadstart", function () {
            console.log("开始请求数据 ");
          });
          this.on("progress", function () {
            console.log("正在请求数据 ");
          });
          this.on("loadedmetadata", function () {
            console.log("获取资源长度完成 ");
          });
          this.on("canplaythrough", function () {
            console.log("视频源数据加载完成");
          });
          this.on("waiting", function () {
            console.log("等待数据");
          });
          this.on("play", function () {
            console.log("视频开始播放");
          });
          this.on("playing", function () {
            console.log("视频播放中");
          });
          this.on("pause", function () {
            console.log("视频暂停播放");
            that.webRtcList[0].webRtcServer.disconnect();
          });
          this.on("ended", function () {
            console.log("视频播放结束");
          });
          this.on("error", function () {
            console.log("加载错误");
          });
          this.on("seeking", function () {
            console.log("视频跳转中");
          });
          this.on("seeked", function () {
            console.log("视频跳转结束");
          });
          this.on("ratechange", function () {
            console.log("播放速率改变");
          });
          this.on("timeupdate", function () {
            console.log("播放时长改变");
          });
          this.on("volumechange", function () {
            console.log("音量改变");
          });
          this.on("stalled", function () {
            console.log("网速异常");
          });
        }
      );
      this.playerList.push(this.player);
      console.log("playerList", this.playerList);
      console.log("id_", this.playerList[0].id_);
    },
    crtWebRtc() {
      console.log("webRtcList:", this.webRtcList);
      for (const item of this.webRtcList) {
        if (this.videoID == item.name) {
          return;
        }
      }
      console.log("进来了开始初始化webRtc模块:", this.videoID);
      this.webRtcServer = new WebRtcStreamer(
        this.videoID,
        // "http://192.168.1.166:8000"
        this.getUrl
      );
      let s = {};
      s.name = this.videoID;
      s.webRtcServer = this.webRtcServer;
      this.webRtcList.push(s);
      console.log("this.webrtc哈", this.webRtcList);
    },
    getWebRtc() {
      console.log("将rtspip传递给webRtcServer.connect:", this.rtspIp);
      console.log("打印：webrtclist", this.webRtcList);
      this.webRtcList[0].webRtcServer.connect(this.rtspIp);
      // for (const item of this.webRtcList) {
      //   if (this.videoID == item.name) {
      //     return;
      //   }
      //   item.webRtcServer.connect(this.rtspIp);
      // }
    },
  },
  beforeDestroy() {
    console.log("运行销毁前生命周期事件");
    // this.webRtcList[0].webRtcServer.disconnect();
    // if (this.player) {
    // this.playerList[0].dispose();
    // }
  },
};
</script>

<style scoped>
.lf20 {
  margin-left: 20px;
}

/* // 覆盖层元素增加可穿透点击事件 */
.el-dialog__wrapper {
  pointer-events: none;
}

/* // 弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件） */
.el-dialog {
  pointer-events: auto;
}

.el-dialog__title {
  line-height: 24px !important;
  font-size: 15px !important;
  color: #303133;
}

.el-dialog__header {
  padding: 5px 5px 0px 5px !important;
  text-align: left;
}

.el-dialog__headerbtn {
  position: absolute;
  top: 5px !important;
  right: 5px !important;
  padding: 0;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 16px;
}

.el-dialog__body {
  padding: 2px !important;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
  height: 40vh;
  overflow-y: auto;
}

.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 0px 0 !important;
}

.el-menu:hover {
  opacity: 1 !important;
}

.ve-line {
  margin-left: 10px;
  padding-top: 20px;
  color: #fff4fd;
  width: 540px !important;
}
.el-row {
  margin-bottom: 2px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  height: 230px;
}
.row-bg {
  background-color: #f9fafc;
}
.cell-v {
  display: flex;
  flex-direction: column;
  height: 30vh;
}
.player {
  height: 100%;
}
.bk-button-group {
  color: #00a0e9;
}

.video-js {
  width: 100%;
  height: 100%;
}

.video-js .vjs-big-play-button {
  top: 50%;
  left: 50%;
  margin-left: -1.5em;
  margin-top: -1em;
}
.vjs-loading-spinner:before,
.vjs-loading-spinner:after {
  content: "";
  position: absolute;
  margin: -6px;
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: 1;
  border: inherit;
  border-color: transparent;
  border-top-color: white;
  display: none;
}
</style>

二、使用步骤

###1.其实使用webrtc来实现rtsp流视频的播放很简单，只需要注意以下几点：
####1.首先是初始化webrtc服务
打开webrtc-streamer.exe我们可以看到，它这里监听的是8000端口
所以后续我们在初始化webrtcserver的时候需要将你运行项目的地址与8000端口拼接

这边的"video"是video标签的id，因为id是唯一标识

####2.初始化好了webrtc服务后是初始化video播放器了

methods: {
    playVideo() {
      this.webRtcServer.connect(this.rtspUrl);
      // 初始化播放器
      this.getVideo();
    },
    getVideo() {
      //this.videoSeting
      let that = this;
      this.player = videojs(
        "video",
        this.videoSeting,
        function onPlayerReady() {
          videojs.log("Your player is ready!");
          this.on("loadstart", function () {
            console.log("开始请求数据 ");
          });
          this.on("progress", function () {
            console.log("正在请求数据 ");
          });
          this.on("loadedmetadata", function () {
            console.log("获取资源长度完成 ");
          });
          this.on("canplaythrough", function () {
            console.log("视频源数据加载完成");
          });
          this.on("waiting", function () {
            console.log("等待数据");
          });
          this.on("play", function () {
            console.log("视频开始播放");
          });
          this.on("playing", function () {
            console.log("视频播放中");
          });
          this.on("pause", function () {
            console.log("视频暂停播放");
            that.webRtcServer.disconnect();
          });
          this.on("ended", function () {
            console.log("视频播放结束");
          });
          this.on("error", function () {
            console.log("加载错误");
          });
          this.on("seeking", function () {
            console.log("视频跳转中");
          });
          this.on("seeked", function () {
            console.log("视频跳转结束");
          });
          this.on("ratechange", function () {
            console.log("播放速率改变");
          });
          this.on("timeupdate", function () {
            console.log("播放时长改变");
          });
          this.on("volumechange", function () {
            console.log("音量改变");
          });
          this.on("stalled", function () {
            console.log("网速异常");
          });
        }
      );
    },
  },


这里的video同样指的是video播放器的id，与初始化播放器是一对一的关系
这里我将整个代码都贴上来吧，以免有友友看不太清楚

<template>
  <div class="container">
    <div class="control_1">
      <a>input http server:</a
      ><input type="text" v-model="httpServer" placeholder="请输入服务端地址" />
    </div>
    <div class="control_2">
      <a>input rtsp url:</a
      ><input type="text" v-model="rtspUrl" placeholder="请输入rtsp流地址" />
    </div>
    <button style="margin-top: 15px" @click="playVideo">
      准备好了点击播放视频
    </button>
    <div class="videoPlay">
      <video
        id="video"
        class="video-js"
        style="object-fit: fill; width: 500px; height: 500px"
        controls
        autoplay
        autobuffer
        muted
        preload="auto"
      ></video>
    </div>
  </div>
</template>

<script>
import "video.js/dist/video-js.css";
import videojs from "video.js";
export default {
  name: "TailwindCSSDaisyUIHomeView",

  data() {
    return {
      httpServer: "",
      rtspUrl: "",
      player: null,
      webRtcServer: null,
      videoSeting: {
        language: "zh-CN",
        autoplay: true, // true/false 播放器准备好之后，是否自动播放 【默认false】
        controls: true, // /false 是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
        /* height: 100, // 视频容器的高度，字符串或数字 单位像素 比如： height:300 or height:‘300px‘
         width: 100, // 视频容器的宽度, 字符串或数字 单位像素*/
        loop: false, // /false 视频播放结束后，是否循环播放
        muted: true, // /false 是否静音
        poster: "", // 播放前显示的视频画面，播放开始之后自动移除。通常传入一个URL
        preload: "auto", // 预加载   ‘auto‘ 自动   ’metadata‘ 元数据信息 ，比如视频长度，尺寸等 ‘none‘ 不预加载任何数据，直到用户开始播放才开始下载
        bigPlayButton: true,
      },
    };
  },

  mounted() {
    var a = `${window.location.href}`;
    var b = a.split(":");
    this.httpServer = `${b[0]}:${b[1]}:8000/`;
    console.log("httpServer", this.httpServer);
    // 初始化webrec服务
    this.webRtcServer = new WebRtcStreamer("video", this.httpServer);
  },

  methods: {
    playVideo() {
      this.webRtcServer.connect(this.rtspUrl);
      // 初始化播放器
      this.getVideo();
    },
    getVideo() {
      //this.videoSeting
      let that = this;
      this.player = videojs(
        "video",
        this.videoSeting,
        function onPlayerReady() {
          videojs.log("Your player is ready!");
          this.on("loadstart", function () {
            console.log("开始请求数据 ");
          });
          this.on("progress", function () {
            console.log("正在请求数据 ");
          });
          this.on("loadedmetadata", function () {
            console.log("获取资源长度完成 ");
          });
          this.on("canplaythrough", function () {
            console.log("视频源数据加载完成");
          });
          this.on("waiting", function () {
            console.log("等待数据");
          });
          this.on("play", function () {
            console.log("视频开始播放");
          });
          this.on("playing", function () {
            console.log("视频播放中");
          });
          this.on("pause", function () {
            console.log("视频暂停播放");
            that.webRtcServer.disconnect();
          });
          this.on("ended", function () {
            console.log("视频播放结束");
          });
          this.on("error", function () {
            console.log("加载错误");
          });
          this.on("seeking", function () {
            console.log("视频跳转中");
          });
          this.on("seeked", function () {
            console.log("视频跳转结束");
          });
          this.on("ratechange", function () {
            console.log("播放速率改变");
          });
          this.on("timeupdate", function () {
            console.log("播放时长改变");
          });
          this.on("volumechange", function () {
            console.log("音量改变");
          });
          this.on("stalled", function () {
            console.log("网速异常");
          });
        }
      );
    },
  },
};
</script>

<style>
.control_1 {
  display: block;
  /* margin-top: 20px; */
}
.control_2 {
  display: block;
  margin-top: 15px;
}
.videoPlay {
  width: 500px;
  height: 500px;
  margin: 15px auto;
}
.video-js {
  width: 100%;
  height: 100%;
}

.video-js .vjs-big-play-button {
  top: 50%;
  left: 50%;
  margin-left: -1.5em;
  margin-top: -1em;
}
.vjs-loading-spinner:before,
.vjs-loading-spinner:after {
  content: "";
  position: absolute;
  margin: -6px;
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: 1;
  border: inherit;
  border-color: transparent;
  border-top-color: white;
  display: none;
}
</style>

这个案例是通过input的双向绑定原理，将当前项目的url与8000端口拼接，然后输入rtsp流点击播放进行播放。
成功截图

总结

第一次写，见谅
可能写得不太好
如果有啥问题，可以留言交流

拄杖盲写轻声码
关注
webrtc-streamer-v0.8.1
11-16
webrtc-streamer-v0.8.1
webrtc-streamer:用于V4L2捕获设备，RTSP源和屏幕捕获的WebRTC流媒体
04-05
WebRTC流媒体 WebRTC-streamer是一项使用简单机制通过WebRTC流式传输视频捕获设备和RTSP源的实验。 它嵌入了一个实现API的HTTP服务器，并提供了一个简单HTML页面，该页面通过AJAX使用它们。 WebRTC信令是通过HTTP请求实现的： / api / call：发送报价并获取答案 / api / hangup：关闭通话 / api / addIceCandidate：添加候选人 / api / getIceCandidate：获取候选人列表 可使用/ api / help获得HTTP API列表。 如今，在 ， ， 和上进行了构建： 适用于Ubuntu Bionic上的x86_64 适用于交叉编译的armv7（此版本在Raspberry Pi2和NanoPi NEO上运行） 适用于交叉编译的armv6 + vfp（此版本在Raspberr
WebRTC-Streamer 常见问题解决方案
最新发布
gitblog_09267的博客
09-13 1201
WebRTC-Streamer 常见问题解决方案 webrtc-streamer WebRTC streamer for V4L2 capture devices, RTSP sources and Screen Capture ...
【使用webrtc-streamer解析rtsp视频流】
baidu_41564215的博客
06-27 2250
使用webrtc-streamer，解析rtsp视频流
webrtc-streamer-card:可以从webrtc-streamer（RTSP，H264，H265 ...）流式传输零延迟视频的家庭辅助Lovelace卡
05-23
webrtc-流光卡 可以从webrtc-streamer（RTSP，H264，H265 ...）流式传输零延迟视频的家庭辅助Lovelace卡 您需要一个正在运行的Webrtc-streamer实例，有关更多详细信息和完整选项，请参见官方存储库： : webrtc-streamer基于live555 lib，因此它应该能够处理MPEG，H.265，H.264，H.263 +，DV或JPEG视频以及几种音频编解码器。 可以通过Docker运行最简单的方法docker run -p 8000:8000 -it mpromonet/webrtc-streamer 在您的家庭辅助www目录中克隆或解压缩此存储库。 自定义卡必须作为仪表板资源中的模块添加： resources: - url: /local/webrtc-streamer-card/webrtc-streame
vue3+vite+ts 使用webrtc-streamer播放海康rtsp监控视频
敲厉害的燕宝的博客
06-12 4902
webrtc-streamer 是一个使用简单机制通过 WebRTC 流式传输视频捕获设备和 RTSP 源的项目，它内置了一个小型的 HTTP server 来对 WebRTC需要的相关接口提供支持。相对于ffmpeg+flv.js的方案，延迟降低到了0.4秒左右，画面的加载速度也变快了，切换浏览器标签后也不会暂停画面，并且解决了http1.1的同域名中的并发限制(在谷歌浏览器中可以同时播放6个以上的video)。
Docker部署WebRTC-Streamer
qwjy的博客
04-14 4696
WebRTC-Streamer是一个基于WebRTC技术的流媒体传输工具，它可以通过Web浏览器实现实时音视频流的传输和播放。它提供了一种简单而强大的方式，允许用户在不需要插件或额外软件的情况下进行实时通信和流媒体传输。实时音视频传输：使用WebRTC技术，可以在浏览器中通过实时传输音频和视频流来进行实时通信，比如语音通话、视频聊天等。网络摄像头和麦克风支持：支持从用户计算机上的摄像头和麦克风捕获音视频流，并将其传输到目标设备。
webrtc-streamer
05-22
webrtc-streamer cmd 启动： webrtc-streamer.exe -o -H 0.0.0.0:9001
webrtc基于webrtc-streamer推流实现直播
02-02
在"webrtc-streamer"中，主要作用是将来自WebRTC的流转换为其他格式，如HTTP或RTSP，这样就可以通过标准协议推送到各种平台，如流媒体服务器，或者供其他不支持WebRTC的客户端使用。它通常用作一个中间层，接收来自...
使用webrtc-streamer查看rtsp实时视频
zouxin_88的专栏
07-09 1303
将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到webrtc文件夹下。rtsp地址（html中配置）： rtsp://admin:admin@192.168.43.110:554/stream0。浏览网址（phpstudy中配置）:http://192.168.43.102/webrtc/webrtc.html。在浏览器访问127.0.0.1:8000，点击窗口可以看到本机上各窗口实时状态，点击摄像头可以显示摄像头画面。
使用webrtc-streamer查看实时监控
qq_57436326的博客
07-25 1045
下载后解压出来双击运行，端口默认8000。
WebRTC-Streamer: 实现实时音视频通信的开源项目指南
gitblog_00892的博客
08-08 1348
WebRTC-Streamer: 实现实时音视频通信的开源项目指南 webrtc-streamerWebRTC streamer for V4L2 capture devices, RTSP sources and Screen Capture项目地址:https://gitcode.com/gh_mirrors/we/webrtc-streamer 项目介绍 webrtc-streamer, ...
利用Webrtc-streamer展示rstp视频流
书读百遍，其义自见
03-22 6568
目录一级目录二级目录三级目录一、下载二、docker方式安装下载镜像把rstp流加入、设置别名、启动三、启动四、html使用效果 一级目录 二级目录 三级目录 Webrtc-streamer展示rstp视频流，网上很多都没有说清楚，这里记录下。 一、下载 https://github.com/mpromonet/webrtc-streamer/releases 二、docker方式安装 下载镜像 docker pull mpromonet/webrtc-streamer 把rstp流加入、设置别名、
vue实现rtsp视频流浏览器实时播放
mullerpp的博客
07-15 8980
因为video标签只能播放特定格式的视频，比如MP4、WebM和Ogg格式，而对于这种视频流文件则需要通过转码实现，而vue-video-player也只能播放特定格式的视频，所以要播放监控的实时视频，除了在浏览器的地址栏直接打开摄像头的地址，还可以通过webrtc-streamer和video标签在页面实现监控实时播放。
webrtc-streamer实现网络摄像头实时监控
04-19
1、win7到win11都试过了，都可以。win11使用webrtc-streamer-v0.7.2（支持性比较好）。 2、打开30个延时在1s左右。 3、不要双击启动exe文件。有窗口和无窗口的bat文件已经写好了，文件在webrtc下。 4、运行之后，改一下html的rtsp流。 5、支持所有浏览器，不需要插件。
rpi-webrtc-streamer：此存储库的目标是在最受欢迎的Raspberry PI硬件上提供类似Web Cam服务器的功能。 通过集成[WebRTC]（https：webrtc.orgnative-code）和Raspberry PI，我们可以将Raspberry摄像机供稿流式传输到使用WebRTC的浏览器或本机客户端
02-05
用于Raspberry PI的WebRTC流媒体 一般 注意：这是一项正在进行的工作， 该仓库的目标是在最流行的Raspberry PI硬件上提供类似Web Cam服务器的功能。 通过集成和Raspberry PI，我们可以将Raspberry摄像机供稿流式传输到使用WebRTC的浏览器或本机客户端。 通常，WebRTC服务的组件分为信令服务器和WebRTC客户端。 但是，RWS（Rpi-WebRTC-Streamer）构建为可在一种Raspberry PI硬件上运行，并且包括一些Signaling Server功能。 换句话说，支持WebRTC的浏览器或客户端直接连接到RWS并接收Web
评论 27
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值