VUE+websocket编写实现PC web端控制摄像头

这篇具有很好参考价值的文章主要介绍了VUE+websocket编写实现PC web端控制摄像头。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

前言

一、WebSocket简介

二、API接口

三、后台服务器

四、实例

视频流框

类“遥控器”模块控制视频画面

五、完整功能展示(视频不懂上传,泪目)

六、完整代码

总结


 文章来源地址https://www.toymoban.com/news/detail-401361.html

 

前言

一、WebSocket简介

     WebSocket是一种全双工通信的数据通信协议。WebSocket的主要功能用处是允许服务器主动地向客户端推送数据信息,使得客户端和服务端之间的数据交换变得更加的简单。简单而言,其提供让浏览器和服务器只需进行一次握手,两者之间就可以建立起持久性的、双向的、没有延时的数据传输连接状态。在系统中通过创建WebSocket服务,对用户端发送的数据进行监听,验证握手状态结果,其原理流程如下图所示。

VUE+websocket编写实现PC web端控制摄像头

 了解到这里,我们顺道了解一下WebSocket的优势在哪里吧,这样你就可以看得出我们为什么要选择使用WebSocket了。

  1. 减少数据内存:Web Socket进行连接后,服务端和客户端之间进行数据交流所使用到的数据内存很小,一般在2-10字节。

  2. 实时性更优:基于全双工的特性下,服务端可以做到随时主动的向客户端发送数据,相较于HTTP请求(需要等待客户端发起请求后,客户端才响应),延时效果变得更少。

  3. 保存连接状态:Web Socket相比于HTTP不同的是,WebSocket只需要先创建一个数据连接,就可以让服务端和客户端之间保存一种有状态的协议。而HTTP请求可能在没一个请求之间都会有携带式的信息请求状态,比如登录界面的登录请求。

 

二、API接口

   因为使用WebSocket连接服务端和客户端,所以者之间WebSocket就是起到了连接的作用了,而API接口简单理解起来就是桥梁。在WebSocket连接过程中起到不可替代的作用。API接口(Application Programming lnterface),一种应用程序的编程式接口,是一种提供于系统开发与软硬件之间桥梁作用的作用,API接口封装简单、具有模块化、使用方便无需进行访问即可进行调用的特点。在农业管理系统中,下图所示为API提供数据信息下流动过程。

VUE+websocket编写实现PC web端控制摄像头

 在该功能里面,摄像头的API参数:

VUE+websocket编写实现PC web端控制摄像头

 

 

三、后台服务器

    在这一个功能中,我们要获取到的数据请求发送到服务器上,我这里使用的是Nginx服务器,这个服务器非常的人性化,是一款面向性能设计的http协议的服务器,对于后台数据设计处理的工作原理是Nginx服务器通过接收到客户端的请求,将该请求进行不同的分类,如接收到的数据请求是静态数据时,将直接返回客户端静态数据;如接收到的数据为动态请求,就将数据转到uWSGI(Web实现WSGI协议的服务器),再通过连接Django(Python的Web应用框架)进行数据处理。

VUE+websocket编写实现PC web端控制摄像头

                                                       Nginx服务器运行结构图

 

四、实例

Web Socket可以在客户端和服务端之间打开交互式的通信会话,因此使用API,可以向服务器发送信息并且接收信息的驱动的响应模式,而不需要通过一轮一次的方式得到响应,因此要想建立一个Web Socket连接、再使得连接成功触发时间、最后在对消息进行监听事件。创建Web Socket连接Const socket = new Web Socket('ws://locahost:8080);然后是的连接成功触发{Socket.send(')发送信息函数;在触发onMessage()将数据进行传输;最后onclose()关闭数据连接。

WebSocket.js

const Ws = require('ws') 

;( (Ws) => {

    const serve = new Ws.Serve({port:8000})
    const init = () => {
        bindEvent()
    }
    function bindEvent () {
         serve.on('open',handleOpen)
         serve.on('close',handleClose)
         serve.on('error',handleError)
         Serve.on('connection',handleConnection)
    }
    function handleOpen() {
        console.log('BE:Websocket open');
    }
    function handleClose() {
        console.log('BE:Websocket close');
    }
    function handleError() {
        console.log('BE:Websocket error');
    }
    function handleConnection() {
        console.log('BE:Websocket connection')
    }
    init()
})(Ws)

