视频音频及base64

本章节主要对视频video，音频audio以及base64的图片进行处理，同时利用浏览器调用摄像头等功能实现截图

音频控制

src指音乐文件地址
controls是否显示控制台
autoplay音频是否自动播放，在chrome浏览器里面，该属性失败，必须要发生交互行为（ click,touch等）以后才会自动播放音乐,其它浏览器正常使用
duration指当前音乐的时长
currentTime代表当前音乐播放的时间
volume控制当前音乐的声音大小，值为0~1
playbackRate用于控制当前音频文件的播放速度倍数，默认是1为正常速度
paused用于判断当前的音乐是否已经暂停，与它相对应的是played，这指时间线
play()播放当前音乐的方法，pause()暂停音乐的方法
onplay代表音乐播放的时候所触发的事件
onpause代表音乐暂停的时候所触发的事件
oncanplay代表音乐已加载完成，可以播放（音乐加载完成以后触发的事件）
ontimeupdate音乐播放的时候，时间进度条会改变，这个时候就会触发这个事件
loop循环播放属性

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>音乐播放</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1307637_zb6kiusqsa9.css">
    <style>
        .circle {
            width: 200px;
            height: 200px;
            background-image: url("./img/40739.jpg");
            background-size: 100% 100%;
            border-radius: 50%;

            animation: playingMusic 10s linear infinite paused;
        }

        .icon-bofang-yuanshijituantubiao {
            font-size: 56px;
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 50%;
            color: white;
            cursor: pointer;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        @keyframes playingMusic {
            from {
                transform: rotateZ(0deg);
            }

            to {
                transform: rotateZ(360deg);
            }
        }

        .box {
            width: 200px;
            height: 200px;
            position: relative;
        }

        .progress {
            width: 500px;
            height: 5px;
            /* border: 1px solid lightgray; */
            box-shadow: 0px 0px 10px 3px lightgray;
            box-sizing: border-box;
            border-radius: 5px;
            background-image: linear-gradient(to right, red, red);
            background-size: 0%;
            background-repeat: no-repeat;
            cursor: pointer;
            margin:0px 20px;
        }
        .musicBox{
            display: flex;
            align-items: center;
        }
        .progressBox{
            display: flex;
            align-items: center;
        }
    </style>
</head>

<body>
    <audio id="bgm" src="./music/17.mp3"></audio>
    <div class="musicBox">
        <div class="box">
            <div class="circle">
            </div>
            <span class="iconfont icon-bofang-yuanshijituantubiao"></span>
        </div>
        <!-- 写个进度条 -->
        <div class="progressBox">
            <span class="c_time">0:00</span>
            <div class="progress"></div>
            <span class="d_time">0:00</span>
        </div>
    </div>

</body>
<script>
    var playImage = document.querySelector(".circle");
    var iconControl = document.querySelector(".box>.iconfont");
    var bgm = document.querySelector("#bgm");
    var progress = document.querySelector(".progress");
    var d_time=document.querySelector(".d_time");
    var c_time=document.querySelector(".c_time");
    iconControl.addEventListener("click", function () {
        if (bgm.paused) {
            bgm.play();

        } else {
            bgm.pause();

        }
    });

    bgm.onplay = function () {
        playImage.style.animationPlayState = "running";
        iconControl.classList.add("icon-xinbaniconshangchuan-");
    }
    bgm.onpause = function () {
        playImage.style.animationPlayState = "paused";
        iconControl.classList.remove("icon-xinbaniconshangchuan-");
    }

    bgm.ontimeupdate = function () {
        //音乐当前是时间
        var currentTime = bgm.currentTime;
        var duration = bgm.duration;
        var result = currentTime / duration * 100 + "%";
        progress.style.backgroundSize = result;

        var n=parseInt(bgm.currentTime);
        var munites=parseInt(n/60).toString().padStart(2,"0");
        var second= (n%60).toString().padStart(2,"0");
        c_time.innerText=munites+":"+second;
    }
    bgm.oncanplay=function(){
        var n=parseInt(bgm.duration);
        var munites=parseInt(n/60).toString().padStart(2,"0");
        var second= (n%60).toString().padStart(2,"0");
        d_time.innerText=munites+":"+second;
    }   
    progress.addEventListener("click", function (event) {
        var left = event.clientX-progress.getBoundingClientRect().left;
        bgm.currentTime = left/progress.clientWidth*bgm.duration;
    });
</script>
</html>

效果图

视频控制

视频的很多属与音频保持一致，其中还有一些独特的属性

requestFullscreen()方法，设置当前视频会全屏状态
document.exitFullscreen ()方法，退出视频全屏状态
poster海报，设置当前视频在没有开始播放的时候的海报
requestPictureInPicture()开启画中画播放
document.exitPictureInPicture()退出画中画
可以利用canvas的drawImage来进行截图

第三方框架video.js

在页面使用视频的时候，请参考video.js的框架来进行设置

videojs官网地址

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>video.js使用</title>
    <!-- 使用框架之前，先把这两个文件导入进去 -->
    <link rel="stylesheet" href="./js/videojs/video-js.css" type="text/css">
    <style>
        #v1 {
            margin: auto;
        }
    </style>
