精华内容
下载资源
问答
  • 最近研究通过videoJs播放本地视频和网络视频流,现将学习成果总结供大家分享。 操作步骤如下: 1、下载解压文件,进入对应的文件打开HTML文件直接运行即可。 2、文件夹内容说明:前两个文件夹是播放本地不同格式视频...
  • Node.js发送视频流

    千次阅读 2017-08-02 17:16:09
    Node.js中的流Node.js的流(Stream) API 非常强大,它是处理流数据的抽象接口。通过pipe()方法可以方便地将视频流分段发给前端。

    Node.js中的流

    Node.js的流(Stream) API 非常强大,它是处理流数据的抽象接口。流可以看成是一种数据的集合,但它并不是一下子全部读到内存里面,而是一块一块地去产生、消耗,这种方式最显而易见的好处是可以方便地处理大文件。数据流可以是可读流、可写流,实际上Node.js中的流分为4种类型 : Readable、Writable、Duplex、Transform。

    • Readable Stream:可读流是对可消费的数据源进行的抽象,比如fs.createReadStream
    • Writable Stream:可写流是对流的目的地(destination)的抽象,destination运允许数据写入,比如fs.createWriteStream
    • Duplex Stream:双工流是同时实现了 Readable 和 Writable 接口的流,既能写又能读。比如TCP socket
    • Transform Stream:交换流本质上是一种Duplex流,可以将其看成输入Writable流,输出的是Readable流,也可以称之为“通过流”(through streams)。比如zlib streams。

    Node中有许多内置对象实现了Stream接口:
    Node实现Stream的内置对象

    对于TCP sockets、zlib 和 crypto 流而言,他们是Duplex Stream。

    .pipe()方法

    对于Readable流而言,有两种消费数据流的方式:Paused Mode 和 Flowing Mode。简单来说,Paused Mode就像是把水缸里面的水一瓢瓢舀出来,可以根据需要使用read()方法去消费数据流;Flowing Mode就像是给水缸接了根管子,水可以从高处流到低处,我们可以监听data事件得到一块数据流。

    所有的Readable流默认是Paused Mode,使用resume()、pause()方法可以与 Flowing Mode 相互切换,resume()方法就像是给水缸接好管子,水自动流动;pause()方法就像移除管子,我们得手动去舀水。这种切换方式很简单,是有时候是自动发生的。
    Paused Mode 与 Flowing Mode

    当Readable流使用pipe()方法时,就相当于给数据流接上了管子,数据流会自动从上游流到下游。在使用pipe()时,需要注意的是上游是Readable,下游是Writable,即:

    readableSrc.pipe(writableDest)

    由于Duplex流 实现了Readable、和Writable,可以将Duplex或Transform 放在“中游”:

    readableSrc
      .pipe(transformStream1)
      .pipe(transformStream2)
      .pipe(finalWrtitableDest)

    我们知道,Node中的Server端HTTP response是Writable流,而通过fs.createReadStream读取视频数据得到的是Readable流。因此,Node的Server端可以直接使用pipe()方法将视频流发到前端:

    //前端
    <video src="/video"></video>
    
    //服务端
    router.get('/video', function(req, res, next) {
    
        let head = { 'Content-Type': 'video/mp4' };
        //需要设置HTTP HEAD
        res.writeHead(200, head);
        //使用pipe
        fs.createReadStream('./assets/sintel.mp4')
            .pipe(res);
    
    });

    前端结果:
    这里写图片描述

    可以注意到前端下载了一个html和video。

    HTTP 206

    HTTP/1.1 206状态码表示的是:客户端通过发送范围请求头Range获取资源的部分数据。这种请求可以将服务端文件分割成多个部分传给客户端,可用于解决网络问题以及大文件下载问题。对于一个很大的视频,就可以采用这种请求将视频流分成多个部分下载。
    需要关注的HTTP Headers有:

    • Range:用于请求头中,指定第一个字节的位置和最后一个字节的位置,一般格式:Range:(unit=first byte pos)-[last byte pos] 。如 Range:bytes=0- 表示请求服务端第0及以后bytes的数据; Range:bytes=0-999 表示0到999 bytes的数据,注意这个区间的长度是1000bytes。
    • Accept-Ranges:用于响应头,表明服务器支持Range请求,以及服务器所支持的单位是字节(这也是唯一可用的单位);Accept-Ranges: none 响应头表示服务器不支持范围请求。
    • Content-Range:用于响应头,指定整个实体中的一部分的插入位置,一般格式: Content-Range: bytes (unit first byte pos) - [last byte pos]/[entity legth]。如Content-Range:bytes 1000000-1999999/3332038 表示的是服务端资源总大小3332038 bytes,此次返回的是其中第1000000到1999999 bytes 的数据。
    • Content-Length:用于响应头,表明了响应实体的大小,它应该等于Content-Range中的 last byte pos - first byte pos + 1。

    将视频流分成多个部分发给前端,只要注意控制好流的数据区间即可,服务端代码如下:

    router.get('/video', function(req, res, next) {
        let path = './assets/sintel.mp4';
        let stat = fs.statSync(path);
        let fileSize = stat.size;
        let range = req.headers.range;
    
        // fileSize 3332038
    
        if (range) {
            //有range头才使用206状态码
    
            let parts = range.replace(/bytes=/, "").split("-");
            let start = parseInt(parts[0], 10);
            let end = parts[1] ? parseInt(parts[1], 10) : start + 999999;
    
            // end 在最后取值为 fileSize - 1 
            end = end > fileSize - 1 ? fileSize - 1 : end;
    
            let chunksize = (end - start) + 1;
            let file = fs.createReadStream(path, { start, end });
            let head = {
                'Content-Range': `bytes ${start}-${end}/${fileSize}`,
                'Accept-Ranges': 'bytes',
                'Content-Length': chunksize,
                'Content-Type': 'video/mp4',
            };
            res.writeHead(206, head);
            file.pipe(res);
        } else {
            let head = {
                'Content-Length': fileSize,
                'Content-Type': 'video/mp4',
            };
            res.writeHead(200, head);
            fs.createReadStream(path).pipe(res);
        }
    
    });

    前端结果:
    这里写图片描述

    这次的视频就被分成了4个部分,每个video请求及结果如下:

    顺序RequestResponse
    1Range:bytes=0-Content-Range:bytes 0-999999/3332038 Content-Length:1000000
    2Range:bytes=1000000-Content-Range:bytes 1000000-1999999/3332038 Content-Length:1000000
    3Range:bytes=2000000-Content-Range:bytes 2000000-2999999/3332038 Content-Length:1000000
    4Range:bytes=3000000-Content-Range:bytes 3000000-3332037/3332038 Content-Length:332038

    代码地址:https://git.oschina.net/liuyaqi/node-video-stream_demo.git

    参考链接:
    菜鸟教程: Node.js Stream(流)
    Node中文文档 Stream
    Node.js Streams: Everything you need to know
    RFC 2616: HTTP状态码定义
    http断点续传原理:http头 Range、Content-Range

    展开全文
  • 网上很多关于视频流的例子,我也简单的试了一下,对于视频流处理方式有很多,其中ckplayer我觉得挺方便的。 首先,我们需要下载关于ckplayer的js文件:(进入后直接选定版本,点击下载即可)下载地址:...

    网上很多关于视频流的例子,我也简单的试了一下,对于视频流的处理方式有很多,其中ckplayer我觉得挺方便的。

    首先,我们需要下载关于ckplayer的js文件:(进入后直接选定版本,点击下载即可)下载地址:http://www.ckplayer.com/down/

    附上一个简单的例子:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="ckplayer/ckplayer.js"></script>
    		<script src="ckplayer/ckplayer.min.js"></script>
    		<script src="ckplayer/hls/hls.js"></script>
    		<script src="ckplayer/hls/hls.min.js"></script>
    		<script src="js/jquery.min.js"></script>
    	</head>
    	<body>
    		<h1>视频播放测试页面!</h1>
    		<div id="showvideo" class="video" style="width: 600px;height: 400px;"></div>
    
    	</body>
    	<script type="text/javascript">
    		var directUrl = "这里写上我们的.m3u8的网络地址链接";
    		var videoObject = {
    			container: '#showvideo', //“#”代表容器的ID,“.”或“”代表容器的class
    			variable: 'player', //该属性必需设置,值等于下面的new chplayer()的对象
    			//loaded: 'loadedHandler', //监听播放器加载成功
    			autoplay: true, //是否自动播放
    			live: true, //是否直播
    			video: directUrl
    
    		};
    		var player = new ckplayer(videoObject);	
    	</script>
    </html>

    效果如图:

    展开全文
  • 流媒体服务器是实现视频分发功能的服务器,而要将视频流展现出来,则需要的是视频播放器。EasyPlayer就是TSINGSEE青犀视频团队研发并使用的视频流媒体播放器,大家熟悉的EasyNVR、EasyDSS里面,集成的都是EasyPlayer...

    流媒体服务器是实现视频分发功能的服务器,而要将视频流展现出来,则需要的是视频播放器。EasyPlayer就是TSINGSEE青犀视频团队研发并使用的视频流媒体播放器,大家熟悉的EasyNVR、EasyDSS里面,集成的都是EasyPlayer播放器。

    EasyPlayer分很多版本,EasyPlayer.JS就是集成进网页的网页播放器。我们用该播放器在谷歌浏览器播放RTMP视频流,出现了报错,但视频流仍然可以播放,然而换IE浏览器后,不能正常播放RTMP视频流了。

    66.png

    首先我们看谷歌这边报的错误,显示为XMLHttpRequest网络请求错误,说明地址写入播放器前存在问题,定位到传入地址的代码位置:

    src() {
      if (!this.videoUrl) {
         return "";
      }
      var xhr = new XMLHttpRequest();
      xhr.open('GET', this.videoUrl);
      xhr.onreadystatechange = () => {
      if (/\.flv.*$/.test(xhr.responseURL || "" ) && this.typeFlv) {
        this.videoUrl = xhr.responseURL
        this.typeFlv = false
      }else if (/\.m3u8.*$/.test(xhr.responseURL || "")){
        this.videoUrl = xhr.responseURL
       }
      };
      xhr.send(null);
      if (this.videoUrl.indexOf("/") === 0) {
        return location.protocol + "//" + location.host + this.videoUrl;
      }
       return this.videoUrl;
    },
    
    

    发现确实有一个XMLHttpRequest对象处理地址,从代码看发现RTMP不用XMLHttpRequest对象处理。

    这时我们可以给地址做一层判断处理。

    src() {
      if (!this.videoUrl) {
        return "";
      }
      if (this.videoUrl.indexOf("rtmp://") === 0) {
        if (this.videoUrl.indexOf("/") === 0) {
          return location.protocol + "//" + location.host + this.videoUrl;
        }
        return this.videoUrl;
      } else {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', this.videoUrl);
        xhr.onreadystatechange = () => {
      if (/\.flv.*$/.test(xhr.responseURL || "" ) && this.typeFlv) {
        this.videoUrl = xhr.responseURL
        this.typeFlv = false
      }else if (/\.m3u8.*$/.test(xhr.responseURL || "")){
        this.videoUrl = xhr.responseURL
      }
     };
      xhr.send(null);
      return this.videoUrl;
     }
    },
    

    判断该视频不需要处理XMLHttpRequest对象时,视频播放就会正常不会报错。

    67.png

    展开全文
  • 开源视频流服务 去年,我写过有关使用Linux创建视频流服务器的文章 。 该项目使用实时消息协议(RTMP),Nginx Web服务器,Open Broadcast Studio(OBS)和VLC媒体播放器。 我使用VLC播放我们的视频流,这对于小型...

    开源视频流服务

    去年,我写过有关使用Linux创建视频流服务器的文章 。 该项目使用实时消息协议(RTMP),Nginx Web服务器,Open Broadcast Studio(OBS)和VLC媒体播放器。

    我使用VLC播放我们的视频流,这对于小型本地部署来说可能很好,但在大规模情况下并不实用。 首先,您的观众必须使用VLC,而RTMP流会提供不一致的播放。 这就是Video.js发挥作用的地方! Video.js是一个开放源代码JavaScript框架,用于创建自定义HTML5视频播放器。 Video.js非常强大,许多受欢迎的网站都在使用它-很大程度上是由于它的开放性以及安装和运行的便捷性。

    Video.js入门

    HLS )是Apple开发的一种广泛使用的协议,它将为多种设备更好地为您的视频流提供服务。 HLS会将您的视频流分成几部分,并通过专门的播放列表进行播放。 这允许可以在更多设备上播放的更具容错性的流。

    首先,创建一个目录,该目录将容纳HLS流并授予Nginx写入权限:

    
       
    mkdir / mnt / hls
    chown www:www / mnt / hls

    接下来,启动您的文本编辑器,打开Nginx.conf文件,并在application live部分下添加以下内容:

    
       
           application live {
                live on;
                # Turn on HLS
                hls on;
                hls_path /mnt/hls/;
                hls_fragment 3;
                hls_playlist_length 60;
                # disable consuming the stream from nginx as rtmp
                deny play all;
    }

    注意HLS片段和播放列表长度设置。 您可能需要稍后调整它们,具体取决于您的流媒体需求,但这是一个很好的基线。 接下来,我们需要确保Nginx能够侦听来自播放器的请求,并了解如何将其呈现给用户。 因此,我们要在nginx.conf文件的底部添加一个新部分。

    
       
    server {
            listen 8080;

            location / {
                # Disable cache
                add_header 'Cache-Control' 'no-cache';

                # CORS setup
                add_header 'Access-Control-Allow-Origin' '*' always;
                add_header 'Access-Control-Expose-Headers' 'Content-Length';

                # allow CORS preflight requests
                if ($request_method = 'OPTIONS') {
                    add_header 'Access-Control-Allow-Origin' '*';
                    add_header 'Access-Control-Max-Age' 1728000;
                    add_header 'Content-Type' 'text/plain charset=UTF-8';
                    add_header 'Content-Length' 0;
                    return 204;
                }

                types {
                    application/dash+xml mpd;
                    application/vnd.apple.mpegurl m3u8;
                    video/mp2t ts;
                }

                root /mnt/;
            }
        }

    访问Video.js的入门页面,下载最新版本并查看发行说明。 同样在该页面上,Video.js有一个很好的入门模板,您可以用来创建一个非常基本的Web播放器。 我将分解该模板的重要部分,并插入获取新HTML播放器以使用流所需的片段。

    链接来自内容分发网络(CDN)的Video.js库。 如果需要,您还可以选择将Video.js下载并本地存储在Web服务器上。

    
       
    <head>
      <link href="https://vjs.zencdn.net/7.5.5/video-js.css" rel="stylesheet" />

      <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
      <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
    </head>

    现在到了玩家的真正肉食。 主体部分设置视频播放器显示方式的参数。 在video元素内,您需要定义播放器的属性。 您想要多大? 您是否要有海报(即缩略图)? 是否需要任何特殊的播放器控件? 本示例定义了一个简单的600x600像素播放器,带有一个适合我的缩略图(对我来说),其中包含Beastie(BSD恶魔)和Tux(Linux企鹅)。

    
       
    <body>
      <video
        id="my-video"
        class="video-js"
        controls
        preload="auto"
        width="600"
        height="600"
        poster="BEASTIE-TUX.jpg"
        data-setup="{}"
      >

    既然您已经设定了播放器的外观,就需要告诉播放器。 Video.js可以处理大量不同的格式,包括HLS流。

    
       
        <source src="http://MY-WEB-SERVER:8080/hls/STREAM-KEY.m3u8" type="application/x-mpegURL" />
        <p class="vjs-no-js">
          To view this video please enable JavaScript, and consider upgrading to a
          web browser that
          <a href="https://videojs.com/html5-video-support/" target="_blank"
            >supports HTML5 video</a
          >
        </p>
      </video>

    记录你的流

    保留流的副本非常容易。 只需在nginx.conf文件的应用程序直播部分底部添加以下内容:

    
       
    # Enable stream recording
    record all;
    record_path /mnt/recordings/;
    record_unique on;

    确保record_path存在并且Nginx有权对其进行写入:

     chown -R www:www / mnt / recordings 
    

    顺流而下

    而已! 您现在应该拥有一个漂亮HTML5友好型实时视频播放器。 关于如何扩展所有视频制作冒险,这里有许多宝贵的资源。 如果您有任何疑问或建议,请随时在Twitter上与我联系或在下面发表评论。

    翻译自: https://opensource.com/article/20/2/video-streaming-tools

    开源视频流服务

    展开全文
  • video.js播放rtmp视频流

    2021-05-20 13:55:22
    video.js播放rtmp视频流。本文会详细解释如何修复:rtmp视频监控只显示在左上角100*100的方块中的问题。
  • 动态视频流切换的处理策略

    千次阅读 2019-01-29 10:47:21
    动态视频流切换是指在视频播放过程中,将输入动态地从一个视频流切换到另一个视频流。具体场景包括: 切换播放画质 插播广告(有多个广告打包插播) 电视剧连续播放 多个点播节目拼接为虚拟直播频道 用户切换...
  • FFmpeg + nginx-http-flv-module + flv.js 实现视频流播放 最近项目组接了一个视频流项目,项目的主要核心是将网络摄像头RTSP视频流在WEB端实时播放,经过两天的调查和爬坑,终于实现了视频流的播放。 接下来为大家...
  • HLS视频流 H265解码问题处理

    千次阅读 2020-11-09 12:04:49
    关于福富视频云平台使用FFMPEG插件处理H.264 和H.265视频流Web平台播放问题,目前WEB平台都暂不支持H.265的播放,要么在H.265的设备上设置H.264的编码格式,要么是平台插件处理H.265的码流为H.264后,转码播放。...
  • 描述 这是客户端,用于将视频
  • 今天研究了下js获取摄像头中的视频流,全网搜索相关的文章,终于上天不负有心人。以下是原文代码: html: <!DOCTYPE html> <html> <head> <title>video recoder</title> <...
  • 一个需求是在播放视频流时,对视频流进行调整 色度, 饱和度,亮度,对比度等,要怎么实现呢? 完成后的截图: image.png 2.思路 1.使用video标签播放视频 2.使用canvas播放视频,并捕获每个视频帧,这是可以...
  • 视频流媒体播放器EasyPlayer支持RTSP、RTMP、HTTP、HLS、UDP、RTP、File等多种流媒体协议播放...我们发现EasyPlayer.js播放器集成到EasyNVR视频平台后,播放FLV视频流报IllegalStateException: Data not enough when p
  • 说明: 这里sources可以传入多个视频源,type可以自己指定根据播放来进行选择。因为需求我是一个一个视频单独加载出来的。 VideoPlayer.js import React from 'react'; import videojs from 'video.js'; import './...
  • 主要思路 :通过摄像头捕获画面,获取视频流之后,进行美颜处理,然后将处理后的流给coreImage进行渲染视频的捕获:框架 AVFoundation/AVFoundation.h 说明: AVCaptureDevice 是关于相机硬件的接口。它被用于...
  • 项目:物联网监控项目----后台视频流管理(前端实现视频截屏功能) 本文就不同视频源分情况展示: 1 本地视频(项目同目录视频)截屏(canvas.getContext("2d).drawImage())   <!DOCTYPE html> <...
  • 我们将EasyPlayer.JS播放器集成进EasyDSS视频平台,就能够实现EasyDSS的视频流网页无插件直播,并且能够切换不同清晰度的码流进行播放,多方面满足用户的需求。 我们的测试人员发现在EasyDSS播放点播文件,切换多...
  • Web-Rtmp:在网页上播放RTMP视频流,通过Websocket
  • 作为支持H265编码的视频播放器EasyWasmPlayer.js,我们开发后立即在EasyNVR内做了测试,EasyWasmPlayer.js表现出了良好的适配性和优越的稳定性,目前在TSINGSEE青犀视频开发的其他视频平台中也已经集成。 ...
  • 海康有直接开放rtsp链接视频流地址。 由于HTML客户端不能直接对rtsp视频流进行播放,于是我在后台服务器做了一层转换rtsp > nginx-rtmp > http-flv > flv.js客户端播放流媒体服务。 二:流媒体服务器搭建 ...
  • Nile.js - 建立在WebTorrent上的点对点(P2P)直播视频流媒体库
  • RTMP协议进行过优化的媒体播放器,其中我们引以为傲的两个技术优势就是起播速度快和播放延迟低。最近我们遇到一些需求,其对播放画面要求非常苛刻,于是我们再把代码捡起来,针对之前的播放策略进行再优化,果然又...
  • 【前端】rtsp 与 rtmp 视频流的播放方法导读写在前面前端如何在网页上播放 rtsp 视频流 导读 RTSP(Real Time Streaming Protocal),RFC2326,实时流传输协议,是 TCP/IP 协议体系中的一个应用层协议。… 额,算了...
  • java支持html5视频流技术Pseudostreaming

    千次阅读 2016-03-15 15:13:57
    播放器在URL上携带start time的参数发送HTTP请求到服务端,服务端的脚本处理视频流并且给予回复,保证提供的视频流起始位置与START TIME参数所对应。这个start time的参数通常命名为“start”,这个技术同样被风靡全
  • 视频流媒体网站技术调研报告

    千次阅读 2021-05-14 15:19:06
    现在,很多网站都需要提供视频播放的功能,文章由浅入深先介绍了目前多个视频网站的实现方式,各个媒体协议RTMP、HLS、HTTP-FLV、WebRTC、DASH的简介及优缺点介绍,还有目前主流媒体服务器的搭建方式,相信读了...
  • H.265/HEVC是当前非常火的视频压缩方式,相对于大家熟知的H.264 ,平均可以带来接近于50%的宽度节省。这对于我们做视频的开发者而言,无疑可以在同等流量下拿到更多的Buffer,无论是直播还是视频播放都是非常有收益...
  • python 实现视频流播放

    2021-02-24 13:17:21
    但是带宽开销比较大,没有使用H264等协议,720清晰度大约带宽开销15MB,现场项目上无法使用,因此切换成ffmpeg+videojs(vlc也可以,客户端查看)+python的方式实现目标检测的视频流展示。 rtmp 服务器搭建 在服务器端...
  • ASCII Camera使用HTML5 getUserMedia API将视频流从网络摄像头转换为实时ASCII表示
  • 0、为什么要转视频流 我这边遇到的两个问题,一个是多个客户端同时访问rtsp视频流时,会导致断帧或者丢包(也就是图像残缺),所以考虑发布一个本地局域网的流媒体服务器供大家取流。另外一个原因就是前端播放rtsp和...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 47,128
精华内容 18,851
关键字:

js处理视频流