千万别忘记在摄像头这个功能模块上把获取到这个WebSocket的数据信息的功能加上去了,这里我们把摄像头的模块起一个专业点的名字,remote(远程):

VUE+websocket编写实现PC web端控制摄像头

 

视频流框

为什么要提及到这个呢,因为我们制作的这个建议的摄像头,你拿到了它的API地址,然后又建立起了服务端和客户端(你的电脑端)的连接,但是我们要怎么把它的效果展示出来呢,这时候,我们就可以通过使用一个画布canvas,建立起一个画布工具,将摄像头拍到的画面通过这个“画布”展示出其效果。

   接下来,就是我们“画布”的制作过程:

1、可以通过编写一个video的视频流框架延样式

import 'video.js/dist/video-js.css'

2、 编写视频流的script部分:

      // 视频流
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        controls: true, // 控制条
        preload: 'auto', // 视频预加载
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        language: 'zh-CN', // 语言为中文
        aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
        fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4',
          src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'// 你所放置的视频的地址,最好是放在服务器上
        }],
        poster: 'http://192.168.1.2:8081/', // 你的封面地址(覆盖在视频上面的图片)
        // width: document.documentElement.clientWidth,
        notSupportedMessage: '尚未可以播放' // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
      },

3、“画布”样式style:

.player-container {
  width: 350px;
  margin-left: 40%;
  margin-top: -260px;
   border:1px solid #96c2f1;
  border-image: url() 30 27 27 27 / 9px / 9px;
}

 

VUE+websocket编写实现PC web端控制摄像头

                                                                      视频流

 

类“遥控器”模块控制视频画面

当我们完成视频展示之后,我们还要制作一个类似遥控器的模块来进行对视频流画面的上下作呕进行操作控制,在这里说明一下,我们的canvas画布里面嵌套了一个小的div,这个小的div,看到的画面才是我们看到的画面,我们只要通过“遥控器”上的上下左右按钮改变div的画面,这样就可以完成了我们所谓的简易的摄像头的功能。

<!--调整摄像头方向-->
		<div class="change_camera_direction" v-show="camera"><!--摄像头的按钮显示-->
			<div class="camera_title">摄像头方向控制</div>

      <!--控制摄像头的部件-->
      <el-button type="primary" icon="el-icon-top" size=mini circle></el-button>
      <el-button type="primary" icon="el-icon-bottom" size=mini circle></el-button>
      <el-button type="primary" icon="el-icon-top" size=mini circle></el-button>
      <el-button type="primary" icon="el-icon-right" size=mini circle></el-button>
      <el-button type="primary" icon="el-icon-video-play" size=mini circle></el-button>
      <el-button type="primary" icon="el-icon-video-pause" size=mini circle></el-button>
		</div>

</div>
.box {
  width: 100%;
  height: 30vh;
  display: flex;
  margin: 0 auto;
  // flex-wrap: wrap;
  margin-top: 10%;
}
.image {
  width: 150px;
  height: 150px;
   border:1px solid #96c2f1;
  border-image: urlVUE+websocket编写实现PC web端控制摄像头) 27 10 27 27 / 5px / 5px;
}
.control-wrapper {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 25vw;
  height: 25vw;
  max-width: 150px;
  max-height: 150px;
  // margin: 0 auto;
  margin-right: 120px;
  margin-bottom: 50px;
  border-radius: 100%;
  }

.control-btn {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 44%;
  height: 44%;
  border-radius: 5px;
  border: 1px solid #78aee4;
  box-sizing: border-box;
  transition: all .3s linear;  
   border:1px solid #96c2f1;
  border-image: urlVUE+websocket编写实现PC web端控制摄像头) 30 27 27 27 / 9px / 9px;
  }

.control-btn i {
  font-size: 20px;
  // color: #78aee4;
  display: flex;
  justify-content: center;
  align-items: center;
   border:1px solid #96c2f1;
  border-image: urlVUE+websocket编写实现PC web端控制摄像头) 30 27 27 27 / 9px / 9px;
  }

.control-round
{position: absolute;
 top: 21%; left: 21%;
 width: 58%;
 height: 58%;
 background: #fff;
 border-radius: 100%;
 }

