在RecordRTC视频中添加放大和缩小功能

问题描述 投票:0回答:1

以视频形式记录事件时,我在应用程序中使用RecordRTC。我现在的问题是我想对视频进行放大和缩小。无论如何,我可以在RecordRTC中做到吗?

<div id="video" class="camera-holder">
    <div class="user-line">
        <svg version="1.1" id="IconsRepoEditor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 481.613 481.613" style="enable-background:new 0 0 481.613 481.613;" xml:space="preserve" width="" height="" fill="#fcf712" stroke="#fcf712" stroke-width="0"><g id="IconsRepo_bgCarrier"></g> <path d="M12.331,253.313c6.6,0,12-5.4,12-12c0-0.1,0-0.2,0-0.2c0-0.1,0-0.2,0-0.3c0-6.6-5.4-12-12-12s-12,5.4-12,12 c0,0.1,0,0.2,0,0.3s0,0.2,0,0.3C0.331,248.013,5.631,253.313,12.331,253.313L12.331,253.313z"></path> <path d="M467.931,205.413c-6.6,0.7-11.4,6.6-10.7,13.2c0.6,6.2,5.8,10.8,11.9,10.8c0.4,0,0.8,0,1.2-0.1 c6.6-0.7,11.4-6.6,10.7-13.1C480.431,209.613,474.631,204.813,467.931,205.413z"></path> <path d="M14.531,206.513c0.8,0.2,1.6,0.3,2.4,0.3c5.6,0,10.6-3.9,11.8-9.6c1.3-6.5-2.9-12.8-9.4-14.2c-6.5-1.3-12.8,2.9-14.2,9.4 C3.831,198.813,8.031,205.113,14.531,206.513z"></path> <path d="M208.831,455.413c-6.5-1-12.7,3.5-13.6,10.1c-1,6.6,3.5,12.7,10.1,13.6c0.6,0.1,1.2,0.1,1.8,0.1c5.8,0,11-4.3,11.8-10.2 C219.831,462.513,215.331,456.413,208.831,455.413z"></path> <path d="M161.631,38.013c1.4,0,2.8-0.3,4.2-0.8c6.2-2.3,9.4-9.2,7.1-15.4c-2.3-6.2-9.2-9.4-15.4-7.1s-9.4,9.2-7.1,15.4 C152.231,35.013,156.831,38.013,161.631,38.013z"></path> <path d="M295.631,30.613c1,0.3,2,0.4,3,0.4c5.3,0,10.2-3.6,11.6-9c1.7-6.4-2.2-13-8.6-14.6c-6.4-1.7-13,2.2-14.6,8.6 C285.331,22.413,289.231,28.913,295.631,30.613z"></path> <path d="M126.831,425.213c-5.6-3.5-13-1.8-16.5,3.9c-3.5,5.6-1.8,13,3.8,16.5c2,1.2,4.2,1.8,6.3,1.8c4,0,7.9-2,10.2-5.7 C134.231,436.113,132.431,428.713,126.831,425.213z"></path> <path d="M120.131,58.413c2.2,0,4.4-0.6,6.3-1.8c5.6-3.5,7.3-10.9,3.8-16.5c-3.5-5.6-10.9-7.3-16.5-3.8c-5.6,3.5-7.3,10.9-3.8,16.5 C112.231,56.413,116.131,58.413,120.131,58.413z"></path> <path d="M46.731,362.213c-5.4,3.8-6.8,11.3-2.9,16.7c2.3,3.3,6.1,5.1,9.8,5.1c2.4,0,4.8-0.7,6.9-2.2c5.4-3.8,6.8-11.3,2.9-16.7 C59.631,359.713,52.131,358.413,46.731,362.213z"></path> <path d="M252.231,24.013c0.2,0,0.4,0,0.6,0c6.4,0,11.7-5,12-11.4c0.3-6.6-4.8-12.3-11.4-12.6c-6.6-0.3-12.3,4.8-12.6,11.4 C240.531,18.113,245.631,23.713,252.231,24.013z"></path> <path d="M423.131,380.613c-5-4.3-12.6-3.7-16.9,1.3s-3.7,12.6,1.3,16.9c2.3,1.9,5,2.9,7.8,2.9c3.4,0,6.7-1.4,9.1-4.2 C428.731,392.513,428.131,385.013,423.131,380.613z"></path> <path d="M415.031,103.513c2.8,0,5.6-1,7.8-2.9c5-4.3,5.6-11.9,1.3-16.9c-4.3-5-11.9-5.6-16.9-1.3c-5,4.3-5.6,11.9-1.3,16.9 C408.331,102.013,411.631,103.513,415.031,103.513z"></path> <path d="M252.731,457.613c-6.6,0.3-11.7,6-11.4,12.6c0.3,6.4,5.6,11.4,12,11.4c0.2,0,0.4,0,0.6,0c6.6-0.3,11.7-6,11.4-12.6 S259.331,457.213,252.731,457.613z"></path> <path d="M470.431,251.813c-6.6-0.7-12.5,4.2-13.1,10.8c-0.7,6.6,4.2,12.5,10.8,13.1c0.4,0,0.8,0.1,1.2,0.1 c6.1,0,11.3-4.6,11.9-10.8C481.831,258.313,477.031,252.413,470.431,251.813z"></path> <path d="M75.131,398.913c-4.6,4.8-4.4,12.4,0.5,17c2.3,2.2,5.3,3.3,8.3,3.3c3.2,0,6.3-1.3,8.7-3.7c4.6-4.8,4.3-12.4-0.5-17 C87.331,393.813,79.631,394.113,75.131,398.913z"></path> <path d="M374.431,412.313c-5.2,4.1-6.2,11.6-2.1,16.8c2.4,3,5.9,4.6,9.5,4.6c2.6,0,5.2-0.8,7.3-2.5c5.2-4.1,6.2-11.6,2.1-16.9 C387.231,409.113,379.631,408.213,374.431,412.313z"></path> <path d="M336.831,45.813c1.7,0.8,3.5,1.2,5.3,1.2c4.4,0,8.7-2.5,10.8-6.7c2.9-6,0.5-13.1-5.5-16s-13.1-0.5-16.1,5.5 C328.331,35.713,330.831,42.913,336.831,45.813z"></path> <path d="M206.531,26.413c0.6,0,1.2,0,1.8-0.1c6.5-1,11-7.1,10-13.7s-7.1-11-13.7-10.1l0,0c-6.5,1-11,7.1-10,13.7 C195.531,22.113,200.731,26.413,206.531,26.413z"></path> <path d="M448.431,175.613c1.6,5.1,6.3,8.4,11.4,8.4c1.2,0,2.4-0.2,3.6-0.6c6.3-2,9.8-8.7,7.8-15s-8.7-9.8-15-7.8 C449.931,162.513,446.431,169.313,448.431,175.613z"></path> <path d="M441.531,141.413c2,0,4-0.5,5.8-1.5c5.8-3.2,7.9-10.5,4.6-16.3c-3.2-5.8-10.5-7.9-16.3-4.6c-5.8,3.2-7.9,10.5-4.6,16.3 C433.231,139.213,437.331,141.413,441.531,141.413z"></path> <path d="M83.431,86.813c3,0,6-1.1,8.3-3.3c4.8-4.6,5-12.2,0.4-17s-12.2-5-17-0.4s-5,12.2-0.4,17 C77.131,85.613,80.331,86.813,83.431,86.813z"></path> <path d="M296.131,450.913c-6.4,1.7-10.3,8.2-8.6,14.6c1.4,5.4,6.3,9,11.6,9c1,0,2-0.1,3-0.4c6.4-1.7,10.3-8.2,8.6-14.6 C309.031,453.113,302.531,449.213,296.131,450.913z"></path> <path d="M463.631,297.713c-6.3-2-13.1,1.6-15,7.9c-2,6.3,1.6,13.1,7.9,15c1.2,0.4,2.4,0.5,3.6,0.5c5.1,0,9.9-3.3,11.5-8.4 C473.431,306.413,469.931,299.613,463.631,297.713z"></path> <path d="M447.631,341.213c-5.8-3.2-13.1-1.1-16.3,4.7c-3.2,5.8-1.1,13.1,4.7,16.3c1.8,1,3.8,1.5,5.8,1.5c4.2,0,8.3-2.2,10.5-6.2 C455.531,351.713,453.431,344.413,447.631,341.213z"></path> <path d="M337.231,435.613c-6,2.9-8.4,10.1-5.5,16.1c2.1,4.2,6.4,6.7,10.8,6.7c1.8,0,3.6-0.4,5.3-1.2c6-2.9,8.4-10.1,5.5-16.1 C350.331,435.113,343.131,432.613,337.231,435.613z"></path> <path d="M166.331,444.513c-6.2-2.3-13.1,0.9-15.4,7.1s0.9,13.1,7.1,15.4c1.4,0.5,2.8,0.8,4.1,0.8c4.9,0,9.5-3,11.3-7.9 C175.731,453.713,172.531,446.813,166.331,444.513z"></path> <path d="M46.431,119.813c2.1,1.4,4.5,2.1,6.9,2.1c3.8,0,7.5-1.8,9.8-5.1c3.8-5.4,2.5-12.9-3-16.7c-5.4-3.8-12.9-2.5-16.7,3 C39.631,108.613,41.031,116.013,46.431,119.813z"></path> <path d="M26.031,161.513c1.5,0.7,3.1,1,4.7,1c4.7,0,9.1-2.7,11-7.3c2.6-6.1-0.2-13.2-6.3-15.8s-13.1,0.2-15.8,6.3 C17.131,151.813,19.931,158.913,26.031,161.513z"></path> <path d="M28.831,285.013c-1.4-6.5-7.7-10.7-14.2-9.3c-6.5,1.3-10.7,7.7-9.3,14.2c1.2,5.7,6.2,9.6,11.7,9.6c0.8,0,1.6-0.1,2.4-0.3 C25.931,297.813,30.131,291.513,28.831,285.013z"></path> <path d="M42.031,326.813c-2.6-6.1-9.7-8.9-15.8-6.3s-8.9,9.7-6.3,15.8c2,4.5,6.4,7.2,11,7.2c1.6,0,3.2-0.3,4.8-1 C41.831,340.013,44.631,332.913,42.031,326.813z"></path> <path d="M374.031,69.113c2.2,1.7,4.8,2.5,7.3,2.5c3.6,0,7.1-1.6,9.5-4.7c4-5.2,3.1-12.8-2.1-16.8c-5.2-4.1-12.8-3.1-16.8,2.1 C367.831,57.413,368.831,65.013,374.031,69.113z"></path> <path d="M241.331,221.613c32.2,0,58.5-26.2,58.5-58.5s-26.2-58.5-58.5-58.5s-58.5,26.2-58.5,58.5S209.131,221.613,241.331,221.613 z M241.331,128.613c19,0,34.5,15.5,34.5,34.5s-15.5,34.5-34.5,34.5s-34.5-15.5-34.5-34.5S222.331,128.613,241.331,128.613z"></path> <path d="M327.531,281.713c-20-27-49-40.7-86.2-40.7s-66.2,13.7-86.2,40.7c-15,20.3-24.6,47.9-28.5,81.9c-0.7,6.6,4,12.5,10.6,13.3 s12.5-4,13.3-10.6c7.6-67.2,38.2-101.3,90.8-101.3s83.2,34.1,90.8,101.3c0.7,6.1,5.9,10.7,11.9,10.7c0.4,0,0.9,0,1.4-0.1 c6.6-0.7,11.3-6.7,10.6-13.3C352.131,329.613,342.531,302.013,327.531,281.713z"></path> </svg>
        </path>
    </svg>
    </div>
    <div id="counter" class="video-counter">
    </div>
    <video id="gum" class="video-content" width="100%" height="auto" playsinline autoplay muted></video>
    <div class="demo-wrapper html5-progress-bar">
        <div id="myProgress">
            <div id="myBar"></div>
        </div>
    </div>
    <a class="btn zoom"><i class="fas fa-search-plus"></i></a>
    <a class="btn zoom-out"><i class="fas fa-search-minus"></i></a>
</div>

JS在这里:https://recordrtc.org/RecordRTC.js.html

请让我知道在RecordRTC中这是否可行。我在网上找不到关于它的任何样本。

javascript laravel recordrtc
1个回答
© www.soinside.com 2019 - 2024. All rights reserved.