jswebrtc播放无人机直播视频

最新推荐文章于 2023-09-05 15:34:36 发布

zsq强强联合

最新推荐文章于 2023-09-05 15:34:36 发布

阅读量723

点赞数

分类专栏：无人机、摄像头对接文章标签： javascript 前端音视频

本文链接：https://blog.csdn.net/qq_27203603/article/details/127277812

版权

无人机、摄像头对接专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebRTCPlayer</title>
</head>
<body>
    <video id="video-webrtc" controls></video>
	<script type="text/javascript" src="../dist/jswebrtc.min.js"></script>
	<script type="text/javascript">
		var video = document.getElementById('video-webrtc');
		var url = 'webrtc://osiii.com/live/livestream';
		var player = new JSWebrtc.Player(url, { video: video, autoplay: true, onPlay: (obj) => { console.log("start play") } });
	</script>
</body>
</html>

1、登录获取token

//登录

    let data = { username: "zhgw&admin", password: "_admin@110*", flag: "1" };

    axios

      .post(`${this.basicUrl}/manage/api/v1/login`, data)

      .then(function (res) {

        that.token = that.urlencode(res.data.data.access_token);

        that.workspace = res.data.data.workspace_id;

        // that.initWebsocket("ws://dji-cloud.rzfk-tech.com/api/v1/ws?x-auth-token="+that.urlencode(res.data.data.access_token))

        that.getUavName();

        that.getUavList();

      });

2、获取无人机列表

async getUavList() {

      // console.log(this,"22222222222222222222",this.token,11111111111111111111)

      let res = await axios({

        url: `${this.basicUrl}/manage/api/v1/live/capacity`,

        headers: { "x-auth-token": this.token },

      });

      if (res && res.data.data.length > 0) {

        this.uavList = res.data.data;

        this.uavValue=this.uavList[0].name;

        this.selectUav(this.uavList[0].sn);

      } else {

        var data = {

          sn: "1ZNBJ4R00C0030", // 重要

          name: "Matrice 300 RTK",

          cameras_list: [

            {

              id: "3a1b34df-fe94-4f52-b49c-f24cbe6c1fa2",

              name: "H20",

              index: "42-0-0", // 重要 默认使用挂载镜头 H20

              videos_list: [

                {

                  id: "b1698512-86d4-4a07-ae96-8f3515e5a8de",

                  index: "zoom-0", // 重要 变焦

                  type: "zoom",

                },

                {

                  id: "1040dc08-486b-4654-9074-7d89bdd6540f",

                  index: "wide-0", // 广角

                  type: "wide",

                },

              ],

            },

            {

              id: "9472fd6b-ccd4-44e8-b9bf-83d11282fb65",

              name: "FPV",

              index: "39-0-7",

              videos_list: [

                {

                  id: "d30842f3-b446-4789-94e7-0e5369f97f2a",

                  index: "normal-0",

                  type: "normal",

                },

              ],

            },

          ],

        };

        this.uavList = [data];

        //默认选择第一个播放

        // this.uavValue=this.uavList[0].name;

        // this.selectUav(this.uavList[0]);

      }



      // console.log(res, 12121212);

    },

3、获取飞手信息

//获取飞手信息
    getUavName() {
      axios({
        url: `${this.basicUrl}/manage/api/v1/devices/setting/list`,
        headers: { "x-auth-token": this.token },
      }).then((res) => {
        if (res.status == 200) {
          this.uaverList = res.data.data;
        }
      });
    },

4、选择第一路播放

selectUav(selectVal) {

if (selectVal) {

var obj = this.uavList.find((item) => {

return (item.sn = selectVal);

});

}

var usernameobj = this.uaverList.find((item) => {

return item.child_sn == selectVal;

});

// console.log(obj,`rtmp://121.42.242.217:1949/ry_live/${usernameobj.username}?workspaceId=${this.workspace}&sn=${obj.sn}`,`${obj.sn}/${obj.cameras_list[0].index}/${obj.cameras_list[0].videos_list[0].index}`,"ogj11111111111111111111")

axios({

url: `${this.basicUrl}/manage/api/v1/live/streams/start`,

method:"post",

data: {

url: `rtmp://121.42.242.217:1949/ry_live/${usernameobj.username}?workspaceId=${this.workspace}&sn=${obj.sn}`,

video_id: `${obj.sn}/${obj.cameras_list[0].index}/${obj.cameras_list[0].videos_list[0].index}`, //例如: 1ZNBJ4R00C0030/42-0-0/zoom-0

url_type: 1, //rtmp

video_quality: "3", // 默认 HD

headers: { "x-auth-token": this.token },

})

.then((res) => {

if (res.status==200) {