.control-round-inner {
  position: absolute;
  left: 15%;  top: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70%;
  height: 70%;
  font-size: 40px;
  color: #78aee4;
  border: 1px solid #78aee4;
  border-radius: 100%;
  transition: all .3s linear; 
  }

.control-inner-btn {
  position: absolute;
  width: 60%;
  height: 60%;
  background: #fafafa;
   border:1px solid #96c2f1;
  border-image: urlVUE+websocket编写实现PC web端控制摄像头) 30 27 27 27 / 9px / 9px;}

最后的按钮结果是: 

VUE+websocket编写实现PC web端控制摄像头

                                                                 遥控器

 

五、完整功能展示(视频不懂上传,泪目)

VUE+websocket编写实现PC web端控制摄像头

 

VUE+websocket编写实现PC web端控制摄像头

 

六、完整代码

<template>
  <div>
    <!-- 控制包装盒 -->
    <!-- PS就是喷杀的意思 -->
    <div class="control-wrapper" v-show="PS">
      <!-- 控制按钮 上部分 -->
    <div class="control-btn control-top">
      <!-- 顶部图标 -->
        <el-button v-on:click="Turnahead" >
        <!--单击点击事件车子前进-->
        <!-- <i class="fa fa-chevron-left"><h1></h1></i> -->
        <i class="el-icon-caret-top"></i>
      </el-button>
    </div>
  
    <!-- 控制按钮 左边 -->
    <div class="control-btn control-left" >
      <!-- 左部图标 -->
      <el-button v-on:click="Turnleft" >
        <!-- <i class="fa fa-chevron-left"><h1></h1></i> -->
        <i class="el-icon-caret-left"></i>
      </el-button>
    </div>

    <!-- 底部按钮 -->
    <div class="control-btn control-bottom">
      <!-- 底部图标 -->
      <el-button v-on:click="Turnbuttom" >
        <!-- <i class="fa fa-chevron-left"><h1></h1></i> -->
        <i class="el-icon-caret-bottom"></i>
      </el-button>
    </div>
    
    <!-- 右边按钮 -->
    <div class="control-btn control-right">
      <!-- 右边图标 -->
        <el-button v-on:click="Turnright" >
        <!-- <i class="fa fa-chevron-left"><h1></h1></i> -->
        <i class="el-icon-caret-right"></i>
      </el-button>
    </div>
    <!-- 控件弧形 -->
    <div class="control-round">
      <!-- 内部弧形 -->
        <div class="control-round-inner">
          <!-- 暂停键 -->
          <el-button v-on:click="Turnpause" circle >
        <!-- <i class="fa fa-chevron-left"><h1></h1></i> -->
        <i class="el-icon-video-pause"></i>
      </el-button>
        </div>
        <!-- 按钮部分 -->
        <div style="width:100px" class="buttons">
          <div><el-button style="width:90px;margin-top:-15px" type="primary" @click="PsIsShow">喷杀</el-button></div>
          <div><el-button style="width:90px;margin-top:5px" type="primary" @click="cameraisshow">摄像头</el-button></div>
          <div><el-button style="width:90px;margin-top:5px" type="primary">设备驾驶</el-button></div>
        </div>
        <el-row style="margin-top:10%">
          <el-button style="width:100px;margin-top:5px" type="primary" round>远程管理</el-button>
        </el-row>
    </div>

    <!-- 第二个盒子 -->
    <!--调整摄像头方向-->
		<div class="change_camera_direction" v-show="camera"><!--摄像头的按钮显示-->
			<div class="camera_title">摄像头方向控制</div>

      <!--控制摄像头的部件-->
      <el-button type="primary" icon="el-icon-top" size=mini circle></el-button>
      <el-button type="primary" icon="el-icon-bottom" size=mini circle></el-button>
      <el-button type="primary" icon="el-icon-top" size=mini circle></el-button>
      <el-button type="primary" icon="el-icon-right" size=mini circle></el-button>
      <el-button type="primary" icon="el-icon-video-play" size=mini circle></el-button>
      <el-button type="primary" icon="el-icon-video-pause" size=mini circle></el-button>
		</div>