</head>
<body>
    <video id="v1" class=" video-js vjs-default-skin" controls preload="none" width="800" height="600"
           poster="./img/40739.jpg">
        <source src="./video/01.mp4" type="video/mp4">
    </video>
</body>
<script src="./js/videojs/video.js" type="text/javascript"></script>
<script>
    //需要调用框架里面的videojs这个方法
    var v1 = videojs("#v1", {
        autoplay: false
    }, function () {
        //你的视频加载完成以后会触发的回调函数，返回当前视频对象  就是oncanplay的事件触发
        console.log("视频加载成功");
        console.log(this); //指向Player这个对象  也就是返回的对象v1
    });
    v1.on('pause', function () {
        var modal = v1.createModal('我是一个文本框 ，我可以在里面放很多的东西');
        modal.on('modalclose', function () {
            v1.play();
        });
    });
</script>
</html>

得到 v1对象以后，这个对象就是这个视频控制对象，可以在里面进行相应的视频控制，全屏，退出全屏，画中画以及其它的第三方操作都在这里面

webSocket基础

什么是socket?

套接字（socket）是一个抽象层，应用程序可以通过它发送或接收数据，可对其进行像对文件一样的打开、读写和关闭等操作。套接字允许应用程序将I/O(input/output)插入到网络中，并与网络中的其他应用程序进行通信。网络套接字是IP地址与端口的组合。

$ ipconfig

$ netstat -ano

socket其实就是计算机应用程序用于发送或接收数据的一种技术或方式，它使用的是IP地址+端口的组合

webSocket其实就是服务器与浏览器之间的通讯方式，浏览器可以向服务器发送信息，服务器也可以向浏览器发送信息

webSocket分为两部分，一个是服务器，一个是浏览器，服务器现在我们暂时不做考虑，我们以浏览器为主

服务器代码

const ws = require("nodejs-websocket");
const createServer = () => { 
    let server = ws.createServer(connection => {
        console.log(connection);
        connection.on('text', function (result) {
            //console.log('收到消息', result);
            //接收到消息以后，然后再进行转到，发送到每一个客户端
            broadcast(server,result);
        })
        connection.on('connect', function (code) {
            console.log('开启连接', code)
        })
        connection.on('close', function (code) {
            console.log('关闭连接', code)
        })
        connection.on('error', function (code) {
            console.log('异常关闭', code)
        })
    });
    return server;
}
// 服务端广播
function broadcast(server, msg) {
    //把连接到当前服务器上面的所以浏览器连接遍历一次，然后向它们发送消息
    //把接收到的消息转发给了其它的客户端
    server.connections.forEach(function (conn) {
        conn.sendText(msg);
    })
}
let server=createServer();
//利用9999这个端口，来开启服务器的WebSocket
server.listen(9999,function(){
    console.log("服务开启成功");
})

客户端代码

第一步：在浏览器端我们要先创建WebSocket的对象，window对象下面自带这一个构造函数, 我们只需要new这一个构造函数就可以了

var ws=new WebSocket(url地址);

这个url地址指的就是WebSocket的服务器地址，因为我们的客户端要向服务器进行通讯

我们已经知道端口号是9999,并且知道要通讯的服务器IP地址是192.168.6.177,这个时候，我们就可以进行如下参数构造

