HTML5视频监控技术预研_基于mse解码h264

1

2

npm install jsmpeg --save

npm install ws --save

1

2

3

4

node ./app/websocket-relay.js 12345 8800 8801

# Listening for incomming MPEG-TS Stream on http://127.0.0.1:8800/<secret>

# Awaiting WebSocket connections on ws://127.0.0.1:8801/

# 实际上在所有网络接口上监听，并非仅仅loopback

1

2

3

4

5

       # 从摄像头/dev/video0以480的分辨率捕获原始视频流

ffmpeg -s 640x480 -f video4linux2 -i /dev/video0 \

       # 输出为原始MPEG-1视频（JSMpeg可用），帧率30fps，比特率800kbps

       -f mpegts -codec:v mpeg1video -b 800k -r 30 http://127.0.0.1:8800/12345

# 在我的机器上，上述ffmpeg私有内存占用18MB

1

Stream Connected: ::ffff:127.0.0.1:42399

1

2

3

4

var player = new JSMpeg.Player( 'ws://127.0.0.1:8801/', {

    canvas: document.getElementById( 'canvas' ),

    autoplay: true

} ); 

1

2

3

git clone https://github.com/131/h264-live-player.git

cd h264-live-player

npm install

1

2

3

4

5

6

7

8

9

10

11

12

13

14

var args = [

    "-f", "video4linux2",

    "-i",  "/dev/video0" ,

    "-framerate", this.options.fps,

    "-video_size", this.options.width + 'x' + this.options.height,

    '-pix_fmt',  'yuv420p',

    '-c:v',  'libx264',

    '-b:v', '600k',

    '-bufsize', '600k',

    '-vprofile', 'baseline',

    '-tune', 'zerolatency',

    '-f' ,'rawvideo',

    '-'

];

HTTP实时流（HTTP Live Streaming），由苹果开发，基于HTTP协议

HLS的工作原理是，把整个流划分成一个个较小的文件，客户端在建立流媒体会话后，基于HTTP协议下载流片段并播放。客户端可以从多个服务器（源）下载流。

在建立会话时，客户端需要下载extended M3U (m3u8) 播放列表文件，其中包含了MPEG-2 TS（Transport Stream）容器格式的视频的列表。在播放完列表中的文件后，需要再次下载m3u8，如此循环

此协议在移动平台上支持较好，目前的Android、iOS版本都支持

此协议的重要缺点是高延迟（5s以上通常），要做到低延迟会导致频繁的缓冲（下载新片段）并对服务器造成压力，不适合视频监控

播放HLS流的HTML代码片段：

XHTML

实时消息协议（Real Time Messaging Protocol），由Macromedia（Adobe）开发。此协议实时性很好，需要Flash插件才能在客户端使用，但是Adobe已经打算在不久的将来放弃对Flash的支持了

有一个开源项目HTML5 FLV Player，它支持在没有Flash插件的情况下，播放Flash的视频格式FLV。此项目依赖于MSE，支持以下特性：

1. 支持H.264 + AAC/MP3编码的FLV容器格式的播放
2. 分段（segmented）视频播放
3. 基于HTTP的FLV低延迟实时流播放
4. 兼容主流浏览器
5. 资源占用低，可以使用客户端的硬件加速

实时流协议（Real Time Streaming Protocol），由RealNetworks等公司开发。此协议负责控制通信端点（Endpoint）之间的媒体会话（media sessions） —— 例如播放、暂停、录制。通常需要结合：实时传输协议（Real-time Transport Protocol）、实时控制协议（Real-time Control Protocol）来实现视频流本身的传递

大部分浏览器没有对RTSP提供原生的支持

RTSP 2.0版本目前正在开发中，和旧版本不兼容

基于HTTP的动态自适应流（Dynamic Adaptive Streaming over HTTP），它类似于HLS，也是把流切分为很小的片段。DASH为支持为每个片段提供多种码率的版本，以满足不同客户带宽

协议的客户端根据自己的可用带宽，选择尽可能高（避免卡顿、重新缓冲）的码率进行播放，并根据网络状况实时调整码率

DASH不限制编码方式，你可以使用H.265, H.264, VP9等视频编码算法

Chrome 24+、Firefox 32+、Chrome for Android、IE 10+支持此格式

类似于HLS的高延迟问题也存在

WebRTC是一整套API，为浏览器、移动应用提供实时通信（RealTime Communications）能力。它包含了流媒体协议的功能，但是不是以协议的方式暴露给开发者的

WebRTC支持Chrome 23+、Firefox 22+、Chrome for Android，提供Java / Objective-C绑定

WebRTC主要有三个职责：