</div>


  </div>
  <!-- 地图区域下面,设置可以保存路径的保存按钮 -->
  <el-row :gutter="3" style="margin-top:35px">
      <el-col :span="1.5"
        ><el-button type="primary" size="mini">保存</el-button></el-col
      >
      <el-col :span="4"
        ><el-input placeholder="请输入要保存的路径" size="mini"> </el-input
      ></el-col></el-row>
      <!-- 视频流 -->
      <div class="player-container">
    <video-player class="vjs-custom-skin" :options="playerOptions"></video-player>
    </div>
    <!-- 图片 -->
    <div class="box">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"><img src="" alt="" style="width:100%;height:100%"></div>
</div>
    <!-- 卡片试图一 -->
    <el-card class="box-card" style="height:250px;width:300px;margin-left:74%;margin-top:-45%">
  <div slot="header" class="clearfix">
    <span>最新病虫害信息:</span>
  </div>
  <div v-for="o in 5" :key="o" class="text item">
    {{'图 ' + o }}
  </div>
</el-card>
  </div>
</template>

<script>
// 引入video样式
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
export default {
  data () {
    const self = this
    return {
      //喷杀部分的显示与隐藏
      PS:true,
      // 摄像头部分的显示与隐藏
      camera:false,
      
      // 视频流
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        controls: true, // 控制条
        preload: 'auto', // 视频预加载
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        language: 'zh-CN', // 语言为中文
        aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
        fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4',
          src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'// 你所放置的视频的地址,最好是放在服务器上
        }],
        poster: 'http://192.168.1.2:8081/', // 你的封面地址(覆盖在视频上面的图片)
        // width: document.documentElement.clientWidth,
        notSupportedMessage: '尚未可以播放' // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
      },
      input: '',
      // 地图部分代码
      center: [121.59996, 31.197646],
      lng: 0,
      lat: 0,
      loaded: false,
      plugin: [
        {
          enableHighAccuracy: true,
          timeout: 100,
          maximumAge: 0,
          convert: true,
          showButton: true,
          buttonPosition: 'RB',
          showMarker: true,
          showCircle: true,
          panToLocation: true,
          zoomToAccuracy: true,
          extensions: 'all',

          pName: 'Geolocation',
          events: {
            init (o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                console.log(result)
                if (result && result.position) {
                  self.lng = result.position.lng
                  self.lat = result.position.lat
                  self.center = [self.lng, self.lat]
                  self.loaded = true
                  self.$nextTick()
                }
              })
            }
          }
        }
      ]
    }
  },
  // 喷杀的显示与否的方法
methods:{
  PsIsShow(){
    this.PS = true
  },
  // 操作面板中的单击点击事件(点击向前的事件)
  Turnahead() {
    
  },
  
  // 相机的显示与否的方法
  cameraisshow(){
    this.camera = !this.camera
  }

}
}
</script>

<style lang="less" scoped>
.buttons {
  justify-content: center;
  margin-left: 130px;
}
.player-container {
  width: 350px;
  margin-left: 40%;
  margin-top: -260px;
   border:1px solid #96c2f1;
  border-image: urlVUE+websocket编写实现PC web端控制摄像头) 30 27 27 27 / 9px / 9px;
}
.amap-demo {
  height: 250px;
  width: 400px;
  border:1px solid #96c2f1;
  border-image: urlVUE+websocket编写实现PC web端控制摄像头)  27 27 27 / 9px / 9px;
}
.box {
  width: 100%;
  height: 30vh;
  display: flex;
  margin: 0 auto;
  // flex-wrap: wrap;
  margin-top: 10%;
}
.image {
  width: 150px;
  height: 150px;
   border:1px solid #96c2f1;
  border-image: urlVUE+websocket编写实现PC web端控制摄像头) 27 10 27 27 / 5px / 5px;
}
.control-wrapper {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 25vw;
  height: 25vw;
  max-width: 150px;
  max-height: 150px;
  // margin: 0 auto;
  margin-right: 120px;
  margin-bottom: 50px;
  border-radius: 100%;
  }

.control-btn {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 44%;
  height: 44%;
  border-radius: 5px;
  border: 1px solid #78aee4;
  box-sizing: border-box;
  transition: all .3s linear;  
   border:1px solid #96c2f1;
  border-image: urlVUE+websocket编写实现PC web端控制摄像头) 30 27 27 27 / 9px / 9px;
  }