var ws=new WebSocket("ws://192.168.6.177:9999");

1567146077891

第二步：主要事件

onopen当WebSocket打开的时候会触发
onclose当WebSocket关闭的时候触发
onerror当服务器错误的时候触发
onmessage当收到服务器的消息的时候触发，服务器的消息在event.data这个属性里面

var ws=new WebSocket("ws://192.168.6.177:9999");
ws.onopen=function(event){
    //代表websocket被建立，并打开的时候触发的事件
    console.log("WebSocket已打开");
    // console.log(event);
}
ws.onclose=function(event){
    console.log("WebSocket已关闭");
}
ws.onerror=function(event){
    console.log("WebSocket发生了错误");
}
ws.onmessage=function(event){
    //代表服务器向自己发送了消息
    console.log(event.data);
}

**第三步：**浏览器向服务器发送消息

主要使用的是就是send()的方法，它接收一个字符串

ws.send("hello world");

整个WebSocket在客户的应用就只有一个构造，四个事件，一个方法

图片base64转化

我们在网页里面有一个特殊的对象FileReader，这个对象可以把图片转换成base64的格式，通过base64的方式，我们选中的图片可以直接显示在页面上面，后期，我们也可以使用它进行图片的传输

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>base64</title>
</head>
<body>
    <input type="file" id="f1" onchange="fileChange(this)" style="display: none">
    <button type="button" onclick="this.previousElementSibling.click()"></button>
    <img src="" id="img1">
</body>
<script>
    var f1=document.querySelector("#f1");
    var img1=document.querySelector("#img1");

    function fileChange(obj){
       var file=obj.files[0]; 
       var fr=new FileReader();
       fr.onload=function(event){
           var e=event||window.event;
           //console.log(e.currentTarget.result);
           img1.src=e.currentTarget.result;  //直接把base64赋值到了我们的图片地址上面
       }
       fr.readAsDataURL(file);
    }
</script>
</html>

浏览器对摄像头与录音设备的访问

在HTML5里面，已经允许浏览器对当前访问者的报像头与话筒等设备进行访问，但是它有一定的限制

只能通过本地方访问，不能通过远程地址访问
```
file:///D:/H1904/0831/code/083102/02.html
```
或
```
http://127.0.0.1:5500/02.html
```
而不能使用下面的远程地址
```
http://192.168.6.254:5500/02.html
```
如果使用本地访问可以正常的使用navigator.getUserMedia这个方法，如果如果是远程访问，则不行
如果要在远程地址上面使用摄像头，则必须使用加密协议HTTPS
```
https://www.softeem.xin/views/video.html
```

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浏览器调用视频与音频</title>
    <style>
        #c1{
            border:1px solid black;
        }
    </style>
</head>

<body>
    我要在这里获取浏览器的摄像头
    <video id="v1" width="800px" height="600px"></video>
    <button type="button" id="btn1" onclick="takePhoto()">拍照</button>
    <canvas width="800px" height="600px"  id="c1" style="display:none"></canvas>
    <img src="" id="img1" width="800px" height="600px">
</body>
<script>
    var v1=document.querySelector("#v1");
    var c1=document.querySelector("#c1");
    var img1=document.querySelector("#img1");
    //我们在这里要根据不同的浏览器去调用不同的方法
    navigator.getMedia = navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia;

    navigator.getMedia({
        video: true, //使用摄像头对象
        audio: false //不使用音频
    }, function (stream) {
        //去年11月的时候
       // v1.src=URL.createObjectURL(stream);   去年11月都还是这么写
        //获取成功以后
        v1.srcObject=stream;  //新的方法
        v1.play();
    },function(err){
        //获取失败以后
        console.log(err);
    });

    function takePhoto(){
        //console.log(c1);
        var ctx=c1.getContext("2d");
        //画一个图片，在这里，我们是直接从视频里面进行了截图
        ctx.drawImage(v1,0,0,800,600);
        //把canvas里面的图片转换成base64格式
        img1.src=c1.toDataURL("image/jpeg");
    }
</script>
</html>

目录CONTENT

视频音频及base64

视频音频及base64

音频控制

音频控制

视频控制

第三方框架video.js

webSocket基础

服务器代码

客户端代码

图片base64转化

浏览器对摄像头与录音设备的访问

评论区