美文网首页个人收藏掘金
vue接入实时视频，并可以控制缩放与上下左右

vue接入实时视频，并可以控制缩放与上下左右

作者: 顺小星 | 来源:发表于2019-11-12 12:49 被阅读0次

效果图：

1、在大屏上的效果：

页面嵌入实时视频，可通过点击下面的按钮实现，摄像头拉进，缩小，上下左右等旋转动作


image.png

2、双击视频时候全屏的放大效果：

image.png

步骤：

一、在要嵌入监控的vue页面中，用iframe引入：

image.png
vedio的目录结构：整个demo文件都要导入项目中，可以看到在ysyDemo下面还有几个js文件和一些样式，
我们需要修改的就是，在vedio里面接入视频地址，修改按钮样式就行
image.png

二、vedio.html代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>球机示例模板</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="layuiadmin/layui/font/font_2wmcsfamra2/iconfont.css">

    <link href="mui.min.css" rel="stylesheet">
    <script src="js/mui.min.js"></script>
    <script src="js/ezuikit.js"></script>

</head>
<style>
    .layui-text-bottom {
        height: 25px;
    }
    
    .layui-text-bottom button {
        height: 100%;
        width: 67px;
        line-height: 10px
    }
    
    .content {
        position: relative;
        overflow: hidden;
    }
    
    .front {
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: transparent;
        top: 0px;
        left: 0;
        cursor: pointer;
    }
    
    .btns {
        position: absolute !important;
        right: 0;
        bottom: 2px;
        width: 100%;
        height: 20px;
        /* overflow: hidden; */
        background: rgb(1, 26, 32, 0.3);
    }
    
    .btns button {
        padding: 0;
        border: none;
        height: 17px;
        width: 11px;
        position: absolute;
        background-color: transparent;
    }
    /* 右 */
    
    .btns button:nth-of-type(4) {
        left: 94px;
        top: 4px;
        width: 16px;
        height: 16px;
        background: url('./videoCtrl/jiantou-right.png') 0 0 no-repeat / 100% 100%;
    }
    /* 左 */
    
    .btns button:nth-of-type(3) {
        left: 80px;
        top: 4px;
        width: 16px;
        height: 16px;
        background: url('./videoCtrl/jiantou-left.png') 0 0 no-repeat / 100% 100%;
    }
    /* 下 */
    
    .btns button:nth-of-type(2) {
        left: 67px;
        top: 4px;
        width: 16px;
        height: 16px;
        background: url('./videoCtrl/jiantou-down.png') 0 0 no-repeat / 100% 100%;
    }
    /* 上 */
    
    .btns button:nth-of-type(1) {
        left: 54px;
        top: 4px;
        width: 16px;
        height: 16px;
        background: url('./videoCtrl/jiantou-up.png') 0 0 no-repeat / 100% 100%;
    }
    
    .btns button:nth-of-type(5) {
        width: 16px;
        height: 16px;
        left: 33px;
        top: 4px;
        background: url('./videoCtrl/plus.png') 0 0 no-repeat / 100% 100%;
    }
    
    .btns button:nth-of-type(6) {
        width: 16px;
        height: 16px;
        left: 18px;
        top: 4px;
        background: url('./videoCtrl/minus.png') 0 0 no-repeat / 100% 100%;
    }
    
    .btns button:nth-of-type(7) {
        /* 左上*/
        width: 16px;
        height: 16px;
        left: 112px;
        top: 4px;
        background: url('./videoCtrl/left-up.png') 0 0 no-repeat / 100% 100%;
    }
    
    .btns button:nth-of-type(8) {
        /* 左下 */
        width: 16px;
        height: 16px;
        left: 125px;
        top: 4px;
        background: url('./videoCtrl/left-down.png') 0 0 no-repeat / 100% 100%;
    }
    
    .btns button:nth-of-type(9) {
        /* 右上 */
        width: 16px;
        height: 16px;
        left: 139px;
        top: 4px;
        background: url('./videoCtrl/right-up.png') 0 0 no-repeat / 100% 100%;
    }
    
    .btns button:nth-of-type(10) {
        /* 右下*/
        width: 16px;
        height: 16px;
        left: 152px;
        top: 4px;
        background: url('./videoCtrl/right-down.png') 0 0 no-repeat / 100% 100%;
    }
    /* 按钮內圆 */
    
    .inner {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    
    #myPlayer {
        /* transform: scaleY(1.08); */
        /* transform-origin: top; */
        width: 100% !important;
        height: 100% !important;
    }
    
    #myPlayer div,
    canvas {
        width: 100% !important;
        height: 100% !important;
    }
    
    #chaoxian {
        display: none
    }
    
    #chaoxian p {
        font-size: 30px;
        color: #000;
        margin: 26px 26px;
    }
    
    body,
    html {
        width: 100%;
        height: 100%;
    }