1. 捕获客户端音视频，对应接口MediaStream（也就是getUserMedia）
2. 音视频传输，对应接口RTCPeerConnection
3. 任意数据传输，对应接口RTCDataChannel

WebRTC内置了点对点的支持，也就是说流不一定需要经过服务器中转

1

2

3

4

5

6

7

<audio controls preload="auto">

    <source src="song.mp3" type="audio/mpeg">

    <!-- 备选格式，如果浏览器不支持mp3 -->

    <source src="song.ogg" type="audio/ogg">

    <!-- 如果浏览器不支持audio标签，显示下面的连接 -->

    <a href="audiofile.mp3">download audio</a>

</audio>

1

2

3

4

5

6

7

8

9

10

<!-- poster指定预览图，autoplay自动播放，muted静音 -->

<video controls width="640" height="480" poster="movie.png" autoplay muted>

  <source src="movie.mp4" type="video/mp4">

  <!-- 备选格式，如果浏览器不支持mp4 -->

  <source src="movie.webm" type="video/webm">

  <!-- 可以附带字幕 -->

  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">

  <!-- 如果浏览器不支持video标签，显示下面的连接 -->

  <a href="videofile.mp4">download video</a>

</video>

1

2

3

4

5

6

7

8

9

var video = document.createElement( 'video' );

if ( video.canPlayType( 'video/mp4' ) ) {

    video.setAttribute( 'src', 'movie.mp4' );

}

else if ( video.canPlayType( 'video/webm' ) ) {

    video.setAttribute( 'src', 'movie.webm' );

}

video.width = 640;

video.height = 480; 

1

video.src = URL.createObjectURL(mediaSource);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<script type="text/javascript">

    navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia;

    var success = function ( stream ) {

        var video = document.getElementById( 'camrea' );

        // 把MediaStream对象转换为Blob URL，提供给video播放

        video.src = URL.createObjectURL( stream );

        video.play();

    }

    var error = function ( err ) {

        console.log( err )

    }

    // 调用成功后，得到MediaStream对象

    navigator.getUserMedia( { video: true, audio: true }, success, error );

</script>

<video id="camrea" width="640" height="480"/>

1

2

3

4

5

6

7

8

9

navigator.getUserMedia( { audio: true }, function ( stream ) {

    var audioContext = new AudioContext();

    // 从捕获的音频流创建一个媒体源管理

    var streamSource = audioContext.createMediaStreamSource( stream );

    // 把媒体源连接到目标（默认是扬声器）

    streamSource.connect( audioContext.destination );

}, error );

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

camera.init( {

    width: 640,

    height: 480,

    fps: 30, // 帧率

    mirror: false,  // 是否显示为镜像

    targetCanvas: document.getElementById( 'webcam' ), // 默认null，如果设置了则在画布中渲染

    onFrame: function ( canvas ) {

        // 每当新的帧被捕获，调用此回调

    },

    onSuccess: function () {

        // 流成功获取后

    },

    onError: function ( error ) {

        // 如果初始化失败

    },

    onNotSupported: function () {

        // 当浏览器不支持camera.js时

    }

} );

// 暂停

camera.pause();

// 恢复

camera.start();

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

// 信号处理通道，底层传输方式和协议自定义

var signalingChannel = createSignalingChannel();

var conn;

// 信号通过此回调送达本地，可能分多次送达

signalingChannel.onmessage = function ( evt ) {

    if ( !conn ) start( false );

    var signal = JSON.parse( evt.data );

    // 会话描述协议（Session Description Protocol），用于交换媒体配置信息（分辨率、编解码能力）

    if ( signal.sdp )

    // 设置Peer的RTCSessionDescription

        conn.setRemoteDescription( new RTCSessionDescription( signal.sdp ) );

    else

    // 添加Peer的Candidate信息

        conn.addIceCandidate( new RTCIceCandidate( signal.candidate ) );

};

// 调用此方法启动WebRTC，获取本地流并显示，侦听连接上的事件并处理