.control-btn i {
  font-size: 20px;
  // color: #78aee4;
  display: flex;
  justify-content: center;
  align-items: center;
   border:1px solid #96c2f1;
  border-image: urlVUE+websocket编写实现PC web端控制摄像头) 30 27 27 27 / 9px / 9px;
  }

.control-round
{position: absolute;
 top: 21%; left: 21%;
 width: 58%;
 height: 58%;
 background: #fff;
 border-radius: 100%;
 }

.control-round-inner {
  position: absolute;
  left: 15%;  top: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70%;
  height: 70%;
  font-size: 40px;
  color: #78aee4;
  border: 1px solid #78aee4;
  border-radius: 100%;
  transition: all .3s linear; 
  }

.control-inner-btn {
  position: absolute;
  width: 60%;
  height: 60%;
  background: #fafafa;
   border:1px solid #96c2f1;
  border-image: urlVUE+websocket编写实现PC web端控制摄像头) 30 27 27 27 / 9px / 9px;}

.control-top {
  top: -8%;
  left: 27%;
  transform: rotate(-45deg);
  border-radius: 5px 100% 5px 0;
  }

.control-top .control-inner {
  left: -1px;
  bottom: 0;
  border-top: 1px solid #78aee4;
  border-right: 1px solid #78aee4;
  border-radius: 0 100% 0 0;  
   border:1px solid #96c2f1;
  border-image: urlVUE+websocket编写实现PC web端控制摄像头) 30 27 27 27 / 9px / 9px;}

.control-top .fa {
  transform: rotate(45deg) translateY(-7px); }

.control-left {
  top: 27%;  left: -8%;
  transform: rotate(45deg);
  border-radius: 5px 0 5px 100%;}

.control-left .control-inner {
  right: -1px;
  top: -1px;
  border-bottom: 1px solid #78aee4;
  border-left: 1px solid #78aee4;
  border-radius: 0 0 0 100%;}

.control-left .fa {
  transform: rotate(-45deg) translateX(-7px);}

.control-right {
  top: 27%;
  right: -8%;
  transform: rotate(45deg);
  border-radius: 5px 100% 5px 0; }

.control-right .control-inner {
  left: -1px;
  bottom: -1px;
  border-top: 1px solid #78aee4;
  border-right: 1px solid #78aee4;
  border-radius: 0 100% 0 0 ;}

.control-right .fa {
  transform: rotate(-45deg) translateX(7px);}

.control-bottom {
  left: 27%;
  bottom: -8%;
  transform: rotate(45deg);
  border-radius: 0 5px 100% 5px;  }

.control-bottom .control-inner {
  top: -1px;
  left: -1px;
  border-bottom: 1px solid #78aee4;
  border-right: 1px solid #78aee4;
  border-radius: 0 0 100% 0 ;}

.control-bottom .fa {  transform: rotate(-45deg) translateY(7px);  }

// 第二个盒子样式
/*摄像头方向控制*/
.change_camera_direction{
	// background-color: rgb(77, 203, 235);
	text-align: center;
	position: absolute;
	top: -100%;
  right:180%;
	width: 240px;
	height: 80px;
   border:1px solid #96c2f1;
  border-image: urlVUE+websocket编写实现PC web端控制摄像头) 30 27 27 27 / 9px / 9px;
}
.change_camera_direction .camera_title{
	color: white;
	font-size: 15px;
	margin: 5% auto;
}
.direction_content{
	 width: 100%;
	 height: 70%;
	 position: relative;
}
.direction_div{
	position:relative;
	width: 30px;
	height: 30px;
}
/*left*/
.left_direction {
	top: 5%;
	left: 20%; 
}
/*bottom*/
.bottom_direction{
	top:5%;
	left: 40%;
}
/*right*/
.right_direction{
	top: -47%;
	left: 61%;
}
/*top*/
.top_direction{
	top: 2%;
	left: 40%; 
}
</style>

总结

看完了给个一键三连,看视频的私聊私发。

 