</style>

<body>

    <div style="width:100%;height:100%">
        <!-- <div style="width: 210px;height:125px"> -->
        <div style="width:100%;height:100%" id="fulldiv">
            <div class="layuiadmin-card-text content" style="width:100%;height:100%;padding:0">
                <div id="myPlayer" style="width:100%;height:100%">
                </div>
                <div class="front" ondblclick="fullSreen()">
                    <h2 id="chaoxian">
                        <p>9048,开放平台并发路数超限</p>
                        <p>请升级到VIP企业版</p>
                    </h2>

                </div>
                <div class="layui-text-bottom btns">
                    <div class="inner"></div>
                    <!-- 0~3:上下左右 -->
                    <button onmousedown="control(0)" onmouseup="stop(0)"></button>
                    <button onmousedown="control(1)" onmouseup="stop(1)"></button>
                    <button onmousedown="control(2)" onmouseup="stop(2)"></button>
                    <button onmousedown="control(3)" onmouseup="stop(3)"></button>

                    <!-- 8：放大 9：缩小 -->
                    <button onmousedown="control(8)" onmouseup="stop(8)"></button>
                    <button onmousedown="control(9)" onmouseup="stop(9)"></button>

                    <!-- 4-左上，5-左下，6-右上，7-右下 -->
                    <button onmousedown="control(4)" onmouseup="stop(4)"></button>
                    <button onmousedown="control(5)" onmouseup="stop(5)"></button>
                    <button onmousedown="control(6)" onmouseup="stop(6)"></button>
                    <button onmousedown="control(7)" onmouseup="stop(7)"></button>
                </div>
            </div>
        </div>
    </div>


    <script src="layuiadmin/layui/layui.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

    <script>
        // (function(){
        var item = location.search
        item = item.substr(1)
        let data = {}
        let arr = item.split("&")
        arr.forEach((item1, index) => {
            item1 = item1.split("=")
            data[item1[0]] = item1[1]
        })

        data.deviceSerial ='你的设备序列号'
        data.channelNo = '你的通道号'
            // data.src = 'ezopen://open.ys7.com/' + data.deviceSerial + '/' + data.channelNo + '.hd.live'
        data.src = 'ezopen://open.ys7.com/' + data.deviceSerial + '/' + data.channelNo + '.hd.live'

        $(function() {
            $.ajax({
                type: "get",
                url: '你获取token的后台地址',
                async: true,
                success: function(res) {
                    data.accessToken = res
                },
                error: function(res) {
                    console.log("请求失败")
                }
            });
        })

        setTimeout(() => {

            // 异步 等ajax前面获取token成功后再加载下面代码
            var decoder = new EZUIKit.EZUIPlayer({
                id: 'myPlayer',
                autoplay: true,
                url: data.src,
                accessToken: data.accessToken,
                // decoderPath: '/static/html/ysyDemo/js', //decoderPath：${window.YOUR_PATH};请在生产模式输入ezuikit.js的绝对路径
                decoderPath: '/static/ysyDemo/js', // 这里是ezuikit的文件路径，千万不能定位到完整文件夹
                // width: 500,
                // height: 441
                width: 210,
                height: 125
            });
            // 这里是打印日志，本例抛出到播放页面
            decoder.on('log', log);
        }, 500);

        function log(str) {
            if (str.indexOf('9048') >= 0) {
                document.getElementById("chaoxian").style.display = "block"
                document.getElementsByClassName("front")[0].style.backgroundColor = "#fff"
            }
        }
        layui.config({
            base: 'layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'sample']);

        // data=item


        var timer = 0 //用来计算鼠标按下到松开的时间
        var no = null //定时器名字
            //开始控制
        var control = function(direction) {
                no = setInterval(function() {
                    timer++
                }, 100)
                console.log('111')
                data.direction = direction;
                data.speed = '1';
                layui.use(['jquery', 'layer'], function() {
                    var $ = layui.$,
                        layer = layui.layer;
                    $.post('https://open.ys7.com/api/lapp/device/ptz/start', data, function(res) {
                        if (res.code == 200) {
                            // console.log('开始')
                            // layer.msg(res.msg, {time: 2000});
                        } else {
                            layer.msg(res.msg, {
                                time: 2000
                            });
                        }
                    }, 'json');
                    return false;
                });
            }
            //停止转动
        var stop = function(direction) {
            clearInterval(no)
            if (timer <= 3) {
                timer = 0
                setTimeout(function() {
                    layui.use(['jquery', 'layer'], function() {
                        var $ = layui.$ //重点处
                            ,
                            layer = layui.layer;
                        $.post('https://open.ys7.com/api/lapp/device/ptz/stop', data, function(res) {
                            if (res.code == 200) {
                                // layer.msg(res.msg, {time: 2000});
                            } else {
                                layer.msg(res.msg, {
                                    time: 2000
                                });
                            }
                        }, 'json');
                        return false;
                    });
                }, 500)
            } else {
                timer = 0
                layui.use(['jquery', 'layer'], function() {
                    var $ = layui.$ //重点处
                        ,
                        layer = layui.layer;
                    data.direction = direction;
                    $.post('https://open.ys7.com/api/lapp/device/ptz/stop', data, function(res) {
                        if (res.code == 200) {
                            // console.log('停止')
                            // layer.msg(res.msg, {time: 2000});
                        } else {
                            layer.msg(res.msg, {
                                time: 2000
                            });
                        }
                    }, 'json');
                    return false;
                });
            }
        }

        // 拿到要全屏显示的div
        var fullDiv = document.getElementById("fulldiv")
        var myPlayer = document.getElementById("myPlayer")

        // 全屏
        var fullSreen = function() {

                // var myPlayerflashId = document.getElementsByName("myPlayerflashId")
                if (isFullscreen()) {
                    exitFullscreen()
                } else {
                    launchIntoFullscreen(fullDiv)
                    setTimeout(function() {
                        var canvas = document.getElementById("canvas0")
                        var canvas_draw0 = document.getElementById("canvas_draw0")
                        canvas.width = 1920
                        canvas.height = 1080
                        canvas_draw0.width = 1920
                        canvas_draw0.height = 1080
                    }, 100)

                }
            }
            // 封装全屏的方法
        function launchIntoFullscreen(element) {
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            }
        }
        // 封装退出全屏的方法
        function exitFullscreen() {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
        }
        // 判断是否全屏状态
        function isFullscreen() {
            if (navigator.userAgent.indexOf("Firefox") != -1) {
                return document.mozFullScreen;
            } else if (navigator.userAgent.indexOf("Chrome") != -1) {
                return document.webkitIsFullScreen;
            }
            return document.fullscreen;
        }
        // }())
    </script>
</body>

</html>

当有的时候，在其他分辨率打开页面，会出现不能自适应（即会出现滚动条）的情况，上述代码中的一下一个地方就是控制实时视频iframe自适应的

image.png

然后再根据按钮调整位置就好了，不想要按钮就不加。

因为简书不能上传文件，把Demo中的代码全贴出来又太臃肿，如果有朋友需要，在评论下面留邮箱地址。我每天都会看。

有时会出现iframe出现滚动条的情况，上述说法有意思误差，在HTML的vedio宽高都改成100%，只要将iframe的尺寸修改成要的样式就好，里面会自适应。

相关文章

  • vue接入实时视频，并可以控制缩放与上下左右

    效果图： 1、在大屏上的效果： 页面嵌入实时视频，可通过点击下面的按钮实现，摄像头拉进，缩小，上下左右等旋转动作 ...

  • Vue接入萤石实时视频

    需求：页面嵌入一个实时视频监控。如下： 上述监控是可以点开播放的。如何实现呢？首先要成为开发者，并创建一个应用，这...

  • AVFoundation - 高级捕捉功能

    1. 视频缩放 AVCaptureDevice提供了videoZoomFactor的属性, 用于控制捕捉设备的缩放...

  • 用iMovie进行视频处理初探

    拖入视频和图像 下方可以拖入视频，并可以拉伸。 同理可以拖入图片放在相应位置，并可以通过拖动来控制起止点。 不过如...

  • SceneKIt+ AVFoundation 打造VR播放器（1

    下面是我写的播放器 支持VR，全景，视频缩放，本地，网络视频播放，实时获取视频帧，获取播放时间，获取缓存时间，播放...

  • video自动全屏解决办法-canvas

    video自动撑满父级元素 最近有个需求，将视频充满，并可以随父元素缩放 先说说试过哪些方法：  1：css3：o...

  • 仪表探测&读数

    PART I：仪表探测 * 方式1: 接入实时巡检视频流，生成带有仪表盘的顺序截图 a. 从视频中detect仪表...

  • Vue项目常用插件

    1、Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作2、腾讯视频点播文档3、Vue插件之-图片裁剪4...

  • 使用GSYVideoPlayer增加显示实时网速

    使用GSYVideoPlayer增加显示实时网速 先看效果图 问题来源 项目中接入了这个视频播放框架，GitHub...

  • VUE+WebRTC实现音视频直播

    如何使用 Vue 实现音视频功能 1 功能简介 本文将介绍如何快速使用 Vue 实现一个简单的实时音视频通话。 相...

网友评论

    本文标题：vue接入实时视频，并可以控制缩放与上下左右

    本文链接：https://www.haomeiwen.com/subject/rsmfictx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    个人收藏

    掘金

    关于我们|服务条款|联系我们|vue接入实时视频，并可以控制缩放与上下左右|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！