function start( isCaller ) {

    conn = new RTCPeerConnection( { /**/ } );

    // 把地址/端口信息发送给其它Peer。所谓Candidate就是基于ICE框架获得的本机可用地址/端口

    conn.onicecandidate = function ( evt ) {

        signalingChannel.send( JSON.stringify( { "candidate": evt.candidate } ) );

    };

    // 当远程流到达后，在remoteView元素中显示

    conn.onaddstream = function ( evt ) {

        remoteView.src = URL.createObjectURL( evt.stream );

    };

    // 获得本地流

    navigator.getUserMedia( { "audio": true, "video": true }, function ( stream ) {

        // 在remoteView元素中显示

        localView.src = URL.createObjectURL( stream );

        // 添加本地流，Peer将接收到onaddstream事件

        conn.addStream( stream );

        if ( isCaller )

        // 获得本地的RTCSessionDescription

            conn.createOffer( gotDescription );

        else

        // 针对Peer的RTCSessionDescription生成兼容的本地SDP

            conn.createAnswer( conn.remoteDescription, gotDescription );

        function gotDescription( desc ) {

            // 设置自己的RTCSessionDescription

            conn.setLocalDescription( desc );

            // 把自己的RTCSessionDescription发送给Peer

            signalingChannel.send( JSON.stringify( { "sdp": desc } ) );

        }

    } );

}

// 通信发起方调用：

start( true );

1

2

3

4

5

6

7

8

// 指定分辨率

// adapter.js 支持Promise

navigator.mediaDevices.getUserMedia( { video: { width: { exact: 640 }, height: { exact: 480 } } } ).then( stream => {

    let video = document.createElement( 'video' );

    document.body.appendChild( video );

    video.srcObject = stream;

    video.play();

} ).catch( err => console.log( err ) );

1

2

// video为video元素

canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

简化WebRTC的点对点通信、视频、音频调用

提供云端的PeerServer，你也可以自己搭建服务器

WebRTC的一个抽象层，同时提供了客户端、服务器端Node.js组件。服务器端组件抽象了STUN

类似的框架还有SimpleWebRTC、easyrtc

允许你构建能够和遵循WebRTC标准的浏览器进行通信的Native应用程序，支持Java绑定

基于Java实现的WebRTC信号处理服务器

这是一个WebRTC网关，纯服务器端组件，目前仅仅支持Linux环境下安装

Janus本身实现了到浏览器的WebRTC连接机制，支持以JSON格式交换数据，支持在服务器端应用逻辑 - 浏览器之间中继RTP/RTCP和消息。特殊化的功能有服务器端插件完成

官网地址：https://janus.conf.meetecho.com

这是一个开源的WebRTC媒体服务器

1

2

3

4

5

6

7

8

9

10

11

12

docker create --name ubuntu-16.04 -h ubuntu-16 --network local --dns 172.21.0.1 --ip 172.21.0.6 -it docker.gmem.cc/ubuntu:16.04 bash

docker start ubuntu-16.04

docker exec -it ubuntu-16.04 bash

apt update && apt install wget

wget https://raw.githubusercontent.com/veyesys/release/master/h5stream/H5S-r1.0.1128.16-Ubuntu-16.04-64bit.tar.gz

tar xzf H5S-r1.0.1128.16-Ubuntu-16.04-64bit.tar.gz && mv H5S-r1.0.1128.16-Ubuntu-16.04-64bit h5s-1.0

cd h5s-1.0

export LD_LIBRARY_PATH=`pwd`/lib/:$LD_LIBRARY_PATH

# 指定两次密码，可能H5S存在bug，不这样报身份验证失败

./h5ss rtsp://admin:12345@192.168.0.196:554/ch1/sub/av_stream admin 12345

1

ffmpeg -i rtsp://admin:12345@192.168.0.196:554/ch1/main/av_stream -s 427x240 -f mpegts -vcodec mpeg1video -b 800k -r 30 http://127.0.0.1:8800/12345

1

node ./app/websocket-relay.js 12345 8800 8801 

1

2

3

4

5

6

new JSMpeg.Player( 'ws://127.0.0.1:8801/', {

    canvas: document.getElementById( 'canvas9' ),

    autoplay: true,

    // 浏览器对WebGL context的数量有限制

    disableGl: true

} ); 

1

ffmpeg -i rtsp://admin:12345@192.168.0.196:554/ch1/main/av_stream -c:v copy -f rawvideo  -

1

2

3

4

5

6

7

8

cmake_minimum_required(VERSION 3.6)

project(hikvision)

include_directories(/home/alex/CPP/lib/hcnedsdk/include)

set(SOURCE_FILES getstream.cpp)

add_executable(getstream ${SOURCE_FILES})

target_link_libraries(getstream /home/alex/CPP/lib/hcnedsdk/lib/libhcnetsdk.so)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

#include <HCNetSDK.h>

#include <stdio.h>

#include <cstring>

#include <unistd.h>

// RTSP协议取流