到了这里,关于VUE+websocket编写实现PC web端控制摄像头的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue+js+海康web开发包接入海康威视摄像头

    一、登录海康开放平台下载web开发包,下载需要先登录海康账号,没有的需先注册一个。 海康开放平台web开发包下载地址:https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=10id=4c945d18fa5f49638ce517ec32e24e24 二、将web开发包引入vue项目 下载后解压的包目录如下: 将把webs下的整个

    2024年02月02日
    浏览(22)
  • vue2 对接 海康摄像头插件 (视频WEB插件 V1.5.2)

    前言 海康视频插件v.1.5.2版本运行环境需要安装插件VideoWebPlugin.exe,对浏览器也有兼容性要求,具体看官方文档 对应下载插件 去海康官网下载插件 里面有dome等其他需要用到的 地址: 安装插件 打开下载的文件里的bin文件 安装一下VideoWebPlugin vue脚手架中集成插件 把官方资源

    2024年02月03日
    浏览(16)
  • 海康摄像头web3.3前端实现

     上篇我发布了一篇文章,有一个刷新页面摄像头就消失的bug,这个代码就是我改过以后得。 直接就放到组件里就行。要是不出来的话,可能是你们插件有问题。可以重新安装一次插件。 template     div class=\\\"chart-box\\\" ref=\\\"chartBox\\\"         div class=\\\"chart-body\\\" ref=\\\"divPlugin\\\" id=\\\"divPlu

    2024年02月20日
    浏览(14)
  • vue中web端播放rtsp视频流(摄像头监控视频)(海康威视录像机)

    ffmpeg下载 https://ffmpeg.org/download.html 找ffmpeg-release-essentials.zip点击下载,下载完解压 ffmpeg.exe 程序运行 添加成功后验证是否生效任意地方打开cmd窗口输入 ffmpeg 打印如下表示成功 新建一个app.js文件,同级目录下npm安装 node-rtsp-stream 我是直接写在项目里了,你们可以单独写在外

    2024年04月25日
    浏览(18)
  • OpenCV+python实现摄像头简单手势识别--进度条控制亮度

    例如:随着人工智能的不断发展,计算机视觉这门技术也越来越重要,很多人都开启了学习计算机视觉,本文在Opencv基础上实现了摄像头简单手势识别–进度条控制亮度的基础内容,并没有使用深度学习技术,因此准确率并不高。 ∙ bullet ∙ 第一步: 开启摄像头,检测每帧图

    2023年04月08日
    浏览(14)
  • jetson nano 智能小车1.0(实现键盘控制、加装摄像头)

    实验剩了一个jetson nano 开发板,闲着也是闲着,拿过来搞点好玩的,jetson nano 和树莓派差不多,加个L298N电机驱动板模块,买两个直流电机就行,目前图省事儿使用无线键盘控制,缺点是不知道程序目前的执行状态,后面考虑加个led指示灯 1.1主要硬件 jetson nano主控板一个 L2

    2024年04月25日
    浏览(13)
  • Android实时获取摄像头画面传输至PC端

    最近在做一个PC端小应用,需要获取摄像头画面,但是电脑摄像头像素太低,而且位置调整不方便,又不想为此单独买个摄像头。于是想起了之前淘汰掉的手机,成像质量还是杠杠的,能不能把手机摄像头连接到电脑上使用呢?经过搜索,在网上找到了几款这类应用,但是都

    2024年02月12日
    浏览(20)
  • JS PC端调用摄像头录视频截图上传文件

    创建 Catcher 类 直接在HTML文件中调用

    2024年02月10日
    浏览(18)
  • ffmpeg+nginx实现rtsp协议摄像头web端播放

    nginx(需要安装rtmp模块) ffmpeg 6.0 vlc播放器(本地播放验证) 这些资源已经上传需要的可以自己下载,这个压缩包里的nginx已经安装好所需模块,解压即可使用 下载地址 如果你使用的是海康威视得摄像头构成一般为rtsp://摄像头用户名:密码@摄像头IP:摄像头端口/Streaming/Chann

    2024年02月14日
    浏览(17)
  • web端调用本地摄像头麦克风+WebRTC腾讯云,实现直播功能

    视频直播技术大全、直播架构、技术原理和实现思路方案整理 视频采集端: 1、视频采集:使用摄像头设备获取实时视频流。 2、视频处理: 对采集到的视频进行处理,可以包括美颜、滤镜、水印等效果的添加。 3、音视频编码压缩: 将处理后的音视频数据进行编码压缩,常

    2024年02月10日
    浏览(15)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包