void CALLBACK cbStdData( LONG lRealHandle, DWORD dwDataType, BYTE *pBuffer, DWORD dwBufSize, DWORD dwUser ) {

    switch ( dwDataType ) {

        case NET_DVR_SYSHEAD:        // 系统头数据，回调的第一个包是40字节的文件头

            break;

        case NET_DVR_STREAMDATA:     // 基于私有协议时：视频流数据（包括复合流和音视频分开的视频流数据）

            break;

        case NET_DVR_STD_VIDEODATA:  // 基于标准协议时：标准视频流数据（RTP包）

            break;

        case NET_DVR_STD_AUDIODATA:  // 基于标准协议时：标准音频流数据

            break;

        case NET_DVR_SDP:            // SDP信息(RTSP传输时有效)

            break;

        case NET_DVR_PRIVATE_DATA:   // 私有数据,包括智能信息叠加等

            break;

    }

}

int main() {

    // SDK初始化

    BOOL result = NET_DVR_Init();

    if ( !result ) return 1;

    // 同步登陆

    NET_DVR_USER_LOGIN_INFO struLoginInfo = { 0 };

    struLoginInfo.bUseAsynLogin = 0;

    strcpy( struLoginInfo.sDeviceAddress, "192.168.0.196" );

    struLoginInfo.wPort = 8000;

    strcpy( struLoginInfo.sUserName, "admin" );

    strcpy( struLoginInfo.sPassword, "12345" );

    NET_DVR_DEVICEINFO_V40 struDevInfo = { 0 };

    LPNET_DVR_DEVICEINFO_V30 lpDevInfo30;

    long lUserID = NET_DVR_Login_V40( &struLoginInfo, &struDevInfo );

    if ( lUserID < 0 ) {

        printf( "登陆失败，错误码 %d\n", NET_DVR_GetLastError());

        NET_DVR_Cleanup();

        return 1;

    } else {

        lpDevInfo30 = &struDevInfo.struDeviceV30;

        printf( "成功登陆到设备：%s\n", lpDevInfo30->sSerialNumber );

        printf( "SDK字符串编码方式（1 GB2312，2 GBK，3 BIG5，6 UTF-8）：%d\n", struDevInfo.byCharEncodeType );

        printf( "设备类型（31 高清网络摄像机）：%d\n", lpDevInfo30->wDevType );

        printf( "模拟通道起始号：%d，模拟通道个数%d，数字通道起始号：%d，数字通道个数%d\n", lpDevInfo30->byStartChan, lpDevInfo30->byChanNum,

                lpDevInfo30->byStartDChan, lpDevInfo30->byIPChanNum + lpDevInfo30->byHighDChanNum << 8 );

        printf( "主码流是否支持RTSP方式：%s，子码流是否支持RTSP方式：%s\n", lpDevInfo30->byMainProto > 0 ? "是" : "否",

                lpDevInfo30->bySubProto > 0 ? "是" : "否" );

    }

    // 启动预览

    NET_DVR_PREVIEWINFO struPrevInfo = { 0 };

    struPrevInfo.hPlayWnd = NULL;    // Linux 64 位系统不支持软解码功能

    struPrevInfo.lChannel = 1;       // 预览通道号

    struPrevInfo.dwStreamType = 0;   // 0-主码流， 1-子码流， 2-码流 3， 3-码流 4，以此类推

    struPrevInfo.dwLinkMode = 0;     // 0- TCP 方式， 1- UDP 方式， 2- 组播方式， 3- RTP 方式， 4-RTP/RTSP， 5-RSTP/HTTP

    struPrevInfo.bBlocked = 1;       // 0- 非阻塞取流， 1- 阻塞取流

    struPrevInfo.byProtoType = 1;    // 应用层取流协议使用RTSP

    LONG lRealHandle = NET_DVR_RealPlay_V40( lUserID, &struPrevInfo, NULL, NULL );

    if ( lRealHandle == -1 ) {

        printf( "启动预览失败，错误码 %d\n", NET_DVR_GetLastError());

        NET_DVR_Logout( lUserID );

        NET_DVR_Cleanup();

        return 1;

    }

    if ( lpDevInfo30->byMainProto ) {

        printf( "设置获取标准码流的回调\n" );

        // 仅支持对 支持RTSP协议取流的设备的 标准码流回调

        NET_DVR_SetStandardDataCallBack( lRealHandle, cbStdData, NULL );

    }

    sleep( 120 );

    // 停止预览

    NET_DVR_StopRealPlay( lRealHandle );

    // 登出

    NET_DVR_Logout( lUserID );

    // SDK清理

    NET_DVR_Cleanup();

    return 0;

}

1

2

3

export HKLIB_HOME=/home/alex/CPP/lib/hcnedsdk/lib

export LD_LIBRARY_PATH=$HKLIB_HOME:$HKLIB_HOME/HCNetSDKCom

./getstream